(Squarespace) Change Variant Dropdown to Button Format

[tuanphan]

To change Variant Dropdown, like this.

to Button format on a specific product, like this.

#1. First, you need to find Product ID.

In my example, it is: #item-6797e7cd51efce572cc496f9

#2. Next, use this code to Custom CSS
If code doesn’t work, you can comment below, message or email me.

#item-6797e7cd51efce572cc496f9 {
     .variant-select-wrapper {
       display: none !important;
   }
   .variant-radiobtn-wrapper {
       display: block !important;
   }}

#3. If you want to make Size Variant to button format, and keep other Variants to Dropdown format, we will use this new code.

#item-6797e7cd51efce572cc496f9 {
     div.variant-select-wrapper:has([data-variant-option-name="Size"]) {
       display: none !important;
   }
   .variant-radiobtn-wrapper[data-variant-option-name="Size"] {
       display: block !important;
   }}

Result