Looking for something?

How to customise the appearance of your WooCommerce shop

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.

WooCommerce options in the WordPress Customise section | HollyPryce.com

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.

WooCommerce store notice | HollyPryce.com

The banner will look a little something like this, although it may be styled differently depending on which theme you are using:

WooCommerce store notice | HollyPryce.com

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.

WooCommerce product catalog settings | HollyPryce.com

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.

WooCommerce Product Images settings | HollyPryce.com

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.

WooCommerce widgets | HollyPryce.com

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.

WooCommerce price slider | HollyPryce.com

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.

WooCommerce top rated products | HollyPryce.com

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.

Need some help?

If you need a hand with installing and setting up a WooCommerce shop, or with changing the appearance of your shop, I can help! I offer WooCommerce supposrt as a part of my WordPress Maintenance and Updates service. Check out my services page for more information.


I have more WooCommerce blog posts planned for the future so make sure you pop back for those!

How to customise the appearance of your WooCommerce shop | HollyPryce.com

Leave a comment

Comment

* = Required. Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.