Viewing 15 replies - 16 through 30 (of 31 total)
  • @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.

    Thread Starter Saurabh Jain

    (@saurabhj91)

    @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>";
    }
    Thread Starter Saurabh Jain

    (@saurabhj91)

    @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 6 years, 7 months ago by Chris Cook.
    Thread Starter Saurabh Jain

    (@saurabhj91)

    @cccamuseme, you need to check if the data is stored for $variation_colors variable.

    I got it working using pa_color

Viewing 15 replies - 16 through 30 (of 31 total)
  • The topic ‘How to get color swatches on product list page?’ is closed to new replies.