How to Create Your Own Elementor WooCommerce Shop Page
In the online world, you can become a shop owner in no time. All you need to start is an Internet connection, a laptop, and a lucrative business idea. You don’t even need to have a tangible product – you can sell ideas! Jokes aside – you can set up an amazing webshop pretty easily even if you have no technical knowledge whatsoever. You can start by picking a quality WooCommerce theme as niche-specific themes typically include lots of practical and useful features that your shop is going to need, and then proceed to set up a business plan!
There are many great elements that you can use to make your webshop more successful, and having a bespoke Elementor WooCommerce shop page is essential.
In this article, we will show you how to create your own, beautiful Elementor WooCommerce shop page effortlessly. Stay tuned to read more about:
We know very well that creating a webshop includes specific elements that are necessary for the user to have all the relevant information about the product. Every shop will have pages that present a product or group of products in a certain way, and these well-designed pages lead you a step closer to a successful webshop. Other pages that are important for the shop are those with information about delivery, payment, the company, cart pages, and the like.
Here we will deal with pages that display lists of products available in the shop and we will help you create them just like a professional.
Elementor WooCommerce Shop page is an archive page where all the products of one shop are displayed. You can easily create this page with the WooCommerce plugin. After you have added products to your site, you need to open the page without any content on it, and in the WooCommerce settings indicate that the page is your Shop page.
What have we got this way? We have informed WooCommerce that we have dedicated this page to the archive page for all products and WooCommerce will display them accordingly. As for the styling of the product on that page, it largely depends on the theme you choose. If the theme is suitable for stores, you can expect it to look good right away and maybe have some filters. But, in case it doesn’t there are ways to edit the WooCommerce shop page with free Elementor.
But what if not everything is perfect and what if something needs to be fixed? This creates a problem for those who do not know how to edit the code itself. Of course, we have a solution. If for any reason you think the default page seems inappropriate below, we’ll show you how to customize it.
There’s another thing you can add to improve the UX of your online shop and boost conversions and thats adding a wishlist feature. This is best done via a plugin, such as the remarkable QODE Wishlist for WooCommerce. With the free version you can simply add an Add to Wishlist button to your product lists and style it to fit your aesthetics, and with the premium one you can really go crazy – you can allow multiple wishlists (private, public or by link only) and enjoy advanced options like requiring login for creating wishlists, sending promotional email campaigns, tracking user behavior, enabling item removal after adding to cart and so much more.
Qi shop widgets as a part of a Qi Addons for Elementor are stylish widgets that blend perfectly with the style of your website, as they adjust to the theme that you use by default. But, they also offer plenty of customization options so you can style them further as per your wish.
To create the desired shop page you need:
- To enter the desired products (of course their categories and tags if necessary)
- To you have the free Elementor page builder installed
- To have Qi Addons for Elementor installed (we’ll show you what you can do for free and what you can get with premium widgets).
Now, let’s explain this. Of course, you can’t make a shop page without a product, so that’s the first step. As for Qi Addons, we choose it for several reasons. The first is that it has a widget for creating product lists, and the second is that it also offers many other useful widgets that you can use on your site.
We will create a new page first. Mine will be called a Custom shop page just for example, but you can simply call it a Shop.
It is added like any other. I enter the page name, save it and go to Edit with Elementor. Of course, depending on the theme, before you switch to Elementor from the Block editor, you can make basic settings for the page itself. In the example, I use the Qi theme, which is often my choice because it contains a large number of settings for various parts of the site, which means a lot to me because I do not have to change the code and I have many options for styling various parts of the site.
When you enter the Elementor, the first thing to do is to find product widgets by typing ‘search’ in the search field. You will recognize Qi widgets by their inherent red icons.
Perhaps the most important to us is the Product List, which allows us to display a list of products – all or products selected based on given criteria. This is a free widget.
And let’s not forget the others. Product Category List serves to show the categories of our shop, it is also free. Product Slider widget offers an interesting way to display products using sliders, it is also free. Product Comparison helps us to display selected products and compare their features – this is a premium widget. In case you use the Qi theme you will also have Product List Essentials which offers a way for displaying product lists of certain theme demos so we will not focus on it.
As I said Product List is the most important widget for me and I am adding it to the page.
As you already know, when you add widgets on the page, you’ll find its settings on the left, and on the right, you can see live how the widget will look on your page.
The General and Style tabs are linked to the widget itself while the Advanced tab is in the Elementor’s tab settings and is already familiar to you if you have ever added a widget to a page. In any case, Elementor is so easy to use that you will not need special explanations, especially for this widget where everything is intuitive and easy to navigate.
Why do we like the Qi Addons widget? Because we can determine for ourselves how many columns we want the list to have, we can manage the space between items ourselves. We can determine the size of the images, we can choose how many products will be on our page, whether we will use pagination, and what kind, if we have more than one product page. Qi goes into detail even with font choices and hover settings. There are multiple layouts for lists. We can also display only products of a certain category, tag, author and different display criteria are available. With Qi, adding widgets often turns into a joyous, creative process and we are sure you will be curious to explore the abundance of the options it comes with on your own.
At first glance at the Style tab, you will be amazed at how detailed the settings are. You will see that the stylization is divided into categories making it easier to navigate.
Other widgets are used in pretty much the same way. Feel free to play, and experiment as all the changes you make will be visible in real time and you can easily undo any move.
You can always look for inspiration on the landing page of the widget with the author if you are wondering how to style your list, but again, play.
A great addition to your shop page can also be the Slider widget. It can make the page look more dynamic and interactive, an element that is moving always attracts the user’s attention, especially when he can interact with it.
The combination of the Product list widget and the Product Slider widget can be very interesting.
Also, another widget that I like to use on the shop page and on others is the Product Category List. It serves to show certain categories in an interesting way and help users reach a group of products that interest them.
Product comparison widget is also very interesting, and useful especially since the shoppers nowadays like to make informed decisions about shopping and love to compare products to make sure they are making the best choice. Adding WooCommerce product comparison is also very easy and can be done without any special technical or coding knowledge.
In Conclusion
As you can see, creating Elementor WooCommerce shop page is no rocket science and you can do it all by yourself. You can also easily learn how to edit WooCommerce shop page too, and adjust it to fit your needs perfectly. Should you have any questions related to the topic of this article, feel free to reach out to us in the comment section. We look forward to hearing about your experiences with Qi Addons for Elementor!
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
