fbpx
🤝  NEW YEAR SALE RETURNS - 50% OFF all plans! 🤝 Grab it Now

Only show swatches on hover category page / archive / shop page

Jos Salfischberger

Hello,

I want to know if it’s possible to show swatches in category page / archive / shop page only on hover a product.

I made some css changes to archive that for now. But is it build-in with the plugin?

Thank you!

Golam Kibria

Hi Jos,

Unfortunately, there is no built-in option for this. I am glad that you were able to achieve this by yourself.

If you need any help from us, please let me know.

BTW, you are welcome to share the CSS code with us.

Thank You

Jos Salfischberger

Hi Golam,

I made it like this. It’s ok for now. But not super nice because it’s not very smooth when you hove an product.

 

/* hover variations */
ul.variable-items-wrapper.button-variable-wrapper.wvs-archive-variable-wrapper {
display: none;
}
@media only screen and (min-width:1025px) {
.elementor-element.elementor-products-grid ul.products li.product:hover ul.variable-items-wrapper.button-variable-wrapper.wvs-archive-variable-wrapper {
display: block!important;
}
.woo-variation-swatches.wvs-style-squared .variable-items-wrapper .variable-item.button-variable-item {
display: inline-flex;
}
}

 

Maby you can help me to tune a little bit?

 

Thanks!

Golam Kibria

Hi Jos,

Thanks a lot for sharing this. I am trying this on my local setup but it is not working because I have a different theme.

Themes control the layout and presentations of product pages and archive pages.

Thanks a lot

Jos Salfischberger

Hi Golam,

Strange. I think you must change the products selector.

Can you try ?

Thanks!

Jos

Golam Kibria

Hi Jos,

Will you please share your site link? I am using the Storefront theme and the code seems to have no effect.

Thank You

Jos Salfischberger

Hi Golam,

You can see the category page of the website here: https://zweerts.eu/product-categorie/heren/

If you hover a product you see the swatches. Not really nice but it’s working.

Can you take a look and let me know if we can make this option better 🙂

Thanks!

Jos

 

Golam Kibria

Hi Jos,

Thank you for sharing the link. It looks perfect for me.

I think you are not satisfied with the output. How would you like the output?

Under the style tab of Variation Swatches, there are some options to add styles to the swatches like background color, hover style, and more.

You may find them helpful. Please share your thoughts with me.

Thank You

Jos Salfischberger

Hello Golam,

What I really mean is that when you go over a product (hover over the product with mouse), the swatches appear a bit clumsy. It would be nicer if that got a kind of smooth effect instead of suddenly being rendered hard. Do you understand what I mean.

ALERT! However, we are now running into a bigger problem. The moment we show the Swatches on the category page it all becomes very slow. Filtering and pagination is very slow.

I understand that this is because the variations have to be loaded. And that takes time and server power. Is there anything that can be done about this? Do you get this question more often.

Thanks in advance and have a nice day.

Greeting,
Jos

Ahmed Ehsaan

Hi Jos,

I am the developer of this plugin, Could you add me here on Skype?

My Skype email address is: [email protected]

Please add me and say hi. I am waiting for you there to quickly squash your issue.

Thank

Ahmed Ehsaan

I am available, right now.