fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Selected attribute product not display

Deepak Sharma

We have a woocommerce website built using Corocoblock.

On site we have variable products available in multiple colors. Color & Material Filters are available on right side of our shop page.

You can see it at https://beta.leisuremod.com/product/

At present, when we select the “Color” Filter then page shows all the products that have selected color variation in it.

Its working fine.

Here we want that when the user selects color from the filter then a particular color variation of the product should show by default.

For Example: If I user selects RED color in the filter then the page should show red variation default selected on the shop page.

A similar working model can see here https://demos.xforwoocommerce.com/product-category/variable/

I hope our requirement is clear to you.

Please advise the procedure to implement it.

Hakik Zaman

Hi Deepak,

Unfortunately, the feature is not currently available. Our swatch just adds color/button etc. to the widget where variables are displayed.

​But it’s a great idea. I’ve added it as a feature request. I’ll discuss this feature with my team and make it available with the coming version.

In the meantime, please send the feature request here: https://storepress.fider.io/
and ask your other to upvote it.

Cheers!

Deepak Sharma

Hi Hakik

I understand point there.
I would appreciate if you can help me on another point
Look at our product listing page http://beta.leisuremod.com/product
Color swatches are visible under the product. At present when we click the color swatch it changes the image of the product.
Here can you make a minor adjustment and make it to change the image on the hover of the color swatch? Please advice.

Hakik Zaman

Hello Deepak,

Could you please check this tutorial?

From Swatches > Special Attributes > Catalog Mode Display Event you can set on hover.

Please let me know if you wanted something like this.

Thanks

Deepak Sharma

Thank you. It worked.
I appreciate your guidance.

Regarding my original query. I found the way but need some help in setup.
Whenever we select the color from the filter. It passes the argument such as filter_color=red.
See example URL https://beta.leisuremod.com/product-category/chairs/?filter_color=red
With this argument, the page refreshes and show all the products that have RED color variations but don’t select the specific variation.

However, we found that, in addition to filter_color=red if we pass another variable which is attribute_pa_color=red. Then page shows all the products that have RED color variations and also selects the specific variation. Like you can try on following url
https://3d6fe0dd6d.nxcli.net/product-category/chairs/?filter_color=red&attribute_pa_color=red

This means, passing an additional query string variables solves our purpose attribute_pa_color=red.

Now, I need your help.
Can you advice me how can we pass this additional query string variable or set something in code that whenever querystring filter_color=red is received. It should also consider attribute_pa_color=red.

Your help will be hight appriceated.
If needed, I can pay for the customization you do

 

Hakik Zaman

Hello Deepak,

The filtering feature is controlled by WooCommerce itself. Our swatch just adds colors/buttons/labels to the widgets.

You can contact the WooCommerce forum on this matter.

If needed, I can pay for the customization you do

Unfortunately, right now, we are not taking any custom requests.

From my side, I can help with the below code. Please put the below snippet inside your functions.php. It is not a good solution but works partially 🙂

function woo_custom_param_redirect(){
   if( is_shop() ){
?>
      <script>
         var url_string = window.location.href; //window.location.href
         var url = new URL(url_string);
         var c = url.searchParams.get("filter_color");
         var b = url.searchParams.has("attribute_pa_color");

         let params = url;
         if(typeof(c) != "undefined" && c !== null && b === false){
            var url_go = url_string+"&attribute_pa_color="+c;
            window.location.href = url_go;
         }
</script>

<?php
   }
}
add_action('template_redirect', 'woo_custom_param_redirect');

Thanks