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!
Share Improve this question asked Aug 17, 2020 at 12:14 BenBen 33 bronze badges3 Answers
Reset to default 0The 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.