Back to contents

How to create and set a Product’s Archive template

Learn how to create a product’s archive template for WooCommerce products using JetWooBuilder addon for Elementor.

JetWooBuilder plugin for Elementor

Products Archive template is necessary for further shop building with JetWooBuilder plugin. In the Archive template you will be able to create and set up the layout of one Product item, and then display on a Shop page in the form of Products Grid, Products List, etc.

Building a product’s archive page template

Step 1 — Open WordPress Dashboard and here navigate to WooCommerce > Jet Woo Templates. If you don’t have it yet, make sure to install JetWooBuilder plugin via Plugins > Add New.

JetWooTemplates dashboard

Step 2 — Click the Add New Template option on the Jet Woo Templates screen.

Step 3 — Choose an Archive template in the Add Template dropdown and input a template title in the Template Name field.

Archive template setup

Here, you can also select a ready-to-use layout, perfect for the quick start in case you’re not familiar with JetWooBuilder.

Step 4 — Click the Create Template button in order to open Elementor editor. There you have an opportunity to create an impressive and visually attractive archive template with the help of JetWooBuilder widgets.

Note: you can enable needed widgets for the product’s archive template via the WP Dashboard in the Elementor > JetWooBuilder Settings > Archive Product Available Widgets block.

Archive product widgets

Please, keep in mind, that when creating an archive template you’re actually customizing the appearance of one product template. And this product template will be shown in the grid or listing when applied to the archive. So it should not contain any long descriptions and must be fit for representing the products in a grid or listing.

Archive setup in Elementor editor

In case you’ve selected the pre-designed template, you’ll see the ready-made layout with all the widgets already added.

Once you see that some content areas are missing, please, make sure your products have all the needed content for displaying (e.g., the Add to cart button won’t be shown in case there are no prices set, or if the product is out of stock).

Step 5 — Click Settings option in the bottom left corner and open Template Settings to apply the custom columns count for the archive you’ve created.

Archive template settings adjustment

The values are responsive, so you can set more columns for the desktop while using 1 column and the listing layout on tablets or mobile devices.

Step 6 — Click the Publish button in order to save the changes.

Step 7 — Move back to WordPress Dashboard > WooCommerce > Settings.

JetWooBuilder settings

Step 8 — Click the JetWooBuilder tab and scroll down to the Products Archive Template section. There tick the Enable custom product archive page option and select a newly created template as a products archive template in the Products Archive Template dropdown.

Step 9 — Afterward, click the Save Changes button.

That’s it! Now your archive template is ready. Use your imagination to customize a template.