Cyber Monday & Friday 40% Deals Return Coupon code: Friday2025

Color variations not showing, although they are working,

Mar Valles

Color variations are not showing on the page, but they are there, as I can click on it (blindly).

This is the page where I’m having the problem: https://www.nidittopiu.com/producto/bolsa-totebag_guacamayos-y-tucanes/

Captura de pantalla 2024-01-30 123352.png

 

The swathes are at the red circled area.

Thanks.

Hakik Zaman

Hi Mar,

Thanks for getting back to us. You are using BeTheme and they have built-in swatches support inside their theme.

You can’t use two different swatches feature on the same site. So, either you have to disable our or the built-in swatches feature from the theme settings.

Thank You

Mar Valles

Thanks a ton, I didn’t notice I was using the BeTheme ones… I’ve already disabled it and now it works perfectly.

It happens another problem though. I was using this code:

.woocommerce .mfn-variations-wrapper .mfn-vr ul.mfn-vr-options {
display: block;
}

So I can see the variations one on the top of another in this product: https://www.nidittopiu.com/producto/bienestar-enriquecimiento/

And now I see them one next to the other.

Do you know how can I change the code, so I see the variations of this particular product one on the top of the other again?

Thanks a million, you’re the best and super fast!

Hakik Zaman

Hi Mar,

Thanks for the clarification.

Please add the following CSS:

.woo-variation-swatches ul.variable-items-wrapper {
display: block;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):last-child {
margin-right: 4px;
}

I hope this will help you to achieve the layout you described in your screenshot.

We get excited & honored when you use our plugin on your site.

If you found my support helpful, could you please leave your valuable review here: https://wordpress.org/support/plugin/woo-variation-swatches/reviews/?filter=5

Your rating keeps us inspired.

Thank You

Mar Valles

Thanks, this is working fine.

But it is also affecting to the first product we were talking about. Is there a way to apply it just on the second one?

Thanks.

Hakik Zaman

Hi Mar,

But it is also affecting to the first product we were talking about. Is there a way to apply it just on the second one?

Can you please give me a screenshot to understand it clearly?

Thank

Mar Valles

Hi, thanks for reaching out.

You can see it here: https://drive.google.com/file/d/1EMuEQB4oZIMK7xAdmJ50SGKl49FLJ2Ke/view?usp=sharing

I also attach the link of product: https://www.nidittopiu.com/producto/bolsa-de-tela-guacamayos-y-tucanes/

For this product I prefer the variables showing one next to the other.

 

But keeping the variations here ( https://www.nidittopiu.com/producto/bienestar-enriquecimiento/ ) one on top of the other (image: https://drive.google.com/file/d/1oKel7XNhWuDdu7Qx1KASM9qv5Y5tMufl/view?usp=sharing)

 

Thanks.

 

 

 

Hakik Zaman

Hi Mar,

Please replace the previous CSS with the following:

.woo-variation-swatches.postid-7582 ul.variable-items-wrapper {
display: block;
}
.woo-variation-swatches.postid-7582 .variable-items-wrapper .variable-item:not(.radio-variable-item):last-child {
margin-right: 4px;
}

Hope to hear from you soon.

Thank You

Hakik Zaman

Hi Mar,

Thank you so much for your kind words.

Please feel free to open a new ticket if you face any issues regarding our plugins.

For now, I am changing the status of the ticket to Resolved.

Have a great day!

Thank You