Book Image

WooCommerce Cookbook

By : Patrick Rauland
Book Image

WooCommerce Cookbook

By: Patrick Rauland

Overview of this book

Table of Contents (17 chapters)
WooCommerce Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Writing CSS to customize the Add to Cart button


You can do quite a bit with customizing templates and using hooks, but neither of those actually focuses on how things look. If you want to change the way something looks, such as the size, color, text family, border color, and so on, then you'll have to use Cascading Style Sheets (CSS) to do that.

WooCommerce already has basic styles for everything included in the plugin, so you don't have to write anything. But if you want to change something, then you'll have to write some styles to override the default styles.

Getting ready

You should have a simple product in your store.

How to do it…

If you take a look at a simple product on the frontend of your store, the Add to Cart button that comes with it looks pretty simple, as shown in the following screenshot:

There are actually dozens of styles applied to the button, some of which are applied to all buttons and some just to the button on the product page. In the following steps, we're going to start...