Without the right tools, setting up an e-commerce store can be a hustle. It can also get quite expensive for those who have to hire a web developer to build an online shop.
The two plugins work perfectly together to build a powerful online store that is user-friendly, professional, and spectacular.
In this tutorial, we will show how to use Elementor’s product archive templates, which will save time and make your work easier. But you can also build your template from scratch.
We will also help you understand Elementor’s product archive widgets and show you how to use them to create an eye-grabbing WooCommerce shop page.
Here’s a quick index to help you navigate this article:
Let’s get started.
Create a WooCommerce Shop Page With Elementor
After creating a single product page template, it’s time to create a product archive template. In this tutorial, we are going to create a dazzling WooCommerce shop page using the Elementor theme builder.
If you are new to Elementor, then our recommendation is to read this article first to get started with Elementor. You will find more Elementor tutorials on our website to gain in-depth knowledge of Elementor.
We will follow these three steps to create a shop page:
- Insert an Elementor product archive template.
- Design your WooCommerce shop page.
- Publish your design.
1. Insert an Elementor Product Archive Template
Elementor has a vast template library. If you don’t have much desire to design a template from scratch, then Elementor becomes an essential tool to create a website.
To get started with Elementor, first, log in to your WordPress dashboard. After this, go to Templates > Theme Builder. Now head over to the ‘Product Archive’ tab.
Once you click on this tab, you’ll see a button prompt you to add a new product archive. Simply click on the ‘Add New Product Archive’ button.
This will create a new popup to determine some information. You have to choose ‘Product Archive’ from the first box. Then, if you want, you can give your template a name.
We have chosen ‘My product archive’ as the name for our template. Lastly, click on the ‘Create Template’ button.
When you click on the ‘Create Template’ button, it will take you to the Elementor template library.
Currently, Elementor provides a total of three product archive templates for us. All of these templates are very professional-looking, lightweight, and user friendly. More templates will be added later.
We are going to choose the third template for our tutorial. You can choose any template that you like and meets your requirements.
To view the template properly in large size, just move your mouse cursor over a template. You will see a ‘+’ icon to enlarge the template. Simply click on the ‘+’ icon to get a large view.
If you liked it, simply click on the ‘Insert’ button to add this template to your website.
2. Design Your WooCommerce Shop Page
If you need to, you can redesign the template. To learn how to design an Elementor template, check out this Elementor tutorial.
Elementor has a huge number of widgets to help you build a website. There are some WooCommerce specific product archive widgets as well, which will be needed to create a WooCommerce shop page with Elementor.
Let’s discuss these specific widgets so that you can know which widgets you should use to design a WooCommerce shop page.
Control the design of your WooCommerce archive title and set the layout.
Using this widget, you can show all of your products on the shop page and sort them by default settings, popularity, ratings, latest, price, etc.
You can show the archive description within the product archive template and set its alignment.
This widget will let you display your store’s products on any page of your site.
Breadcrumbs help you to know where you are on a website. Simply, it shows you the location of you on a website.
Custom Add to Cart
This is a very important widget for an eCommerce store. Add an ‘Add to Cart’ button to a specific product anywhere on your website and design it as you like.
This widget allows you to display WooCommerce pages (Single product page, cart page, checkout page, my account page, etc.)
You can display a grid of WooCommerce product categories anywhere on a website using his widget.
You can add a menu cart widget anywhere on your website. It will help users to view their cart without leaving the current page. When a user clicks on the menu cart icon, a popup will open with their cart details.
When you are satisfied with your template design, click on the publish button.
3. Publish Your Design
After clicking the ‘Publish’ button, a popup will appear on your screen prompting you to add some conditions.
First, you need to click on the ‘Add Condition’ button.
Next, you need to add the main condition. As we will create a shop page, select the ‘Shop Page’ option from the drop-down menu.
You will also find several options here to add this design to all archive pages, search results, product categories, or product tags.
Lastly, click on the ‘Save & Close’ button to finish the entire process.
Here is our WooCommerce shop page.
That’s it. You have successfully created your WooCommerce shop page.
Conclusion: How to Create a WooCommerce Shop Page With Elementor
Creating a WooCommerce shop page with Elementor is easy in three quick steps:
- Find a suitable Elementor product archive template and redesign it to meet your needs and match your entire website.
- Use Elementor’s product archive widgets to build your WooCommerce shop page.
- Hit publish and select where you would want to add your design
Like all our straightforward Elementor tutorials, this guide will give you control over your website’s design.
You can add or remove features to provide your visitors with an easier time on your online store and make it attractive. And all this is possible without having any tech skills.
Check out our Elementor Pro Discount to get an exclusive discount on Elementor now.
If you have any questions, do not hesitate to contact us.
Read Other Elementor Tutorials:
- How to Get Started With Elementor
- Elementor Pro Discount
- Elementor vs Elementor Pro
- How to Use the Elementor Free Page Builder
- How to Use the Elementor Theme Builder
- How to Add a Popup With Elementor
- How to Create a Login Form Popup With Elementor
- How to Create a 404 Web Page With Elementor
- How to Create a Mega Menu WIth Elementor
- Create a Cookie Consent Popup Using Elementor
- How to Create a Subscribe Form Popup With Elementor
- How to Set Up Important WooCommerce Pages With Elementor