Home/ Documentation/ WooCommerce/ WooCommerce Course

Creating custom WooCommerce themes – Course

Everything you need to know about creating a custom WooCommerce themes with Pinegrow Shop Builder.

Please note, this course is not about setting up WooCommerce, adding products and configuring a shop. Here, we will learn how to use Pinegrow to create a fully-featured custom WooCommerce theme that uses our own design and layout.

What you will need?

To get the most benefit from this course you will need:

  • Familiarity with HTML, CSS, WordPress and WooCommerce,
  • A local installation of WordPress with WooCommerce enabled,
  • Pinegrow Web Editor 6.5 or higher (a free trial version will do),
  • The Starter Shop HTML project so that you can follow along (links below).

What you will learn

You will learn to create custom:

  • Single product template,
  • Product list template,
  • Front page based on custom Gutenberg blocks including creating WooCommerce blocks for product lists and categories,
  • And much more.

See the list of topics in the right column for details.

Get the Starter Shop project

We will use this Bootstrap 5 project to create our custom shop theme. It comes in two versions:


Lesson 1


The overview of what we will cover in the course.

Lesson 2

Overview of WooCommerce customization

The three methods of WooCommerce customization: styling, hooks and templates.

Lesson 3

Setting up the WordPress theme export

Give the theme a name, select the export folder and enable WooCommerce.

Lesson 4

The master page and the site content

Creating the master template for all templates in the theme.

Lesson 5

Single product template

The template for displaying detailed product information.

Lesson 6

The product title

Define the WooCommerce template for displaying the product title.

Lesson 7

The product rating

Use star icons to show the product rating.

Lesson 8

The product short description

Show the product excerpt with a horizontal line.

Lesson 9

Hooks vs. freestyle mode

Switching to the freestyle mode for top flexibility.

Lesson 10

The product price

Custom price display with regular and discounted price.

Lesson 11

The product stock & custom CSS styling

Showing the stock status and styling it with CSS.

Lesson 12

Add to Cart section for a variable product

Using our own design for attribute selectors, quantity input and the button.

Lesson 13

Add to Cart section for a simple product

Reusing the variable add to cart for simple products.

Lesson 14

The product meta

Displaying the product category, tags and other meta information.

Lesson 15

The product tabs with Bootstrap accordion

Implementing tabs with a standard Bootstrap accordion component.

Lesson 16

The product description tab

Customize the layout of the description tab.

Lesson 17

The product additional info tab

Customize the layout of the additional information tab.

Lesson 18

The product attributes

Displaying product attributes in a Bootstrap table.

Lesson 19

The product image gallery

Using default WooCommerce gallery with interactivity and a bit of custom styling.

Lesson 20

The sale flash sticker with saved amount

Adding the extended flash sale element.

Lesson 21


Creating a site-wide breadcrumbs navigation template.

Lesson 22


Showing product up-sells in our own layout.

Lesson 23

Related products

Using our custom layout for displaying the related products.

Lesson 24

Product list template

The template for showing product archives, categories and search results.

Lesson 25

Product list breadcrumbs, title and result count

Adding navigation, page title and displaying the result count.

Lesson 26

Ordering the product list

Adding the dropdown control for selecting the product ordering.

Lesson 27

Product list pagination

Using Bootstrap pagination component for WooCommerce pagination.

Lesson 28

The shop sidebar

Dynamic sidebar with Gutenberg blocks.

Lesson 29

Search block for the sidebar

Implementing custom search form as a Gutenberg block.

Lesson 30

Sidebar heading block

Creating a custom block for sidebar headings.

Lesson 31

Sub-categories on the product list

Displaying sub-categories under the product list – if they are available.

Lesson 32

Setting up the front page

Preparing the front page template for Gutenberg blocks.

Lesson 33

The hero block

Creating a custom block for the shop hero.

Lesson 34

Small banners block

Implementing banners as a custom block with sub-blocks.

Lesson 35

The call to action block

Creating a Call to action block for the front page.

Lesson 36

The product list block

Implementing our first custom Gutenberg WooCommerce block.

Lesson 37

Product count attribute for the product list block

Using the attribute too set how many products are shown in the list.

Lesson 38

Order attribute for the product list block

Add the attribute for ordering the list.

Lesson 39

On sale filter for the product list block

Use the attribute to display only the products that are or are not on sale.

Lesson 40

Toggle ratings on the product list block

Add the toggle attribute to switch on the product ratings.

Lesson 41

Tags and categories for the product list block

Using attributes for selecting products based on product tags and categories.

Lesson 42

The product picker block

Create a custom block that lets us hand pick the displayed products.

Lesson 43

Template variants – alternative sale flash design

How to define and use multiple variants for WooCommerce templates?

Lesson 44

The sub-categories block

Creating a custom block for showing the list of categories.

Lesson 45

The hand picked categories block

Adding a block that shows the hand picked categories.

Lesson 46

The header with site name and menu

Taking care of the site-wide navigational header with the site name and customizable menu.

Lesson 47

The cart info and link

Display the count and amount of the items in the cart.

Lesson 48

Setting up the content of the index template

Adding the WordPress loop and showing the post information.

Lesson 49

Index template sidebar

Creating a special dynamic sidebar for the non-shop pages.

Lesson 50

Single column layout for cart and checkout

Defining a special layout for the important shop areas.

Lesson 51

Avoiding the quantity input conflict on the cart page

What to do if the quantity input from the Add to cart section does not work in the cart?

Lesson 52


Implementing custom success, info and error notices.

Lesson 53

Adding custom PHP code

How to extend the project with custom features that are not supported by Pinegrow?

Lesson 54

Using the design panel

How to activate and use the design panel on the WordPress project?

Lesson 55

Disabling the design panel

How to disable the design panel if you decide not to use it?

Lesson 56

Extending the small banners block

Font page extras – extending the small banners block to have it support variable number of sub-blocks.

Lesson 57

The subscribe to newsletter block

Front page extras – creating a block that lets visitor subscribe to the newsletter.

Lesson 58

The features block

Front page extras – adding the block for displaying the shop features.

Lesson 59

The image mosaic block

Front page extras – implementing the image mosaic as a block.

Lesson 60

The footer

Front page extras – adding a fully customizable footer.

About the course instructor

Hi, I’m Matjaz, the founder and lead developer of Pinegrow.

The web has been a part of my professional life for the past 20+ years, including developing internet banking solutions, creating websites for clients and lately, building tools for web developers & designers.

I’m not a fan of complicated modern web development toolchain. Instead I prefer a practical approach that focuses on creating usable results quickly. The web should be simple.

Some people complain about my Slovenian accent in videos. Sorry about that! But I promise, give it a couple of minutes, and you will be able to understand me :)