How to change the size and color of “add to cart” button?

Hi @neal86!

This can be fixed with some custom CSS. Under Appearance > Customize > Additional CSS, you can add the following code:

/* Change width and color of Add to Cart button on mobile */
@media (max-width: 575px) {
.single-product .single_add_to_cart_button {
background: blue !important;
width: 50%;
}
}

This is the result:

Link to image: https://snipboard.io/U18BFZ.jpg

Change the background color and width percentage values to your liking.

If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools.com. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Thanks.

Hi, I add the code you provide, but it doesn’t work on my end (https://prnt.sc/1wvuerf)
can you please help check?

Hey @neal86!

Thanks for getting back.

The code only works for mobile screen sizes up to 575px since you mentioned the button is small on mobiles. To make it work on all screen sizes you’d want to remove @media (max-width: 575px) so it will be something like this:

.single-product .single_add_to_cart_button {
background: blue !important;
width: 50%;
}

Cheers.

GOt it, thank you, if I want to change the color for both devices, but only change the size for mobile, the code will be

.single-product .single_add_to_cart_button {
background: blue !important;
@media (max-width: 575px) {
width: 50%;
}
}

Is that right? no ,the size didn’t work for both

Hi, may I know how I can change the color of the buttom for both devices, but only change the size for mobile?

Hey @neal86!

This CSS should work for you:

@media (max-width: 575px) {
.single-product .single_add_to_cart_button {
width: 50%;
}
}
.single-product .single_add_to_cart_button {
background: blue !important;
}