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

Customizing image variations

Christel Hoeks

Hello,

I’d like to use Variation Swatches in a slightly different way.

I simply like to showcase different colors the product is available in (bridesmaid dresses).
I don’t want to be able to select different options or have an add to cart, just have each product showcase the available colors with an image.

Is this possible? Because I feel like I am limited in being able to customize this within Elementor or the settings.
Please get back to me, I am the developer. Christel Hoeks purchased this plugin (my client)

Kind regards,

Thomas

Hakik Zaman

Hi Christel,

Thanks for reaching out to us. Could you please give your site link to check?

Hope to hear from you soon!

Thank you

Christel Hoeks

Hello, I will give you a more clear example of my explanation.

I’d like to create the following design:

 

I simply would like the product page to display the available colors without it being clickable. It is quite straightforward but I haven’t found a solution within your settings/Elementor. Is this something I can do with image variations?
If not, what would you recommend to me as an alternative?

This is currently the closest I’ve gotten:

https://teambride.be/product/regina-velvet/

 

I would appreciate if you could try it yourself, I will leave site access in the chatroom with Dhul.

 

 

Thank you in advance.

Hakik Zaman

Hi Christel,

Thanks for your explanation. Please try to add the below CSS at Appearance > Customize > Additional CSS

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
   pointer-events: none;
}

Then check your single product page and let me know if you wanted something like this or not.

Hope to hear from you soon!

Thank You

Christel Hoeks

Hello Hakik,

 

That’s a great help, thank you.

I’d like to center it, make the background transparent and also hover each color/image so it shows the name of the color. Could you show me/do this for me?

Thank you.

Hakik Zaman

Hi Christel,

Glad to know it partially helped.

To reposition it in the center-

.single.woocommerce .elementor-2748 .elementor-element.elementor-element-fc66d8c form.cart .variations {
   width: 100%;
}

.single.woo-variation-swatches .variable-items-wrapper {
   justify-content: center;
}

For Transparent Background-

.single table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
   background-color: transparent;
}

For showing the name on hover-

Unfortunately, because, swatches are not clickable anymore.

Thank You