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.
The topic ‘Add Color Box around Variable Size Options on Product Page’ is closed to new replies.
.
