How to Edit WooCommerce Shop Page With Elementor?

Ecommerce is one of the most popular money-making channels today and for good reason. It allows businesses to sell products and services online without any brick-and-mortar locations. If you’re planning to start an online store, then you’ll need to choose the right platform.

One of the most popular platforms for ecommerce websites is WooCommerce. WooCommerce is a WordPress plugin that turns your WordPress website into a fully-functional online store. It’s highly customizable and there are plenty of themes and plugins available to make it look exactly the way you want.

Add Elementor on top of that, and you have a powerful combination that allows you to create a beautiful online store without any coding knowledge. In this article, we’ll show you how to edit your WooCommerce shop page with Elementor.

Why Are Elementor And Woocommerce Dynamic Duo?

WooCommerce is already a great platform for creating online stores but Elementor makes it even better. With Elementor, you can customize every aspect of your WooCommerce shop page without having to touch a single line of code.

Not only that, but you can also use Elementor’s powerful drag and drop builder to create custom product pages, checkout pages, and more. This gives you complete control over the look and feel of your online store.


With all that in mind, t’s no wonder that so many people are using Elementor with WooCommerce to create beautiful online stores.

Should You Get Elementor Pro?

While the free version is good enough for beginners, we don’t have a feeling you are one, so… Yeah, you probably should.

Elementor Pro is a paid plugin that adds additional features and templates to Elementor. It’s not required to use Elementor with WooCommerce but it does make things easier.

With Elementor Pro, you can access WooCommerce-specific widgets, themes, and templates that make it easy to add products, checkout forms, and more to your pages. You’ll also get access to additional Elementor features like popups, form builder, and more.

If you’re serious about creating a professional online store with WordPress, then we recommend investing in Elementor Pro.

Now that we’ve got that out of the way, let’s take a look at how to create and edit your WooCommerce shop page with Elementor.

How To Create A Page?


First, you’ll start by creating a WooCommerce Shop page. This should be fairly easy.

You’ll start by creating a product archive with Elementor. This can be done by going to Templates/Saved Templates. Once you choose yours – click Add New.

After that, you’ll just have to select the type of element, in this case, Product Archive, and give it an appropriate name. Once you’re done christening it, just press Create Template and move on with editing and customization with the all-powerful Elementor.

How To Edit Your Products Page With Elementor?

One of the greatest things about this mighty drag-and-drop builder is that you don’t ever have to start from scratch. There are tons or presets and fully optimized Archives blocks that you can, later on, tailor to your taste.

All of them can be found in the Blocks tab, easily accessible once you click on the folder icon in the middle of your screen (Drag widget section). Once you click, you’ll be greeted with pre-made blocks you can search through until you find the one you like.

Once you do – just click the green Insert button in the top right corner and voila – you’ve got yourself a product page.

But, all of this is pretty much just stock at this point. How do you go further? What about widgets or WooCommerce adding products by end users?

Well, let’s check them out, too.

How To Add Widgets?

Widgets are a great way to add additional information and fields to your products. You can use them to display things like stock levels, pricing, shipping information, and more.

Adding widgets to your product pages is easy with Elementor. Just drag and drop the widget into the section where you want it to appear. That’s all there is to it. It’s all fairly intuitive. You’ll find all these widgets in the left-side panel, so just browse. Try it, tinker with it and see where it takes you.

There are plenty of WooCommerce-specific widgets available in Elementor Pro that make it easy to add products, checkout forms, and more to your pages – you just need to give it a try.

Woocommerce User Frontend Pro – Why Do You Need It?

To add products WooCommerce websites usually require back end access. Well, the WUPF, or WooCommerce User Frontend Pro, found in the Booster all-in-one toolkit, allows for WooCommerce user products submission forms to your website. In other words, your users can submit products from the front end of your site without having to access the backend WordPress dashboard and sell through your platform. Neat, isn’t it? For additional info check

The WooCommerce User Frontend Pro plugin includes a variety of features that make it easy to create frontend product submission forms, such as:

  • Drag and drop form builder
  • Customizable product fields
  • Built-in file uploader
  • Support for multiple product images
  • Ability to set user roles and permissions


And much more…

But, why would you ever want this?

Well, allowing a WooCommerce user add product to your page can increase the number of products on your website, making it more likely that visitors will find what they’re looking for – and buy it.

It’s also a great way to encourage user-generated content and build a community around your brand.

If you’re looking for a way to take your WooCommerce site to the next level, then the WooCommerce User Frontend Pro plugin is definitely worth considering.

In Conclusion

Creating and editing your WooCommerce shop page with Elementor is easy and fun. There are plenty of options available to you, so don’t be afraid to experiment. And, if you want to take things to the next level, then consider investing in the WooCommerce User Frontend Pro plugin. It’s a great way to increase the number of products on your site and build a community around your brand.