fbpx
Want To Add Extra Images Per Product Variation? Download This Free Plugin

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

Tatjana Apukhtina

Thanks a lot Hakik, that’s very helpful!

I really like all the changes – there are just 2 small issues that I’ve found.

I like the design of the teapro.co.uk/shop overview page – however on mobile, the functionality is now BROKEN.
Usually, when a size is selected – the button should be “add to cart” and I should be able to add it to cart.
However, at the moment, it stays as “select options” and you can’t add anything to cart – even if you selected the size:
https://snipboard.io/Z5Po27.jpg

Could you please help me fix it? I’m pretty sure it was working fine before.

Another issue that worries me – when I choose image attributes (like here: https://teapro.co.uk/product/infuserglass/) there is a warning, that says the website in NOT SECURE.
This doesn’t happen on product pages, where variation swatches are TEXT based (e.g. https://teapro.co.uk/product/iron-goddess-of-mercy-oolong/)
(We have a valid certificate, so the website should be secure)

Here is the screenshot of what I mean:
https://snipboard.io/qzAucw.jpg

Why do you think this happens and how can we fix it?

Best,
Tatjana

Hakik Zaman

Hi Tatjana,

I like the design of the teapro.co.uk/shop overview page – however on mobile, the functionality is now BROKEN.

Unfortunately, it is not happening from my side- https://paste.pics/290e389258130b4afd1c69ac8882af60

It could be a caching issue, please try to clear your caches like- browser cache, caching plugin cache, and server-side cache.

Another issue that worries me – when I choose image attributes (like here: https://teapro.co.uk/product/infuserglass/) there is a warning, that says the website in NOT SECURE.

I couldn’t replicate your reported issue. Everything seems fine from my side- https://paste.pics/51becd3a99169b97a175023748b6191b

Hope to hear from you soon.

Thank You

Tatjana Apukhtina

Hi Hakik,

thank you for looking into this.

You’re right – the issue was with the cache. I think because I usually put all my customisation code into a different area and you uploaded it to Appearance – Customise, it was messing with the cache. (you couldn’t re-create this issue because you were logged in – the problem was only happening if you’re logged out)
Anyways, I have moved your code to a different CSS area now and it’s working fine.
I’ve also managed to solve the https issue – the problem was being caused by a video file and had nothing to do with your plugin.

Can you please help me with one last piece of CSS?

I’d like to tweak the styling of the variation title: https://snipboard.io/BRvQzZ.jpg
(so in this case BUNDLE)

I’d like it to be:
color: #403f3f;
font-size: 14px;
font-weight: 600;

So it should hopefully look like this:
https://snipboard.io/bTInZG.jpg

Please send me the CSS code, so I can insert it 🙂
Thank you so much for your help!

Best,
Tatjana

PS: I’m really happy with your support. I will leave a nice review for you guys and I will buy this plugin for another website that I’m running 🙂

Hakik Zaman

Hi Tatjana,

Please add the following CSS:

.woocommerce table td label {
color: #403f3f;
font-size: 14px;
font-weight: 600;
}

Also, let me know if it helps. Hope to hear from you soon.

Thank You