How to Get Started With WooCommerce Theming

In this exclusive tutorial, taken from WooCommerce Explained, we’re going to show you some WooCommerce theming and styling basics. 

Changing Colors on WooCommerce Buttons

Here is our cart, and you can see that we have a big purple “Process to Checkout” button. Let’s show you how to change the color of that button.

There is a new plugin called WooCommerce Colors that allows you to change the buttons color and other elements of WooCommerce. This plugin integrates with the WordPress customizer. Let’s install this plugin and see how it looks.

• Once we have the WooCommerce Colors plugin installed, go to “Appearance” then “Customize”.
• There will now be two “WooCommerce” links in the Customizer menu. Click on the top “WooCommerce” link:

• Here you can change the “Primary Color” of your WooCommerce store. By default, it is set to a purple color: #a46497.

If you change the “Primary Color” to red, you will see that change automatically reflected on the screen. Notice also that the “Secondary Color” automatically changes so that we can still read the text in the button.

The “WooCommerce Colors” plugin is one of the simplest ways to change some of the elements of WooCommerce.

Also in the WordPress Customizer, you find an “Additional CSS” area. You can use this area to add your own CSS.

The other option is to edit the style.css file in your theme. I would highly recommend using a child theme so it won’t get overwritten when your theme updates. This tutorial has recommendations on creating a child theme: http://ostra.in/woo-child.

Redesigning WooCommerce Email Templates

In this second part of this tutorial we are going to look at editing email templates.

Before we edit the templates, let’s get a feel for what they look like.

• Go to “WooCommerce” then “Orders”.
• Either find an order for your account, or create new order. We want an order that is associated with our email address.
• Using the “Order actions” option in the top-right, choose “Resend new order notification”:

• Check your inbox, and you’ll see what the order email looks like:

There are a limited amount of things that you can do to this template within the WooCommerce admin interface.

• Go to “WooCommerce” -> “Settings” -> “Emails”.
• Scroll down a little. Here you can customize some global settings for all your emails, including the ‘From’ name and address, a Header image, and the Footer text.

At the top of the “Emails screen,” you can see links for a wide variety of email templates.

• Click on the cog icon on the right-hand side next to “New order”.

Here you can edit the Recipients, Subject, Email heading and Email type. WooCommerce will also tell you the exact file you can use to edit this email.

• Click “Copy file to theme”. This will automatically create a copy of the file for you inside your theme’s folder.

• Open up the file system for your WooCommerce site.
• Browse to your new WooCommerce files, whose location you saw in the previous step. In the image above, the location would be wp-content/themes/twentyseventeen/woocommerce/emails/
• Open the copy of the admin-new-order.php file.

At the top of the file there is a woocommerce_email_header hook. Earlier in this chapter we used a very similar action hook. In this instance, WooCommerce itself uses this action to put the email header image into this template:

<?php do_action( 'woocommerce_email_header', $email_heading ); ?>

The text I want to change is shown in the image below. This text is hardcoded in Line 18 of the admin-new-order.php file. Because this file has been copied and stored in our theme folder, we can edit this text directly. If you change the text, you can see how it looks by returning to the WordPress admin area and resending yourself the email.

Using this method you could edit anything in this template. You could add a row to the HTML table, you could further customize the greeting, you could take advantage of hooks or anything else you may need.

This process can be repeated for any WooCommerce email template. Go to the WooCommerce settings, pick the email that you want to edit and then copy the template to your theme. You don’t necessarily have to know PHP. You could change some of the words in the file using plain English.

If you enjoyed this introduction, check out WooCommerce Explained, the comprehensive introduction to WooCommerce.