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.

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.

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.

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-available-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.

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.

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.

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 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.