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.
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 by writing some styles that affect all WooCommerce buttons:
- In your code editor, open your theme's
style.cssfile. - At the bottom of the file, add the following code:
woocommerce button.button, .woocommerce input.button { font-size: 1.2em; }This code will increase the font size of all WooCommerce buttons. WooCommerce buttons are styled in such a way that, as the font inside the box grows, the box itself will grow. Therefore, you just need to increase the font size and the button will grow. Now we want to style just the button on the product page.
- Add the following code beneath the code we saw earlier:
.woocommerce button.single_add_to_cart_button { text-shadow: 1px 1px 1px #333; } - Save and upload the file.
You'll be able to see the larger button with a text shadow on the single product page, as shown in the following screenshot:
CSS is one of my favorite tools. It's basically a pattern-matching system. If the elements on the page match the pattern, then the styles get applied to that HTML element. You can write really specific styles that apply to only one element on one page or something that gets applied to every page.
In this case, we're using one of the most useful properties of CSS—overriding styles. You don't need to override everything, just the one or two styles you want to change. You can change the background color of the button without affecting anything else, which is really powerful.
This is just the tip of the iceberg when it comes to writing and styling WooCommerce. If you want to write more CSS, then I recommend the free tutorials at http://www.w3schools.com/.
If you plan on customizing every aspect of the styles, then you could also remove the default stylesheet and write yours from scratch. Look into the wp_dequeue_style function, which is documented at http://codex.wordpress.org/Function_Reference/wp_dequeue_style.