How to Create a WooCommerce Archive Page with Elementor

What will happen if your product archive page is not well-presented? Of course, it will lead to poor engagement, difficult navigation, discouragement among your visitors, etc.

Your archive page serves as your showroom. It tells your visitors what you are selling. If well presented, customers would never hesitate to explore and take their buying action.  

Luckily, with Elementor and the right WooCommerce plugin, you can achieve the desired look for your archive page. In this blog post, we’ll walk you through the process on how to create a WooCommerce archive page with Elementor.

So, let’s not waste any more time and let’s start learning!

What Is a WooCommerce Archive Page?

A WooCommerce archive page dynamically displays a collection of products based on specific criteria. This page could be a pagina del negozio, product category page, tag page, etc. Instead of showing a single product, the archive page presents multiple products in a grid or list format. This would allow the customers to browse and even filter products easily. 

By default, WooCommerce uses a standard layout for the archive page. But with tools like Elementor and ShopEngine, you can improve the look of this page in terms of design, structure, and functionality. 

Why Customize Your WooCommerce Archive Page with Elementor?

The default WooCommerce archive layout is functional but not particularly flexible or visually engaging. Customizing your archive page with Elementor allows you to:

• Reflect your brand identity with custom layouts, fonts, and colors.
  
• Enhance user experience with filtering, sorting, and a search-friendly design.
  
• Highlight featured or seasonal products to guide purchasing behavior.
  
• Increase conversions by optimizing product presentation.
  

With Elementor’s drag-and-drop editor and WooCommerce widgets, you gain full control over the design without coding skills.

Prerequisiti

Before we begin, make sure you have the following:

1. WordPress
2. WooCommerce 
3. Elementor 
4. ShopEngine
   

ShopEngine is a powerful WooCommerce builder plugin designed specifically for Elementor. When customizing WooCommerce pages like an archive page, ShopEngine offers a wide range of features, templates, and widgets that enhance both the design flexibility and functionality of your online store. 

Here’s why you might choose ShopEngine:

1. You have full control over the design with Elementor. The tool integrates smoothly with Elementor, having a drag-and-drop interface. This allows for easy customization of the layout.

2. ShopeEngine offers pre-designed archive templates that you can import and modify quickly. 

3. The tool features various WooCommerce widgets, such as archive products, description, result count,  product filter, archive view mode, etc. This allows you to display products on archive pages in exactly the way you want.

5. ShopEngine ensures that your archive pages look great on all devices.

6. You can customize the product loop (how each product is displayed on the archive page) with complete freedom, including layout, hover effects, badges (e.g., “Sale” or “New”), and more.

Step-by-Step Guide to Creating a WooCommerce Archive Page with Elementor

Let’s go through the step-by-step process to create a custom archive page using Elementor.

Passaggio 1: crea un modello di archivio

Navigate to your WordPress dashboard and go to ShopEngine. Select the Builder Template to create a new template.

An off-canvas window will appear for template settings, where you will all need to fill in the necessary information. 

1. Give your new template a name for easy identification.

2. Select the archive type, which will tell the system that the template is for the archive pages. 

3. Assign the template to a specific category. But this is only optional. If you do, you’ll need to create additional templates for general products and other categories. 

4. Toggle the active button if you want the template to become the default archive template.

5. Either choose a template from the pre-made designs or create your template from scratch with single product page widgets. Here’s a sample of pre-made template:

If you choose to go with the pre-made template, you still have the chance to improve it based on your branding. But in this tutorial, we’ll create a layout from scratch by selecting the blank template.

6. Choose your editing tool from Elementor or Gutenberg and click Edit with Elementor if you choose Elementor.

Step 2: Choose Your Structure

Decide how you want your archive page to be structured. You can choose between Grid and Flexbox.

Then set up your layout. You can adjust the height, width, direction, etc. You can also style the border, background, and even elevate the design through the advanced settings. 

Step 3: Customize Your WooCommerce Archive Page

Now it’s time to add style and functionality using the ShopEngine archive widgets. 

Drag each widget into the center. 

Descrizione dell'archivio: It is the text that describes your product archive page. 

Archivia prodotti: Displays the list or collection of products of your store. You can show multiple products in a single product archive page. 

Archive Results Count: A text that tells viewers how many products are being displayed on an archive page. For example, Showing 1–12 of 50 results.

Modalità di visualizzazione archivio: This tells how the products are displayed on an archive page. This tells the layout and style. 

Filtri prodotto: This helps customers narrow down products based on specific criteria, such as:

• Prezzo del prodotto
• Product Catefory
• Valutazione del prodotto

Each section of your layout is customizable. You can play with the style and even enhance it through the advanced settings.

If you are satisfied with the design of your archive page template, publish it. But you may first check what the appearance of your page looks like by checking its preview. By doing this, you can go back to your editor page and adjust before publishing.

And here you go! Your WooCommerce archive page on live.

Domande frequenti

Q: Do I need Elementor Pro to build a WooCommerce archive page?

No, but Elementor Pro will let you experience advanced features.

Q: Can I include filters and sorting options on the archive page?

Yes, ShopEngine offers widgets for product filters, sorting, and pagination that can be added to your archive page for a better user experience.

Q: Do I need the pro version of ShopEngine or Elementor to build an archive page?

Some advanced features and widgets may require the pro version of ShopEngine with a free Elementor version. However, you can create basic archive pages using the free versions.

Q: Will my archive page update automatically when I add new products?

Yes. Since archive pages are dynamic, any new product that matches the set criteria (like category or tag) will automatically appear on the page.

Your Turn

Customizing your WooCommerce archive page with Elementor is a powerful way to differentiate your online store and provide a seamless shopping experience. With ShopEngine and Elementor, you can build a layout that not only looks great but also drives more sales.

Now, it’s your turn to try ShopEngine and experience a stunning archive page!