Return to previous page

Change Background Color of Package Swatches on Single Product Page

This topic has 4 replies, 2 voices, and was last updated 5 days, 3 hours ago ago by Alex Carter

khurram virk

Participant

June 26, 2025 at 11:12

Dear Sir,

Good day to you!

On the following product page of my website:
🔗 https://skysolmedia.com/product/wordpress-development/

I want to change the background color of the package swatches (Bronze, Silver, Gold), but I could not find any setting in the XStore Theme Options or in the Single Product settings.

Could you please guide me on how to customize the background color of these variation swatches?

#448160 Copied

3 Answers
Alex Carter

Support staff

June 26, 2025 at 12:06
Hello,

Thank you for reaching out to us.

We appreciate your detailed inquiry. To customize the background color of the variation swatches (Bronze, Silver, Gold) on your product page, you can achieve this by adding custom CSS.
For example:

.single-product .st-custom-attribute[data-name="Bronze"] { background-color: red !important; border-radius:10px; } .single-product .st-custom-attribute[data-name="Silver"] { background-color:Silver !important; border-radius:10px; } .single-product .st-custom-attribute[data-name="Gold"] { background-color:Gold !important; border-radius:10px; }

Warm Regards,
The 8Theme Team
#448169 Copied
khurram virk

Participant

July 1, 2025 at 10:52

Dear Sir,

Thank you for your response.

Actually, there are three swatches (Bronze, Silver, Gold), but I don’t want to set each swatch to a different color.

I would like the active (selected) swatch to have a blue background color and white text color, regardless of which option is selected.

Could you please share the CSS code to achieve this?

Thank you!

#448582 Copied
Alex Carter

Support staff

July 1, 2025 at 12:08
Hello,

Thank you for your message and for providing the details.

Certainly, you can achieve the desired styling for the active swatch using custom CSS. Please find the code below:

.single-product li.type-label.subtype-square.selected { color: white; background-color: #0a3ddc; }

Best Regards,
8Theme’s Team
#448592 Copied
Viewing 4 results - 1 through 4 (of 4 total)