Add Color Box around Variable Size Options on Product Page

Hello,

(1) On our product page, we would like to add a box around the variable size options. See example via attachment. Notice the selected size is colored in and the non-selected size is greyed out.

(2) Lastly, when you select a variable an (x clear) option appears the right of variable so that you can unselect the variable. How can we hide/remove this?

I appreciate your help. Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Add the code to the Theme Settings > Custom CSS > Global:

body .single-product-content .variations .swatches-select>div:hover {
    border: 2px solid red;
	  padding:3px;
}
body .single-product-content .variations .swatches-select>div {
     border: 2px solid blue;
		  padding:3px;
}

Change the color as per your needs.

Best Regards

Thanks

The two css codes that you provided allow me to edit the boxes when on hover, and when not-selected.

(1) However, I need a code so that I can change the color WHEN SELECTED – currently it defaults to black when selected and I want to change it to #0a3d4f

(2) I also need a css code that get’s rid of the (x clear) script that pops up when you select an option.

I appreciate your help.

Thanks

Hello,

Add this code:

body .single-product-content .variations .swatches-select .active-swatch {
     border: 2px solid green;
		  padding:3px;
}
body .reset_variations{
display:none;
}

Best Regards

Thanks, your code fix the box issue, but did not fix the (x Clear) section

See attached photo.

I want this to not show up at all. Let me know and thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Try this code:

.reset_variations{
display:none!important;
}

Best Regards

It worked. Thank you.

Please close this ticket.

[Author]

Posts