Now you’ve installed and set up WooCommerce, it’s time to decide how you want your shop to look.
As I mentioned in the first post in this series, since the release of version 3.3 WooCommerce is compatible with all WordPress themes. The WooCommerce content just sits where your WordPress content usually sits, and this is great because it means WooCommerce is even easier to set up that ever before.
However, you will probably want to make a few changes to the appearance of your shop to make it look great, and to ensure that it is as easy as possible for customers to find exactly what they are looking for.
In this post I’ll show you a few ways in which you can customise the appearance of your WooCommerce shop.
The WordPress Customiser
The WordPress Customiser allows you to easily change the appearance of your WordPress theme without having to mess around with any code. And when you install WooCommerce, a brand new section is added to the Customiser, allowing you to make a few basic changes to appearance of your shop.
To access the Customiser go to Appearance then Customise. Then click on the WooCommerce tab.
After opening the WooCommerce tab you will see three options: Store Notice, Product Catalog and Product Images.
Store Notice
Let’s start by looking at the Store Notice. Here you can enter a message that will show across your website, usually at the top or bottom depending on your theme. To enable the message tick the box next to Enable store notice.
The banner will look a little something like this, although it may be styled differently depending on which theme you are using:
Product Catalog
Next up is the Product Catalog. In this section you can customise the appearance of the shop page.
Firstly, you can choose what the shop page actually displays. By default it is set to show products, but you can change this to show categories, or a mixture of products and categories.
Next, you have the option to change what is displayed on the product category pages. By default this is set to show products, but you can set this to show subcategories, or a mixture of subcategories and products.
You can also change the default option for product sorting. The default sorting is custom ordering and ordering by name.
Finally in this section, you can change the number of products per row and the number of rows per page.
Product Images
The last section in the WooCommerce part of the Customise Product Images. Here you can customise the width of the main image and the thumbnail image, as well as the cropping settings for the thumbnail image.
There might be other options available but this depends on your theme.
WooCommerce widgets
WooCommerce comes with heaps of new widgets to use in the widgetised areas of your WordPress website.
To view all the new widgets, go to Appearance then Widgets.
Let me talk you though all of the WooCommerce widgets and what their functionality is:
Active Product Filters
The Active Product Filters widget displays a list of active product filters. So, if the users has selected certain filters, for example a blue colour filter, this will be listed within this widget.
Cart
The Cart widget shows you the products that you have added to your cart. From here you can remove products, see your subtotal, view the cart page and proceed straight to checkout.
Filter Products by Attribute
The Filter Products by Attribute widget allows users to filter products by their attributes. You can choose which attribute you would like to show, whether you’d like to display them in a list or in a dropdown box, and whether you would like the query type to be AND (e.g. red AND blue shoes) or OR (red OR blue shoes).
Filter Products by Price
The Filter Products by Price widget creates a slider so that users can set a price range and filter the products in the store by price.
Filter Products by Rating
The Filter Products by Rating widget allows users to filter the products by the ratings left by other users.
Product Categories
The Product Categories widget allows you show a list of product categories. You can choose whether you want to order this list by name or category order, and whether you want to display categories in a list or in a dropdown box,
You can also set this widget to show the products counts (i.e. how many products are in each category), the hierarchy of the categories, and only children of the current category.
Products
The Product widget will display a list of the products in your store. You can choose how many products you would like to display, which type of products you would like to display (all, featured or on-sale products), and how you want to order them. You can also choose whether or not you display free or hidden products in the list.
Products by Rating
The Products by Rating widget shows a list of your top rated products, and you can specify how many products you wish to display in this list.
Product Search
The Product Search widget will display a search box specifically for searching for products.
Product Tag Cloud
The Product Tag Cloud widget is pretty much the same as the normal Tag Cloud widget, but it specifically displays product tags rather than normal post tags.
Recent Product Reviews
The Recent Product Reviews widget will display the most recent product reviews, and you can customise the number of reviews that are displayed.
Recent Viewed Products
The Recent Viewed Products widget will display a list of products that a user has viewed, so this will vary from user to user. You can change the number of products that are displayed.
Styling with CSS
If you want to make further styling changes to the appearance of your WooCommerce shop you will need to use CSS.
As you are probably already aware, it’s bad practice to make direct changes to the files of a plugin, because there is risk of you losing these changes when the plugin is updated. Therefore you will need to override the WooCommerce default styling in your theme files.
And if you plan on making changes to a theme that you didn’t build yourself, make sure you create a child theme! If you aren’t sure how to make a child theme, check out my tutorial that shows you how to easily create a child theme with a plugin.
If you would like to learn more about how WooCommerce is styled, you can find the stylesheets for the plugin on the plugin folder:
wp-content/plugins/woocommerce/assets/css
Here, there are two specific files you will want to look at: woocommerce.css and woocommerce.scss. As I previously mentioned, I don’t recommend you change these files, but hopefully they will help you to understand the structure of the CSS that is used to style WooCommerce shops.
Hot off the WordPress!
Join my FREE email community today to receive helpful tips and advice on building and maintaining your website directly in your inbox every other Friday. Just pop in your name and email address.
Pin for later?
