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:
The overview of what we will cover in the course.
The three methods of WooCommerce customization: styling, hooks and templates.
Give the theme a name, select the export folder and enable WooCommerce.
Creating the master template for all templates in the theme.
The template for displaying detailed product information.
Define the WooCommerce template for displaying the product title.
Use star icons to show the product rating.
Show the product excerpt with a horizontal line.
Switching to the freestyle mode for top flexibility.
Custom price display with regular and discounted price.
Showing the stock status and styling it with CSS.
Using our own design for attribute selectors, quantity input and the button.
Reusing the variable add to cart for simple products.
Displaying the product category, tags and other meta information.
Implementing tabs with a standard Bootstrap accordion component.
Customize the layout of the description tab.
Customize the layout of the additional information tab.
Displaying product attributes in a Bootstrap table.
Using default WooCommerce gallery with interactivity and a bit of custom styling.
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.
The template for showing product archives, categories and search results.
Adding navigation, page title and displaying the result count.
Adding the dropdown control for selecting the product ordering.
Using Bootstrap pagination component for WooCommerce pagination.
Dynamic sidebar with Gutenberg blocks.
Implementing custom search form as a Gutenberg block.
Creating a custom block for sidebar headings.
Displaying sub-categories under the product list – if they are available.
Preparing the front page template for Gutenberg blocks.
Creating a custom block for the shop hero.
Implementing banners as a custom block with sub-blocks.
Creating a Call to action block for the front page.
Implementing our first custom Gutenberg WooCommerce block.
Using the attribute too set how many products are shown in the list.
Add the attribute for ordering the list.
Use the attribute to display only the products that are or are not on sale.
Add the toggle attribute to switch on the product ratings.
Using attributes for selecting products based on product tags and categories.
Create a custom block that lets us hand pick the displayed products.
How to define and use multiple variants for WooCommerce templates?
Creating a custom block for showing the list of categories.
Adding a block that shows the hand picked categories.
Taking care of the site-wide navigational header with the site name and customizable menu.
Display the count and amount of the items in the cart.
Adding the WordPress loop and showing the post information.
Creating a special dynamic sidebar for the non-shop pages.
Defining a special layout for the important shop areas.
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.
How to extend the project with custom features that are not supported by Pinegrow?
How to activate and use the design panel on the WordPress project?
How to disable the design panel if you decide not to use it?
Font page extras – extending the small banners block to have it support variable number of sub-blocks.
Front page extras – creating a block that lets visitor subscribe to the newsletter.
Front page extras – adding the block for displaying the shop features.
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 :)