Remove dropdown in product options

How to make the product options like this ~ https://prnt.sc/wa0QdcOLdBku

Instead of dropdown?

Would it be possible in quick add to cart hover as well?

Hello,

Please read the following article for help:
https://xtemos.com/docs-topic/variable-products-and-swatches/

Best Regards

Hi checked it but there’s no part telling me how to change the dropdown to the above attached image for the Size Attribute.

Here’s what it looks like now: https://prnt.sc/ceXf1bzwE2PW

Hello,

Please read our detailed documentation for help:
https://xtemos.com/docs-topic/variable-products-and-swatches/

The above documentation explains how you can enable the Swatch for attribute instead of dropdowns.

Otherwise provide the admin panel login details of the website. I will enable the option for you.

Best Regards

Okay, it’s working now.

How do you change the size attribute design to make it have border and background color?

https://prnt.sc/1z64StveeeSD

on top of my question above, how do you remove the text product attributes for sizes in the home page and mobile as shown in the image below.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.wd-swatch.swatch-on-single {
    height: 40px;
    width: 40px;
    border: 1px solid;
    border-radius: 0;
}

Best Regards

It shows like this. How do you remove the space below the labels?

Hello,

Please provide the URL of the product to check it myself and help you out accordingly.

Best Regards

I’ve added the above code but I removed it now. Anyhow, this is the site.

Hello,

Please try adding the following Custom CSS for that.

.wd-swatch.swatch-on-single {
    height: 40px;
    border: 1px solid;
    border-radius: 0;
    padding: 10px;
}

Best Regards

[Author]

Posts