@thmsggn, Ok will it might be hard to tell then. But can you confirm you’ve implemented the code in the functions.php in the child-theme? If you’ve implemented it correctly you should at least see “<div class=’product_colors_container’></div>” in your source code on the product archive page. Can you check if that’s the case?
Hey @rvandenbussche, sorry didn’t see ur reply earlier.
I have implemented the code in functions.php of child-theme. And when i go in my shop product list, i see “<div class=’product_colors_container’></div>” in source code, but nothing change on my shop product list.
@thmsggn If that happens you’re not using the right attribute name. Replace pa_color for your attribute slug.
@saurabhj91, I’ve tried changing it and it works but since I’m using images instead of colours I need some other syntax in the html get something back. Do you know what i need to fill in? ‘image’ doesn’t work.
@rvandenbussche for image you have to use img tag. Please check the data you get using var_dump and write code accordingly.
@saurabhj91:
Hi, your code works perfect. Did you find a way to switch images by clicking on colors?
@rvandenbussche But i did it.. my attribute slug is “couleur” and my code is :
add_action( 'woocommerce_after_shop_loop_item', 'sm_display_product_color_options', 9 );
function sm_display_product_color_options(){
global $woocommerce, $product;
$variation_colors_data = $product->get_attributes();
$variation_colors_data = $variation_colors_data['couleur'];
$variation_colors = $variation_colors_data['options'];
echo "<div class='product_colors_container'>";
foreach ($variation_colors as $variation_color) {
echo "<div class='product_color_options' style='background-color:".get_term_meta($variation_color,'color',true)."'></div>";
}
echo "</div>";
}
@thmsggn You probably need to use ‘pa_couleur’ instead of ‘couleur’.
@rvandenbussche Yes i did it and that works. But, colors are displaying on my product hover. I would like to display them under my product name. Do you know with what i can replace : “woocommerce_after_shop_loop_item” to get what i want ?
Thanks 🙂
Well I succeed, thank you all for your help 🙂
@thmsggn Good to hear! Probably some css stuff.
@saurabhj91 I couldn’t find a way to make a proper var_dump, I only get back int(25), int(28), etc. I’m not that technical. Do you have any idea to get the swatch image url back?
Ok, I got it somewhat working now. It only shows all the colours not the only ones in stock.
add_action( 'woocommerce_after_shop_loop_item', 'sm_display_product_color_options', 9 );
function sm_display_product_color_options(){
global $woocommerce, $product;
$variation_colors_data = $product->get_attributes();
$variation_colors_data = $variation_colors_data['pa_farben'];
$variation_colors = $variation_colors_data['options'];
echo "<div class='product_colors_container'>";
foreach ($variation_colors as $variation_color) {
$image = get_term_meta($variation_color,'image',true);
$image = wp_get_attachment_image_src($image, 'thumbnail', false);
$image = $image[0];
echo '<span class="swatch swatch-image"><img src=' . $image . ' style="height: 20px; width: 20px; margin-right: 5px;"></span>';
}
echo "</div>";
}
@rvandenbussche Happy to hear to get it working. To get only the in-stock product variation images you have to check the product stock status using the product id and then add into the img tag.
I keep getting this error when trying to show image swatches on products page.
“Warning: Invalid argument supplied for foreach() in /home/mindclk/public_html/pv/wp-content/themes/mindspike/functions.php on line 249”
My current code in my functions file:
add_action( ‘woocommerce_after_shop_loop_item’, ‘sm_display_product_color_options’, 9 );
function sm_display_product_color_options(){
global $woocommerce, $product;
$variation_colors_data = $product->get_attributes();
$variation_colors_data = $variation_colors_data[‘color’];
$variation_colors = $variation_colors_data[‘options’];
echo “<div class=’product_colors_container’>”;
foreach ($variation_colors as $variation_color) {
$image = get_term_meta($variation_color,’image’,true);
$image = wp_get_attachment_image_src($image, ‘thumbnail’, false);
$image = $image[0];
echo ‘<span class=”swatch swatch-image”>
</span>’;
}
echo “</div>”;
}
-
This reply was modified 8 years, 4 months ago by
Chris Cook.
@cccamuseme, you need to check if the data is stored for $variation_colors variable.
I got it working using pa_color
