How to Create an Elementor Products Archive Template

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.

gs2dxgy0Rq48QKX2rk hKqjQ 85WOakqE2yTBBK8T0Yx itH JTRTxQEo7OxE6ruDOSSfBgkPy

1HaSJ zQ1UC0lTIvDlfXtcWzbQqR TetEqETkdjxNz7p5d7dqnbh8XRf5bQp17vY048tTrXCDBl6MlHxyq7a sVjTLxrHJm QxmE3aOsEdhMmJaLvbwxzlRjpyz0HBPIg36yd3fM580le

Elementor flexbox container

On your WordPress dashboard go to Elementor > Templates and click on Theme Builder.

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

Elementor Products Archive Template

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

Elementor Products Archive Template
Elementor flexbox 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%

Elementor Products Archive Template

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.

Elementor Products Archive Template

How to create a products archive template

Add a new container in the next section and add the Archive Products widget to it

Elementor Products Archive Template

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

Elementor Products Archive Template

When you are done, go to the bottom publish option and save it as a draft.

Elementor Products Archive Template

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.

4Bgmk3bMWdXweKqu3IjqnZCeWF7ZGQiU3oYLTir6WgggBW8 stUsiaP31M9QjJpMgeoSLOOYJ6tvk9fAgor2bSgZmHUdprjMZDYh6iERqwLIF3hgimXctik4bL8M81zTsAsWM78997Gq5N4kC5CEffqeeOFA 337WoL6RCZoL7GWgwAM

UiOCK1HESKIZ7YLz0nKeUq Ep1fCiaAVzTGEAey 9g3JuRwLRuFbpoRWkHqfDm3gnZlqekpxW8 raznhk4a2BMVrZCoobspcCu7VUdfzeftm4vdmsnBvRkghV74LYMeo 7WE EedAI1lSqeuv5QTES0SfJno03Uzp6vNbChYFk 0Q9vVS9ErPAG8kA6ggg

RoeIPGZn6EEdtKYHB5ba9 pDh JRR 4leEOqQQ0m X0iSb7nrxgotdQlYqy8RaxUA8iwyZCOAM8puzFM7ooEcYcURFSqsh8a1Z

7vKFBXRVcj62YSmBQCeXL2EMhK1wJXcHz2rCI9IGwPNI2BrKAb QPvRrr2vki3Scn 0RMti1UIKBpJkfLVB4dMoDvqdnDm4LIuEv7scNasbT Exl8yKh3Z 2qNLq U6nwLPyzQWb DwbAdXtPv0ucO1RkWgUl0HX1ArMapH4lcFQAlykvJaCiPgz r2Q7w

This will leave only the Title and Price visible in the products archive.

Elementor Products Archive Template

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.

Elementor Products Archive Template

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.

Elementor Products Archive Template

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.

Elementor Products Archive Template

#2. Create a products archive menu

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.

Elementor Products Archive Template

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.

KVjAMC2eHgCQbyjfPttn8nyhenRFcojVIGr NbnfKkLzOloCZzlOzSMgPlal9sBIj T0JG4HBKV64LJafcNCCy0moIybRd t6I6omShUJHhbF51wsQY53dNbSnid4bB

To display them go to the upper right corner and click on the Screen options, and enable the Product categories option.

jVpUczzBbPgvNrAULIUl 3ZFHdkJKIe8VPNyECaCk25Tm5hIZj622J8yJ FyA6KsPedwkkSsVjvpHEDoBjOf5Y Rk OoiERB6sCGc1Z7agYJCKnHcnUQ035 2RgX5iMO8FLcUCqeiBOTiw3jeNJKSOxCXM1KBLjaVbh5S 9OPFwb19kUE0Mj4bhWsR106A
Aqj43oR5BWTaHiUGWuvM n0ZS5gR99 mL0 x8rlZGhBB0VKYCsyDMFaztPNVV3aUBPBTE3MvqGRbCLRg8WXXqnipi 1Qa2DEOg uXDTF6Lu5vyBLa7OOCRhSdKoR872WO9 2zBcOe6sSRRsnDUjeKrwQVgHBuwbzdNyXsCq8U wPo5Ut9cjlY1 hCCuaJQ

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.

1 GGmQT79AjXkC8qnTAY tRZtQR5pW B0JkpZDSM2UJIZdgl0DDPCj1xC0J8Jr6r FcdxkZ QAcuTTGFz2vmKEwRcn0IRSVYShfbpILcu2qd3qryVWRaSd7Io

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.

emxzRItQFM7Rp77KrkPfAA1wviLsa2sKnaRqJAYn3uJPG SznR4NU4pJUEZttPuKAPhfHEe0IFIubOrAxsG2j71ofQfV RsuM0sHiAbcK7OjtnCaxfUEEOdPtPu9LrxhIkEg3ut6YImoUMZ3jFZBb29zsGKBo7LIgdATxC2VL ks 4mm3ZtLafytB ToTg

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.o5Bx UCSF8 e2cmegIhifZ073LFZDmI2gQvAjyo9 1zdp U5 dZE WHVRbXNg2UXl9BG5nhtl NuLAmaj1nbEA1rE2kR5NP5sAQ3XT7xo3Zzg1c14e0dZgE3a2P7z1Z0u4Vo0Q6xomB N8UlyHSs

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.

EDAbDdSvMpAYezr6wtlN08W zF3NpZOg9NFHc2aPuR0Ug76AHJcGgExyEKhOOVo4OZXJ1rcS3QjbguiAOTPWcF35XY uoBNccKZOQulECoX6Dox3hTmM18FvEkdiYsupHJeyBQaOre7bTh2H7xkXkOLTOS3pm isHGIL1g2ZKORGAeBLqcb2tOiE1pQF7w

Additional fixes

  1. On your Heading, make sure you have the right text.
  1. 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.MuekU2M gLaTgy4NaG5CUvm0qNDC3DGFLMtY1WtQfHbBMxOLeQ8 1JAn6PSgwUyXLGzi oCU4D1LT xRvvDblkCIOYXpb1LekXHFMlA9qguMc8dDxwvoyyID50Kf5GHQVu3acYtV20eNf5BUOnMJYSzak3XbkMFb4Y3BX6pjor9 hhlYN0uNwVsS4YFt g
  1. 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.

JamYwduaDVeBE0q4uJieyhhybzB G7J2hmUOnixq2QpJ90dLr2J5vOJ5XPpbSM31 P2k3ARFg5 abFoI8sBHNmxLeVzz7zR9W q9gAPR80ll3iDYwPra0zN2Yeq7aI gdZj ORKM7Rs8qPS1Um4BBvgy6PzuJNC436vHydHDZDGVOJHwDBFUS75FNARVZA

i5avsrAKSiU0bPqH1tA0aYVrMKvsLLDHtdwXP4rBj1wZk3EPy1oXbdU6dbWi0enzQI905klngbCe9 Ks IgQzH4 EXNfGW3dx7xB pMxIAOpLGfgclryoMpZb8fLHWFoWSsnKlnI HUjJf2DdHy0t0

vVsFJ3HMHRduXDgjRPPD68fziNv2mZsl4q6gwYJmbFJhMNqCAubZDw3o6fy8r9M21qPBPVeGU79kfq5vzdBwlwAgoLskOKDjOPsCG4ZgDriWq2aU5SsQY8z1k6ObMLOCn8SRwGtxN03AO hHumdv7gbxebzvoO EStsaldr2vXL GajKOQrfeFAid6FNWw

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users