The complete guide to customizing WooCommerce

how to move the woocommerce produt image to the right

This guide shows you how to customize the most important pages of your WooCommerce website.

I’ll show you how to customize the layout and design of your WooCommerce home page, shop page, and single product pages.

And the best part is that no coding is needed.

I’ve broken this WooCommerce guide down into the following sections.

  • How to set up WooCommerce from start to finish – a guide for beginners.
  • How to customize the design of the WooCommerce Storefront theme
  • How to customize the WooCommerce Shop Page
  • How to customize the WooCommerce Home Page
  • How to customize WooCommerce Single Product Pages

How to set up WooCommerce – including setting up your hosting and domain name, and installing WordPress and WooCommerce

This part of the guide shows you how to get started.

First things first, you’ll need to buy a domain name and some hosting,

Here are some good hosting companies for WordPress

Then you’ll need to install the WooCommerce plugin.

Here’s a video tutorial that walks you through the entire process from start to finish. You’ll learn how to buy a domain name, get hosting set up, how to install WordPress and WooCommerce, and building your Store.


How to customize the design of your WooCommerce Storefront Theme

The default WooCommerce theme Storefront is technically beautifully built but the design is a little basic for many Store Owners ‘out of the box’.

We’ve built the Storefront Pro plugin that makes it very easy to change most aspects of the design, all using the WordPress customizer.

Storefront Pro is now used by over 5000 websites and is great if you want to have more control over how your website looks.

If you want to achieve a more professional looking design for your WooCommerce Store then Storefront Pro is a great option because it’s built for the WooCommerce Storefront theme.

Here’s a little video walkthrough of Storefront Pro

Main features of Storefront Pro

Here’s a table listing the main features of Storefront Pro – with a video walkthrough of each feature.

  

Storefront Theme customization - customize the design with clicks not code

New!! Homepage Hero - create an amazing homepage, with full screen sliders, videos and products.
New!! WooCommerce Shop Hero - Take your Shop and Category pages to the next level.
New!! Storefront Pro Skins - pre-made design skins that you can activate in 1 click.
Header styles - 8 beautiful header styles - align right, centered, left, hamburger, logo in nav
Typographic controls - change all the fonts and colors of your website
Choose your fonts - create the design to match your brand
Customize the header and search box - including setting a sticky header
Customize the Primary Navigation
Social icons and contact information bar - add your social networks and contact info
Footer customizer - change the design of the Storefront footer
Blog customizer - add columns, change layouts and create the perfect blog :)
Post layouts   - we are constantly adding new cool stuff!
Mega menus - create mega menus with 1 click
Font Awesome Menu Icons  - easily add lovely icons to your menus
Hide header until scroll - a really cool effect with one click
Customize individual pages - great for landing pages, squeeze pages and sales pages
Full screen layout - create an amazing full screen website
Pagebuilder support - support for the best page builders including Pootle Pagebuilder and Divi.

WooCommerce customization - create the perfect shop

WooCommerce customizer - customize every aspect of your WooCommerce shop
Customize products layout   customize the WooCommerce standard product layout
Customize individual products   change the design of individual products
WooCommerce Live Search - blazing fast live search
Responsive Mobile Store (landscape example) - create a great looking store for phones
Responsive Mobile Store (portrait example) - create a great looking store for phones
Product Quick view - entice your customers with less clicks
Horizontal product tabs, Accordions, and Product sharing icons  
Distraction free checkout - increase sales by using distraction free checkout
Stunning new WooCommerce shop layouts

Amazing free add-on modules included in your subscription

Storefront Pro Sales Pop - increase sales by showing recent sales from your customers
Storefront Pro Wishlists - let your customers save their products into a Wishlist
Storefront Pro Skins - create, save, import and export your Storefront Pro settings

How to customize the WooCommerce Shop Page

Ideally you would have complete control over the products that you show, and the sections of the WooCommerce shop page .

The default WooCommerce Shop Page is dynamically populated and pre-set. Normally you don’t have a lot of control in how it is designed.

However the WooCommerce Shop Page is one of the most important pages on your site, so the more control over the layout you have, the better. 

Ideally you should have 100% control over the design of your WooCommerce Shop page.

There’s just 4 simple steps to take to create any layout you like for your new WooCommerce Shop Page

  • First create a brand new page and customize the WooCommerce Shop page design using either the WooCommerce Products Blocks plugin and / or our Storefront Blocks plugin.

The beauty of this approach is that there is absolutely no limitation on how your design the layout

Here’s a demo of Storefront Blocks in action

Once you have designed your new page that is going to be your new WooCommerce Shop page move onto the steps below.


How to customize the WooCommerce Home Page

The WooCommerce Storefront theme comes with a home page template that automatically brings your products into a page.

It’s great because it’s automatic , however the downside is that you are then stuck with the order and layout of the page.

But there is a better way :)

Following the following steps to Customize the WooCommerce Home Page

  • Create a new page and give it a page title like Home Page
  • Customize this new page using our Storefront Blocks plugin or the new WooCommerce Products Block Plugin.
  • This is the really important bit – Change the page template to be either default or full width
  • Finally go to Settings / Reading and set your new page as the Front Page of your website
woocommerce page templates
  • Finally go to Settings / Reading and set your new page as the Front Page of your website
The complete guide to  customizing WooCommerce 1

How to customize the WooCommerce Single Product Page

The WooCommerce Single Product is likely to be the single most important page on your website.

If you can create a better WooCommerce Single Product Page then you are more than likely to increase sales

That’s where our WooBuilder plugin comes in handy

WooBuilder lets you change the design, layout, fonts, positions of all the elements of the WooCommerce Single Product Page.

How WooBuilder works

  • Put your WooCommerce Product information in as normal
  • Publish or save your product as draft
  • Click on ‘enable WooBuilder’
  • This will enable the new Gutenberg editor for that specific product
  • Design your new Single Product Page using the WooBuilder Blocks
  • Publish

Here’s a little video walkthrough of WooBuilder

How to apply your Single Product Page to multiple products

WooBuilder will also make it easy to apply your new super Single Product Page designs to multiple WooCommerce Products using Categories and Tags.

Here’s a video walkthrough of how WooBuilder templates will work


I hope you found this guide helpful – if you have any questions please leave them in the comments below.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top