In this tutorial, I’m going to show you how to create an Elementor products archive template for your WooCommerce shop using Elementor.
This article is part of my Elementor + WooCommerce series where I show you how to create an eCommerce shop using Elementor and WooCommerce.
By the end of this tutorial, you’ll know how to customize every bit of the products archive widget using both Elementor and the Astra theme.
We’ll also create a hero for the product archive page, as well as a basic custom product filter that not only displays the particular product category you click on but also enable you to filter by price, popularity, etc.
Pss: Below is a step-by-step video you can follow along with.
Video: Create a Products Archive using Elementor
What you’ll need to create the Elementor products archive template
To create a product archive template, you need to have the free version of Elementor installed alongside Elementor Pro or Elementor Cloud.
If you have any of those ready, let’s get started.
Note that I’m using the Flexbox container in this tutorial. To activate the Flexbox container go to your dashboard go to Elementor > Settings, then go to Experiments and look for Flexbox Container and activate it, then save your changes.
On your WordPress dashboard go to Elementor > Templates and click on Theme Builder.
When your Theme Builder opens up, go to the Product Archive option on the left menu and click on the plus sign or click Add New in the right upper corner.
Close the template popup since we won’t be using any templates.
With your Flexbox container active, go to your Elementor dashboard and click the plus sign to create a new horizontal container
Select the container and under Advanced, give it a Padding of 80px on top and 40px at the bottom.
Inside that container, add two other containers.
In the first container, add the Heading and Breadcrumb widgets from the Widgets area on the left.
Select the container and in the Edit Container section o the left, under Style set the Content Width to Full width, and give it 70%
For the second container, give it Full width also and 30% width.
Under Advanced, give it a Margin of -80px on Top to position it at the very top of the page.
How to create a products archive template
Add a new container in the next section and add the Archive Products widget to it
Note; That everything else in the archive like the title styling, the add to cart button, etc are all coming in by default from the Astra theme. So I just have to customize and remove the elements I don’t want to display, for example, the add to cart button.
Let’s start by selecting the Archive products widget and in the Edit Archive products area on the left, go to Style > Title, set the Color to the main colour, and use the Title/Head for the Typography.
Set the Rating Star colour to yellow, and leave the Empty star colour on transparent.
Give the Price the secondary colour and the Title/Head Typography.
Set the Regular price colour to black with the Typography of the Title/Head.
Proceed to the Box option; set the Padding to 10px on all sides and set the Background colour to white.
Down to Pagination; set the Typography to the Body text, then on Normal, set the Colour to black and the Background colour to white.
On Hover set the Colour to white and the Background colour to black. And on Active set the Colour to white and the Background colour to the secondary colour (blue).
When you are done, go to the bottom publish option and save it as a draft.
Next, we need to remove the add to cart button from the archive page so that a user first clicks on the product and reads about it then they’re able to find the add to cart button.
To do this;
Go to your WordPress dashboard and click on Appearance > Customize, look for the WooCommerce option, and in it find the Product Catalog.
Under the Shop Card Structure option, find Add to cart and click on the eye icon to disable it.
Do the same for the Ratings and Category, then click the Publish button at the top.
This will leave only the Title and Price visible in the products archive.
While still under WooCommerce in the Customizer, go to the Product catalogue and scroll down to Shop Card Design, you’ll notice that the selected design (Design 2) still displays the Add to cart icon and the Sale button. Select Design 1 instead to change this.
Change the Shop Columns to 3 and the Products per page to 7. Click the Publish button at the top when you’re done, then go back to Elementor and save it as a draft.
#1. Add filter to products archive
After customizing the product archive to your preference, it’s now time to add a filter that will enable you to filter products by their categories.
However, Elementor does not have an inbuilt filter to do this, so to do this;
Click the plus sign to add a new column in which you should add a horizontal container.
Inside the container, add a Heading widget and a Nav widget
Select the Heading then under Content > Title add “All Products”.
On the Link option, copy your Archive page’s URL and paste it, so that when someone clicks on All Products they are automatically taken to the shop/archive page.
Under Style, set the Text colour to black and the Typography to Body text.
Under Advanced > Padding, unlink the values then add 12px to the Top. this will place the heading (All Products) on the same horizontal axis as the menu items.
Speaking of the menu, the one that’s displayed here is not the menu we want to display on our products archive page, we instead want to create another menu.
To do this first save your draft then go back to your WordPress dashboard and under Appearance > Menus, click Create a new menu.
Under Menu Name add “Products”, then click the Create Menu button on the right.
On the Products > Categories option, you will see the product categories listed, but they are not shown.
To display them go to the upper right corner and click on the Screen options, and enable the Product categories option.
And with this, you’ll have the Product categories option displayed under Add Menu Items.
Close the screen options and go to Product categories under Add Menu Items, go to the View all tab and select all the categories that you want to be displayed on the menu then click Add to menu.
After adding your menu items you can reorder them any way you want, and when you’re done click the Save menu button in the right corner.
Back to the Elementor editor, select the Nav menu widget then under Content > Layout > Menu, select the Product menu.
Under Pointer select None.
Under Mobile Dropdown, select the Breakpoint to be on Mobile, and under Icon select the plus icon (+) and insert it.
Under Toggle align select right.
Under Style, set the Typography to the body text and the Text colour to black.
Select the main container and go to Advanced > Padding, unlink the values then add 40px to the Top.
When you’re done, save the draft and then preview it.
Go back and click the Publish button, Add a condition to Include all archive pages, and then save and close.
Go to your preview page and click o Shop to check out the new layout you just created, and with the filter working as it should.
Back in your Elementor, select the av widget and go to Style > Typography, on the Active tab change the Text colour to blue.
Select the products container then go to Advanced > Padding, unlink the values and add 80px to the bottom.
Elementor products archive template responsive settings
Let’s now check out how the products archive page looks on the different devices.
Go to the Responsive mode icon at the bottom, then click on the individual device icons (mobile and tablet) to see how the page looks.
If you’re satisfied with the way everything is, just click the Update button.
Additional fixes
- On your Heading, make sure you have the right text.
- To remove the border from your Pagination, go to your Astra customizer and on the Colors option, you’ll notice that the border colour (yellow) that’s on the pagination is the Links colour, change the colour to transparent then Publish.
- Make sure the colour setting change above does not affect the rest of the links on your website.
Do this by going to your Elementor Site Settings, going to Theme style > Typography > Links, and making sure you’ve set it to your normal link colours on Normal and Hover.
In conclusion,
That’s how you can use Elementor, Astra, and Flexbox containers to create a product archive page for your WooCommerce website.
If you have any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.
