Back to contents

JetWooBuilder: How to Create a Custom Categories Archive Template

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.

categories on the shop page

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.

product categories

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.

jetwoobuilder templates

Set the Category Item and provide a title in the corresponding field at the Add Template screen.

add category item template

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.
archive category widgets

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.

jet woo category template settings

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.

achieve category template

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.

shop page display

Then, you only need to add the Products Loop widget to the Shop Page template without any settings.

jetwoobuilder products loop

The Products Loop will show the categories on the front end by default.

categories on the shop page

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.

add shop template

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.

product category editing

Select the shop template for the category in the Custom Template drop-down menu.

select custom template

That’s it. Now you know how to display categories on the shop page and design each template for each category differently.