In this post we’re going to explore how to style the WooCommerce add to cart button. This may seem complex when getting started but it’s relatively easy and lets you add that extra level of customisation to your WordPress and WooCommerce stores.
.woocommerce button.button, .woocommerce-page button.button, .woocommerce-page input[type=submit]
The above code features the selectors to target the overall button and the text within it. So to set the background to orange using the above code it would look like this:
.woocommerce button.button, .woocommerce-page button.button, .woocommerce-page input[type=submit] {
Background-color: orange;
}
As this applies to the overall button and the text we’ve included a few other examples below of options to style it further:
Font Size:
.woocommerce button.button, .woocommerce-page button.button, .woocommerce-page input[type=submit] {
Font-size: 18px;
}Padding:
.woocommerce button.button, .woocommerce-page button.button, .woocommerce-page input[type=submit] {
padding: 1% 7% 1% 7%;
}Border:
.woocommerce button.button, .woocommerce-page button.button, .woocommerce-page input[type=submit] {
Border: 4px solid black;
}Rounded Borders:
.woocommerce button.button, .woocommerce-page button.button, .woocommerce-page input[type=submit]
{
Border-radius: 50px;
}You can apply a huge range of different styles to get your button looking just right if you’re not sure of the best ways to add CSS directly to your WordPress website take a look at our post on it here.
The next thing to look at is how the button acts when it’s hovered over, this is the standard user interaction before the button is clicked and in most cases your default theme will apply so sort of style such as a colour change on hover.
If you’d like to custom style this we just use the same code as above but with hover added to the selectors so that would look like this:
woocommerce input#place_order:hover, .woocommerce-page input[type="submit"]:hover, .woocommerce .button:hover {
Font-size: 24px;
}The above code will set the font size within the button to 24px when the button is hovered over.
We’ve featured a few other styling examples on hover below:
Border Color:
woocommerce input#place_order:hover, .woocommerce-page input[type="submit"]:hover, .woocommerce .button:hover {
Border: 4px solid orange;
}Background Color:
woocommerce input#place_order:hover, .woocommerce-page input[type="submit"]:hover, .woocommerce .button:hover {
Background-color: Green;
}Opacity:
woocommerce input#place_order:hover, .woocommerce-page input[type="submit"]:hover, .woocommerce .button:hover {
Opacity: 0.5
}
Again you can use all of the general styling elements that you would normally with this so you can style loads more things such as the font-family, font-weight, box-shadow, color, text transform and so much more!
Further Reading:
The 3 Types of CSS Explained
Setting Fonts Directly with CSS
Summary:
We hope this gives you an idea of how to style WooCommerce add to cart buttons this is just a quick tutorial and there are more in-depth elements that can be integrated such as animations, key frames, jQuery functions, and so much more to style the button in an enormous number of ways.
If you found this post helpful we’d appreciate a comment or a share, thanks!
