Changing the colour of the Add to Cart button on Debut theme?

SunilG
Tourist
42 0 3

Hi everyone! Sorry for asking a lot of questions today! 

I'm hoping someone could advise me on how to change the colour of my add to cart button on my product pages? I'm using the debut theme.

Thanks a lot!

Sunil

Replies 9 (9)
John_Orozco
Excursionist
38 0 10

Hi SunilG,

Go to your Theme editor and edit your 'theme.scss" file. Find this block of code:

.product-form__cart-submit {
    display: block;
    width: 100%;
    line-height: 1.4;
    padding-left: 5px;
    padding-right: 5px;
    white-space: normal;
}

Add "background-color: #000;" 

Change "#000" to your desired color.

SunilG
Tourist
42 0 3

Thank you very much! :) It worked well!

Would you happen to know a way I could change the size of the text inside the add to cart button?

Thanks again,

Sunil

John_Orozco
Excursionist
38 0 10

Yes, by adding the code below inside .product-form__cart-submit:

font-size: 16px;

Feel free to change the 16px to whatever size fits your needs

shefsam1
Excursionist
21 0 2

And what if one wants to change the font color for that button alone?

WaterBottleShop.Online
https://waterbottleshop.online
Gabrycom
New Member
1 0 0
Hi, if I want to change ONLY the Add to Cart button color what I have to do? Because putting “background color...” it also change the shop now button, but I ONLY want to change the Add to cart button. Thanks
Unicorn
New Member
2 0 0

on theme.scss search for

".btn--secondary-accent {
background-color: $color-body;
color: $color-btn-primary;
border-color: $color-btn-primary;"

and in background-color change $color-body with the code of the color you prefer.

Apricus
New Member
1 0 0

It doesn't work on debut theme.  Both "add to cart" and "buy it now" change to the same colour. Is there a way to change the buy it now colour only? Thanks

EV333
New Member
1 0 1

Hi folks, I know I'm reviving a dead horse but I too was stuck on this until found the answer from "Unicorn".

Found the said code, modified it and voila, a new "Add-To-Cart" button colour.

I'm using the "Debut" theme and located the abovementioned code on line 1956-1965. Your's could be sitting on a different line but essentially find the code as mentioned and edit.

My button is now the same Blue as the rest of the button on my site.
I went a step further and edited the code so it displays a different colour on mouse hover.

My code now looks like this;

----------------------------------------------------------
.btn--secondary-accent {

background-color: #197bbd;              <---------Button background colour
color: #ffffff;                                       <---------Button text colour
border-color: $color-btn-primary;

&:not([disabled]):hover,
&:focus {
background-color: #bd1929;              <---------Button background colour (with mouse hovering over button)
color: #ffffff;                                       <---------Button text colour (same as earlier, text remains white)
border-color: $color-btn-primary-focus;
}
}
------------------------------------------------------

 

I notice that a lot of people out there are stuck searching for ways to change the colour of the Add To Cart button and to be honest, I'm surprised it hasn't lead to a coding change in the theme colour set up screen instead of going off searching for a particular piece of code to alter. There seems to be a colour change option for just about any other element except for this.

Anyway, I'll let the dead horse stay dead and carry on with doing what I was doing.
Best of luck folks.


Vic

MelissaAdolph
Tourist
6 1 0

11.2.21

It's under theme.css. Search product-form__cart-submit and it will take you to it.

HTH!