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:
- Download the HTML version and use it to follow along the course.
- Alternatively, download the finished WooCommerce-enabled project to explore how it is build or to use it as a starting point for your own projects.
The overview of what we will cover in the course.
Overview of WooCommerce customization
The three methods of WooCommerce customization: styling, hooks and templates.
Setting up the WordPress theme export
Give the theme a name, select the export folder and enable WooCommerce.
The master page and the site content
Creating the master template for all templates in the theme.
Single product template
The template for displaying detailed product information.
The product title
Define the WooCommerce template for displaying the product title.
The product rating
Use star icons to show the product rating.
The product short description
Show the product excerpt with a horizontal line.
Hooks vs. freestyle mode
Switching to the freestyle mode for top flexibility.
The product price
Custom price display with regular and discounted price.
The product stock & custom CSS styling
Showing the stock status and styling it with CSS.
Add to Cart section for a variable product
Using our own design for attribute selectors, quantity input and the button.
Add to Cart section for a simple product
Reusing the variable add to cart for simple products.
The product meta
Displaying the product category, tags and other meta information.
The product tabs with Bootstrap accordion
Implementing tabs with a standard Bootstrap accordion component.
The product description tab
Customize the layout of the description tab.
The product additional info tab
Customize the layout of the additional information tab.
The product attributes
Displaying product attributes in a Bootstrap table.
The product image gallery
Using default WooCommerce gallery with interactivity and a bit of custom styling.
The sale flash sticker with saved amount
Adding the extended flash sale element.
Creating a site-wide breadcrumbs navigation template.
Showing product up-sells in our own layout.
Using our custom layout for displaying the related products.
Product list template
The template for showing product archives, categories and search results.
Product list breadcrumbs, title and result count
Adding navigation, page title and displaying the result count.
Ordering the product list
Adding the dropdown control for selecting the product ordering.
Product list pagination
Using Bootstrap pagination component for WooCommerce pagination.
The shop sidebar
Dynamic sidebar with Gutenberg blocks.
Search block for the sidebar
Implementing custom search form as a Gutenberg block.
Sidebar heading block
Creating a custom block for sidebar headings.
Sub-categories on the product list
Displaying sub-categories under the product list – if they are available.
Setting up the front page
Preparing the front page template for Gutenberg blocks.
The hero block
Creating a custom block for the shop hero.
Small banners block
Implementing banners as a custom block with sub-blocks.
The call to action block
Creating a Call to action block for the front page.
The product list block
Implementing our first custom Gutenberg WooCommerce block.
Product count attribute for the product list block
Using the attribute too set how many products are shown in the list.
Order attribute for the product list block
Add the attribute for ordering the list.
On sale filter for the product list block
Use the attribute to display only the products that are or are not on sale.
Toggle ratings on the product list block
Add the toggle attribute to switch on the product ratings.
Tags and categories for the product list block
Using attributes for selecting products based on product tags and categories.
The product picker block
Create a custom block that lets us hand pick the displayed products.
Template variants – alternative sale flash design
How to define and use multiple variants for WooCommerce templates?
The sub-categories block
Creating a custom block for showing the list of categories.
The hand picked categories block
Adding a block that shows the hand picked categories.
The header with site name and menu
Taking care of the site-wide navigational header with the site name and customizable menu.
The cart info and link
Display the count and amount of the items in the cart.
Setting up the content of the index template
Adding the WordPress loop and showing the post information.
Index template sidebar
Creating a special dynamic sidebar for the non-shop pages.
Single column layout for cart and checkout
Defining a special layout for the important shop areas.
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?
Implementing custom success, info and error notices.
Adding custom PHP code
How to extend the project with custom features that are not supported by Pinegrow?
Using the design panel
How to activate and use the design panel on the WordPress project?
Disabling the design panel
How to disable the design panel if you decide not to use it?
Extending the small banners block
Font page extras – extending the small banners block to have it support variable number of sub-blocks.
The subscribe to newsletter block
Front page extras – creating a block that lets visitor subscribe to the newsletter.
The features block
Front page extras – adding the block for displaying the shop features.
The image mosaic block
Front page extras – implementing the image mosaic as a block.
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 :)