All Collections
The Webydo Store.
Changing buttons in your Webydo Store
Changing buttons in your Webydo Store

Changing the color or font of the buttons in your Webydo Store requires changes to the CSS codes.

Webydo Support avatar
Written by Webydo Support
Updated over a week ago

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

In this article you will learn the CSS code needed to update Larger buttons (Add to Bag, Continue, Checkout, Place Order); Smaller buttons (Add More, Go to Checkout, Continue Shopping on cart page, Clear Bag); and 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;
}
Copy

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;
}

Copy

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;
}
Copy

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;
}
Copy

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;
}
Copy

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;
}
Copy

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;
}
Copy

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;
}
Copy

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;
}
Copy

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;
}
Copy

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;
}
Did this answer your question?