Learn how to build custom product catalogs for WooCommerce sites, using Toolset plugins. This will replace the standard “shop” page, which comes with WooCommerce plugin. To design, we only need to edit HTML templates, without writing PHP.
Download Toolset plugins and follow the online tutorial
Don’t have Toolset plugins yet? Our 30-days refunds let you try Toolset for 30 days and see how you like it, risk free.
Log in to your Toolset account and go to Downloads. Get the following Toolset components:
- Toolset Types
- Toolset Views
- Toolset WooCommerce Views
Upload these plugins to your site and activate.
To help you get started, we recommend that you also launch our WooCommerce training site (it’s separate from your Toolset account). There, you will be able to customize a demo WooCommerce site, which has everything installed and ready for training purposes.
Follow the online training and do the same on your real site. Of course, you should apply your own design and use your own custom fields in the site that you’re building.
Customizing the WooCoomerce Shop page with Toolset
Our new WordPress Archive will include the product fields we will choose. We will also have full control of the overall design.
Step 1: Creating a new WordPress Archive
In the WordPress admin of your training site
- Go to Toolset -> Dashboard
- Locate the Archive column.
- Click Create archive in the Products row.
A new WordPress Archive has beed created.
By default it will be used for the Shop page. If you also want to use this design for Product Categories, Product Tags check the relevant options in the Taxonomy Archives section.
Step 2: Designing the layout and adding basic fields
In your WordPress Archive edit screen scroll down to the Loop Output section. Here, we will determine how our products will display (as a list, grid, table, etc.) and what fields will appear for each of the products.
- Click the first button to activate the Loop Wizard.
- In the “How do you want the View to display?” pop-up, choose Table.
- On the next screen, we will choose the fields we want in the output. Use the “Add a field” button to include the following fields:
- Product image
- Post title with a link
- Add to card button – product listing pages
Once these fields are inserted, make sure the Use a Content Template to group the fields in this View loop option is checked. This makes editing the design for each of the products in the list easier.
- Scroll down to the Content Template. You will see your fields inserted as shortcodes. Wrap the product title ([wpv-post-link]) in h2 HTML tags.
Now your Template should look like this:
- Save your changes.
Step 3: Viewing the new Shop page
To see your results on the front-end scroll up to the Loop section and press the blue arrow icon next to the Products.
Your Shop page should look like this:
Step 4: Adding more fields
Now we will add more fields to our output.
Go back to editing your WordPress Archive again. Scroll down to the Templates for this View section.
We will add the fields to our second column. Position your cursor after your product title.
Adding the product categories
Use the Fields and Views button to include product categories. Locate the Taxonomy section and choose Product categories. Insert the shortcode with its default values.
Adding product attributes
Use the Fields and Views button agian. This time locate the Product attributes filed and insert the shortcode.
Save your changes.
You Constent Template should look like this:
Step 5: Checking the results
View your Shop page again. Your output should look like this:
Beyond the basics
In this tutorial, we’ve learned how to design the site’s ‘shop’ page, with the products catalog. We can use the same technique to create different custom designs for other archives, including product categories, products tags, and custom taxonomy pages.
The site that we’ve created features a simple design and uses the default WordPress theme. You can use the Views plugin with any theme and create your own unique and beautiful designs.
Other parts in this series
You’ve been following one part of our tutorials on customizing WooCommerce sites.
There’s a lot more in the other parts of this series. Together, the different tutorial parts will teach you how to build fully-customized , advanced WooCommerce sites.
A fully-styled reference site
Planning to build custom WooCommerce sites yourself? Check out our Toolset WooCommerce reference site. It’s a fully featured, fully designed reference site, that you can use as the basis of your client projects.