fbpx
Enjoy Year-End Sale: 50% Off All Plugins! Coupon Code: NewYear2025

hidden swatches on shop page (appear on hover)

Tatjana Apukhtina

Hi! I bought your plugin as I was hoping that it would be able to do a similar job to this page: https://baltzar.com/en-gb/collections/new-arrivals?filter.p.product_type=Casual+Shirts&sort_by=manual

Here is my website and it currently looks like this with your plugin installed: https://teapro.co.uk/shop/
We’re a premium tea brand and it looks way too cluttered for me.

I would really prefer it if the variation swatches would be hidden and would only appear when I hover over the product (especially on desktop).
Is that possible?

I look forward to hearing from you!

Best,
Tatjana

Hakik Zaman

Hi Tatjana,

Thanks for reaching out to us. The question is not related to Swatches Support.

It depends on how you want them to display and your CSS skills.

You can try the following CSS at Appearance > Customize > Additional CSS

li.wvs-archive-product-wrapper .wvs-archive-variations-wrapper {
display: none;
}
li.wvs-archive-product-wrapper:hover .wvs-archive-variations-wrapper {
display: block;
}

It is just an example. You can make it more appealing based on your CSS knowledge.

I hope the example will help.

Thank You

Tatjana Apukhtina

Hi Hakik,
Happy New Year!
Thank you so much for your help. I really appreciate it.
The CSS you gave me is perfect – I was just wondering – is there a way to make it only affect Desktop? I would prefer to leave it as it is on mobile (since you can’t really hover on mobile).

Annoyingly, I’m really bad at at writing my own CSS code, so I was wondering if you could help me make a few adjustments? That would be so so helpful! I promise to leave you guys a positive review in exchange 🙂

On the shop overview page (https://teapro.co.uk/shop/) is it possible to remove the word “Clear” and also reduce the space between the price and the variation swatches?

On the individual product page, would it be possible to do the same?

 

Lastly, for our teaware, I want to use image swatches, but for tea, I want to keep text like you see here… but there are no separate settings… is it possible to adjust that?

 

Thank you so much for your help!
I really appreciate it 🙂

Tatjana Apukhtina

Hmm I don’t think the images went through…
Let me re-send it again with links to snipboard:

“On the shop overview page (https://teapro.co.uk/shop/) is it possible to remove the word “Clear” and also reduce the space between the price and the variation swatches?
https://snipboard.io/COWyZ6.jpg

On the individual product page, would it be possible to do the same?

https://snipboard.io/TZ8g9O.jpg

Lastly, for our teaware, I want to use image swatches, but for tea, I want to keep text like you see here… but there are no separate settings… is it possible to adjust that?

https://snipboard.io/9wS0Y4.jpg

Thank you so much for your help!
I really appreciate it 🙂

Hakik Zaman

Hi Tatjana,

I was just wondering – is there a way to make it only affect Desktop? I would prefer to leave it as it is on mobile (since you can’t really hover on mobile).

I have modified the CSS and added it at Appearance > Customize > Additional CSS

@media screen and (min-width: 1200px){
li.wvs-archive-product-wrapper .wvs-archive-variations-wrapper {
display: none;
}
li.wvs-archive-product-wrapper:hover .wvs-archive-variations-wrapper {
display: block;
}
}

Now the hover will be available for Desktop only.

is it possible to remove the word “Clear”

I have disabled this option from the plugin settings to remove the “Clear” button from the shop/archive page. Displaying the “Clear” button on the single product page is a default behavior of WooCommerce So, I have added the following snippet inside your child theme’s functions.php file:

add_action( 'woocommerce_reset_variations_link' , function(){
return false;
}, 15 );

reduce the space between the price and the variation swatches

Added also the following CSS to reduce spaces on both the single product page and shop/archive page:

.woocommerce ul.products li.product .price {
margin-bottom: 0;
}
.woocommerce div.product .summary table.variations {
margin-bottom: 0;
}

Lastly, for our teaware, I want to use image swatches, but for tea, I want to keep text like you see here… but there are no separate settings… is it possible to adjust that?

You can check this tutorial: https://youtu.be/xeT7byUaa7U

Hope to hear from you soon.

Thank You