Button Text color not customizable

  • Im trying to change the color of the button in the Sydney theme homepage:

    Appearance>Customize>General>Buttons>Default state

    I can change the color of the background and border, and I can change everything in Hover state, but the color of the text in default state does not change, apparently is override for other customizing, because it looks like its changed, but when I publish the customizing, the color is defaulted to white regardless the color I select in the customizing.

    Where can this text color be customized in a custom CSS or editing a theme file?? where can I look to see where is this text color set?? Any ideas?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @davo74,

    I am sorry, I can’t reproduce your issue while testing the button colors setting with latest version of Sydney.

    Perhaps you are using the older version?

    I feel your button may be a little special and may not be linked to the colors setting.

    If you could have used this field in your query, maybe I could have been able to provide the possible solution.

    Hello, @davo74 I also faced the same issue, once after I customized the button design and published it, again it went to the default setting. Customize>General>Buttons>Default states

    The following code helped me to sort out the issue

    .button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    background-color: #031C85 !important;
    color: #ffffff !important;
    }

    feel free to edit the colour as you wish and add the correct button class, in my case my button class is button.product_type_simple.add_to_cart_button.ajax_add_to_cart
    paste the code in additional css

    • This reply was modified 1 year, 3 months ago by niroshan12.
    • This reply was modified 1 year, 3 months ago by niroshan12.


    To find the class of your button, you’ll need to inspect the HTML code of your website. Here’s a general guide:

    1. Open your website in a web browser.
    2. Right-click on the button you want to inspect.
    3. Select “Inspect” or “Inspect Element” from the context menu. This will open the browser’s Developer Tools.
    4. In the Developer Tools, you’ll see the HTML code for the button highlighted. Look for the class attribute within the HTML code.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Button Text color not customizable’ is closed to new replies.

Tags