CODEWITHSUNDEEP
phpwordpresswoocommerceproductadvanced-custom-fields
Carlos Rodríguez
Carlos Rodríguez

Reputation: 11

Display Advanced Custom Fields through a functions in WooCommerce

I'm trying to add an array of Advanced Custom Fields values to the single product page in a WooCommerce website.

This fields are checkboxes the website admin will check and I want the values to show in the single product page.

I've already found how to show the values using this code on my child theme's functions.php file:

add_action( 'woocommerce_product_tabs', 'deco_display_acf_field_under_images', 30 );
    function deco_display_acf_field_under_images() {
       echo the_field('cuidados');
    }

Where “cuidados” is the name of the field.

It works, but this only displays the values separated by commas.

Now I want to use a more advanced way of displaying the values like this example I've found on the ACF documentation for displaying checkboxes values:

<?php

// vars 
$colors = get_field('colors');


// check
if( $colors ): ?>
    <ul>
    <?php foreach( $colors as $color ): ?>
        <li><?php echo $color; ?></li>
    <?php endforeach; ?>
    </ul>
<?php endif; ?>

I don't know PHP but I know this won't work on my functions.php file because of the syntax.

Can you help me figure out how to achieve this?

Thanks in advance.

Upvotes: 1

Views: 2637

Answers (2)

LoicTheAztec
LoicTheAztec

Reputation: 254473

As the value of get_field('cuidados') is a string made of coma separated values, you could try the following:

$colors_str = get_field('colors');

if( ! empty($colors_str) ) {

    // Removing the space after the coma (if there is any)
    $colors_str = str_replace(', ', ',', $colors_str);

    // Convert the string as an array
    $colors = explode(',', $colors_str);

    // Html output
    echo '<ul><li>' . implode( '</li><li>', $colors ) . '</li></ul>';
}

It should work… So in your hooked function:

add_action( 'woocommerce_product_tabs', 'deco_display_acf_field_under_images', 30 );
function deco_display_acf_field_under_images() {
    global $product;

    $colors_str = get_field('colors', $product->get_id());

    if( ! empty($colors_str) ) {

        // Removing the space after the coma (if there is any
        $colors_str = str_replace(', ', ',', $colors_str);

        // Convert the string as an array
        $colors = explode(',', $colors_str);

        // Html output
        echo '<ul><li>' . implode( '</li><li>', $colors ) . '</li></ul>';
    }
}

Code goes in functions.php file of your active child theme (or active theme).

Upvotes: 1

chatnoir
chatnoir

Reputation: 2303

Try

add_action('woocommerce_product_tabs', 'deco_display_acf_field_under_images', 30);

function deco_display_acf_field_under_images() {
// fields MUST be an array in the format array(a,b,c) (or [a,b,c])
$fields = the_field('cuidados');
if (is_string($fields)) $fields = explode(",", $fields);

// check
if ($fields): ?>
    <ul>
        <?php foreach ($fields as $field): ?>
            <li><?php echo $field; ?></li>
        <?php endforeach; ?>
    </ul>
<?php endif; 
}

Upvotes: 0

Related Questions