I'm building a webshop, and started to configure the product loop on the shop archive page. I display the product category related to every product, and I would like to set to the categories to have a background that I've chosen on the admin page.

I've made an ACF colour picker field, and set the colors.

This is the code that I have:

add_action( 'woocommerce_shop_loop_item_title', 'VS_woo_loop_product_title', 10 );
function VS_woo_loop_product_title() {
    echo '<h3>' . get_the_title() . '</h3>';
    $terms = get_the_terms( $post->ID, 'product_cat' );
    if ( $terms && ! is_wp_error( $terms ) ) :
    //only displayed if the product has at least one category
        $cat_links = array();
        foreach ( $terms as $term ) {
            $cat_links[] = $term->name;
        }
        $on_cat = join( " ", $cat_links );
        ?>
        <div style="background: <?php the_field('kollekcio_szine', $terms); ?>">
            <?php echo $on_cat; ?>
        </div>
    <?php endif;
} 

It simply does not work. The category shows up correctly, but the background color does not appear. If I inspect the element I see that the background property is empty.

How should I modify my code to get this work properly?

Thank you for your help!

I'm building a webshop, and started to configure the product loop on the shop archive page. I display the product category related to every product, and I would like to set to the categories to have a background that I've chosen on the admin page.

I've made an ACF colour picker field, and set the colors.

This is the code that I have:

add_action( 'woocommerce_shop_loop_item_title', 'VS_woo_loop_product_title', 10 );
function VS_woo_loop_product_title() {
    echo '<h3>' . get_the_title() . '</h3>';
    $terms = get_the_terms( $post->ID, 'product_cat' );
    if ( $terms && ! is_wp_error( $terms ) ) :
    //only displayed if the product has at least one category
        $cat_links = array();
        foreach ( $terms as $term ) {
            $cat_links[] = $term->name;
        }
        $on_cat = join( " ", $cat_links );
        ?>
        <div style="background: <?php the_field('kollekcio_szine', $terms); ?>">
            <?php echo $on_cat; ?>
        </div>
    <?php endif;
} 

It simply does not work. The category shows up correctly, but the background color does not appear. If I inspect the element I see that the background property is empty.

How should I modify my code to get this work properly?

Thank you for your help!

• woocommerce-offtopic
• taxonomy
• advanced-custom-fields
• color-picker

3 Answers 3

The syntax to get the ACF field of a custom taxonomy is:

$var = get_field('name_of_acf_field', 'name_of_taxonomy' . '_' . taxonomy_ID);

so in your case you'll need to get product_cat ID before and do something like:

add_action( 'woocommerce_shop_loop_item_title', 'VS_woo_loop_product_title', 10 );
function VS_woo_loop_product_title() {
    echo '<h3>' . get_the_title() . '</h3>';
    $terms = get_the_terms( $post->ID, 'product_cat' );
    if ( $terms && ! is_wp_error( $terms ) ) :
    //only displayed if the product has at least one category
        $cat_links = array();
        foreach ( $terms as $term ) {
            $cat_links[] = $term->name;
            $cat_id = $term->term_id;
        }

        $on_cat = join( " ", $cat_links );
        $bgcolor = get_field('kollekcio_szine', 'product_cat' . '_' . $cat_id);

        ?>
        <div style="background-color: <?php echo $bgcolor; ?>">
            <?php echo $on_cat; ?>
        </div>
    <?php endif;
}

For get ACF datas from your category, you need to do something like this:

Example from my code: (This code is an example from my project and it is not a mix between WooCommerce and ACF. It is a mix with ACF and custom dev.)

....
foreach ($products_cats as $cat) {
    $term = get_term($cat->id, 'products_cats');

    $term_img = get_field('image_present', $term->taxonomy . '_' . $term->term_id);
}
....

Sorry for my bad english, I hope this'll help you!

If I am reading this correctly, the variable $terms is an array at the point where you use it in the_field. I think you need it to be an individual category ID. I don't think the function the_field() accepts an array... I'd start by printing the raw data to the screen and see if its giving you any error output:

<?php var_dump(the_field('kollekcio_szine', $terms)); ?>

Or similar raw output method...

If you can identify just the single category you want to apply the styling for, you can then use that in the above.