- How to Display Categories on the Shop Page
- How to Create and Design a Dedicated Template for Each Category
This tutorial teaches you how to create a custom categories archive page for WooCommerce products using the JetWooBuilder plugin.
WooCommerce is an open-source plugin for WordPress, which helps you create and sell anything you like, from actual products to services and digital items. JetWooBuilder plugin makes the process of creating WooCommerce templates much easier.
How to Display Categories on the Shop Page
Once you’ve created several products, you’re usually good to go. But what if you have too many products to display at once, and you want to display the product categories instead of the actual products? Thus, you enable the visitors to click the specific category and access the goods that belong to it.
Styling up the product categories might be a complicated task requiring some coding skills. Yet, you can work with Elementor to create the WooCommerce Category Item template using this intuitive page builder in combination with the JetWooBuilder plugin.
If you still don’t have the categories assigned for the products, create them. Go to Products > Categories, fill in the Add new category section name, descriptions, and provide the thumbnail images representing the category to the visitors.
1 Step — Create a template
Firstly, go to the Crocoblock > Woo Page Builder tab in the WordPress Dashboard and click the “Add New Template” button.
Set the Category Item and provide a title in the corresponding field at the Add Template screen.
You can select one of the ready-to-use layouts to start.
Click the “Create Template” button in the same window to proceed to the Elementor page builder. Here feel free to use such widgets as Title, Thumbnail, Desсription, and Count, which are made specifically for Category Archive templates and have extensive stylization settings. Mix and match them to get the desired layout of the category.
NOTE. You can enable needed widgets for the Archive Category template in the WP Dashboard in the Crocoblock > JetPlugins Settings > JetWooBuilder > Widgets > Archive Category Widgets section.
Navigate to the Settings block in the bottom left corner to access the Jet Woo Category Template Settings. Here, you can change the template’s Title and Status, enable the Equal columns height, and manage the columns count to define how the categories will be shown in an archive.
When you are done, click the “Publish” or “Update” button.
2 Step — Assign the template to the page
Go back to the WordPress Dashboard and open WooCommerce > Settings. Proceed to the JetWooBuilder tab and scroll down to the Archive Category section.
Tick the Enable custom archive category option. After that, select a template you’ve recently created to set it as a custom categories archive template. Click the “Save Changes” button.
Proceed to the Appearance > Customize > WooCommerce > Product Catalog directory. Choose the “Show categories” option on the Shop page display field and “Show products” in the Catagory display so that you can display only categories on the Shop page. Hit the “Published “button.
Then, you only need to add the Products Loop widget to the Shop Page template without any settings.
The Products Loop will show the categories on the front end by default.
How to Create and Design a Dedicated Template for Each Category
Now you can click on the category and be redirected to the page based on the global shop template with the products related to the category. If you want to design different categories individually, like women’s and men’s collections, you need to create a dedicated Shop template for each category.
Proceed to the Crocoblock > Woo Page Builder tab in the WP Dashboard sidebar. Click the “Add New Template” button.
There will be a starting pop-up window. Select the “Shop” option in This template for the drop-down menu and enter the Template Name. If you are somehow confused about the shop page layout, you can choose a pre-set in the Start from Layout section. Afterward, click the “Create Template” button.
Fill new shop template with content. You can learn more about shop widgets here.
Go to Products > Categories and edit the category for which you have created the shop template.
Select the shop template for the category in the Custom Template drop-down menu.
That’s it. Now you know how to display categories on the shop page and design each template for each category differently.
