wordpressadvanced-custom-fields

Display an ACF checkbox field as a list


Is there a way to display an ACF checkbox field as a list when it is displayed on the page? Currently all the values are shown separated by commas but I would like to format them as a bulleted list. I'm using Impreza theme.

Example:

Polymers: PLA, PETG, ASA, ABS, PCTG, TPU, GreenTEC Pro

-->

Polymers:


Solution

  • find the template showing your acf list, modify the code to output a bulleted List replace the existing code with following and change 'your_checkbox_field_name' with your acf checkbox field:

    <?php
    $checkbox_values = get_field('your_checkbox_field_name'); //change 'your_checkbox_field_name' with your acf checkbox field
    if ($checkbox_values) : ?>
        <ul>
            <?php foreach ($checkbox_values as $value) : ?>
                <li><?php echo esc_html($value); ?></li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>
    

    If you can't find the code that showing your acf field, then use [checkbox_list] shortcode to show the bulleted list

    function display_checkbox_list_shortcode( $atts ) {
        $atts = shortcode_atts( array(
            'field' => 'your_checkbox_field_name', //change 'your_checkbox_field_name' with your acf checkbox field
        ), $atts, 'checkbox_list' );
    
        $checkbox_values = get_field( $atts['field'] );
        $output = '';
    
        if ($checkbox_values) {
            $output .= '<ul>';
            foreach ($checkbox_values as $value) {
                $output .= '<li>' . esc_html( $value ) . '</li>';
            }
            $output .= '</ul>';
        }
    
        return $output;
    }
    add_shortcode( 'checkbox_list', 'display_checkbox_list_shortcode' );