Change the color and size of Add to Cart button

There are a few styles you can apply to change the appearance of your Add to Cart button. Here is some sample code for the various elements:



After with hover:

Breakdown of elements:

Code to use:

/* -- code to change add to cart button color and size -- */

.add-to-cart__wrapper .btn--clear {   
/* following is background color and border color */  
  background-color: #7e51fb;
  border: 1px solid #7e51fb;
/* following is text color */  
  color: #ffffff; 
/* following is text/font size */  
/* following increases the size of the button top/bottom padding */  
  padding-bottom: 20px;
/* following adds rounded corners */  

/* following is the hover state colors */  

.add-to-cart__wrapper .btn--clear:hover { 
     background-color: #333333; 
     border-color: #333333; 
     color: #ffffff;

/* following is disabled state color */
.add-to-cart__wrapper .disabled {
    background-color: rgba(0,0,0,0.3);
    border:1px solid rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.3);

/* - end - */

  • Each element value change be changed. 
  • You can keep the comments in the code - Must start with /* and end with */ 
  • Use any web safe hex color code to customize the colors in the code:
  • For the other elements, you can use a pixel value like 25px, 15px or any size you like. 
  • The font-size is using a scalable value of 1.25em; - You can adjust that to 1.2em, 1.1em, 1.3em, 1.5em etc.
  • Disabled state uses transparency, learn more about rgba:

Example when border-radius is changed to 40px;

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us