Changing buttons in your Ecwid store

Last updated

Changing the color or font of the buttons in your Ecwid store requires changes to the CSS codes.

Before you get started, familiarize yourself with how to add the CSS codes to your store theme.

In this article:

  1. Larger buttons (Add to Bag, Continue, Checkout, Place Order)
  2. Smaller buttons (Add More, Go to Checkout, Continue Shopping on cart page, Clear Bag)
  3. Buy Now buttons

Larger buttons

The large buttons in your store include Add to Bag, Continue Shopping on product page, Continue, Checkout, Place Order. You can change all these buttons with one code or alter them separately. 

Use the following CSS code to update all the larger buttons at once. Feel free to change "red" and "black" in the examples to any colors you like.


/*Button color*/
.ec-size .ec-store .form-control--primary .form-control__button {
background-color: red;
}
/*Button color on hover*/ .ec-size .ec-store .form-control--primary .form-control__button:hover { background: red; } /*Text color*/ .ec-size .ec-store .form-control--primary .form-control__button { color: black; } /*Text color on hover*/ .ec-size .ec-store .form-control--primary .form-control__button:hover { color: black; }

To change individual buttons:

Add to Bag


/*Button color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
background: red;
}
/*Button color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
background: red;
}
/*Text color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
color: black;
}
/*Text color oh nover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
color: black;
}

Checkout


/*Button color*/
.ec-size .ec-store .ec-cart__button  {
background: red;
}
/*Button color on hover*/
.ec-size .ec-store .ec-cart__button:hover {
background: red;
}
/*Text color*/
.ec-size .ec-store .ec-cart__button {
color: black;
}
/*Text color oh nover*/
.ec-size .ec-store .ec-cart__button:hover {
color: black;
}

Continue


/*Button color*/
button.ecwid-btn--primary.ecwid-btn--continue {
background: red;
}
/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
background: red;
}
/*Text color*/
button.ecwid-btn--primary.ecwid-btn--continue {
color: black;
}
/*Text color oh nover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
color: black;
}

Place Order


/*Button color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
background: red;
}
/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
background: red;
}
/*Text color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
color: black;
}
/*Text color oh nover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
color: black;
}

Smaller buttons

You can also change the smaller buttons, the secondary ones: Add More, Go to Checkout, Continue Shopping on cart page, Clear Bag.

Here are the codes for changing all these buttons at a time:


/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: red;
}
/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: red;
}
/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: black;
}
/*Text color oh nover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: black;
}

To change individual buttons:

Add More


/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: red;
}
/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: red;
}
/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: black;
}
/*Text color oh nover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: black;
}

Go to Checkout


/*Button color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
background: red;
}
/*Button color on hover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
background: red;
}
/*Text color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
color: black;
}
/*Text color oh nover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
color: black;
}

Continue Shopping on cart page


/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
background: red;
}
/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
background: red;
}
/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
color: black;
}
/*Text color oh nover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
color: black;
}

Clear Bag


/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
background: red;
}
/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
background: red;
}
/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
color: black;
}
/*Text color oh nover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
color: black;
}

Buy Now buttons

You can change the Buy Now buttons in your Ecwid store. These buttons are displayed on category pages.


/*Button color*/
.ec-size .ec-store .form-control--small .form-control__button {
background: red;
}
/*Text color*/
.ec-size .ec-store .form-control--small .form-control__button {
color: white;
}
You can enable these buttons for your store in your Ecwid Control Panel→ Settings → General → Cart & Checkout by switching the toggle for Show "Buy now" buttons on products list pages.

Related articles

Adding CSS codes to your store
Professional services from Ecwid
Themes for sitebuilders

Back to top
Has the article answered your question?

Awesome! Thanks for your feedback!

Please send us that question. We will be happy to help by email.

Send a message