Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 4 years ago.

I'm trying to add color swatches on category page.

I have this code in functions.php :

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_color'];
    $variation_colors = $variation_colors_data['options'];
    echo "<div class='product_colors_container'>";
    foreach ($variation_colors as $variation_color) {
        echo "<div class='variable-item-span variable-item-span-color' style='background-color:".get_term_meta($variation_color,'color',true)."'></div>";
    }
    echo "</div>";
} 

and this is the output:

<div class="product_colors_container"><div class="variable-item-span variable-item-span-color" style="background-color:"></div><div class="variable-item-span variable-item-span-color" style="background-color:"></div></div>

Any idea what's wrong?

Thanks.

Andrei

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 4 years ago.

I'm trying to add color swatches on category page.

I have this code in functions.php :

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_color'];
    $variation_colors = $variation_colors_data['options'];
    echo "<div class='product_colors_container'>";
    foreach ($variation_colors as $variation_color) {
        echo "<div class='variable-item-span variable-item-span-color' style='background-color:".get_term_meta($variation_color,'color',true)."'></div>";
    }
    echo "</div>";
} 

and this is the output:

<div class="product_colors_container"><div class="variable-item-span variable-item-span-color" style="background-color:"></div><div class="variable-item-span variable-item-span-color" style="background-color:"></div></div>

Any idea what's wrong?

Thanks.

Andrei

• customization
• woocommerce-offtopic

• Try this free WooCommerce Variation Swatches plugin: wordpress/plugins/woo-variation-swatches – Ahmed Eshaan Commented Dec 27, 2018 at 8:43

1 Answer 1

Try this code

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) {
        echo "<div class='variable-item-span variable-item-span-color' style='background-color:".$variation_color."'>".$variation_color."</div>";
    }
    echo "</div>";
} 

Review below screenshot