Product Page: Customizing the variant button

Hi y'all,

My client prefer the variant button (instead of the dropdown) for her product page template. Unfortunately, the buttons appear weirdly. They seem nonexistent and when you hover them, they changed in green and when you select them, it's another appearance.

Is it possible to customize the buttons so they appear with a white background, green text and contour at first and when you hover them, they turn green and the text white -- the same look when you choose your option (the other button should be white with green text and contour).

Any idea? I looked online, with the inspector and couldn't figure it out. Thank you!!! 🙂 

https://snail-ray-daxz.squarespace.com/
pass:freelance

The variant buttons use the color settings for the Secondary Button. If you open the site styles panel, you should be able to choose the colors there, although the settings will also affect other 'secondary' buttons (see this Circle thread).

I have requested a separate style/color option for Variant Radio Buttons. As a Circle member, feel free to add your voice to that request if you'd like a separate setting for these buttons 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️

On 11/30/2023 at 5:35 AM, paul2009 said:

The variant buttons use the color settings for the Secondary Button. If you open the site styles panel, you should be able to choose the colors there, although the settings will also affect other 'secondary' buttons (see this Circle thread).

I have requested a separate style/color option for Variant Radio Buttons. As a Circle member, feel free to add your voice to that request if you'd like a separate setting for these buttons 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi @paul2009!

My secondary button have a green border and text and the background is transparent. Exactly as I would like it to be. That is why I don't understand the problem here...

Can you help me furthermore?

1 hour ago, paul2009 said:

Sure. Your secondary buttons are set as white text on a green background. However, variant buttons use the Secondary Button Text Color for the button text and the button border, with a transparent background when not selected and not hovered. This gives you the white variant buttons with white text on a white background.

As a workaround you could change the color settings secondary buttons (green text with a green border) or use some Custom CSS to override the settings. For example, this will set the text and border to the background color (green):

/************************************** 
Style Variant Buttons when secondary
buttons use light text on a dark 
background. CSS fix by SF Digital
**************************************/
.ProductItem-details .variant-radiobtn-wrapper label {
    color: var(--secondaryButtonBackgroundColor);
    border-color: var(--secondaryButtonBackgroundColor);
}
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label {
    color: var(--secondaryButtonTextColor);
    background-color: var(--secondaryButtonBackgroundColor);
}

Does this help to explain?

Did this help? Please give feedback by clicking an icon below  ⬇️

Wow! Awesome! Thanks a lot @paul2009 🙂