How to Create and Customize a WooCommerce Store with Elementor

In this tutorial we are going to see how we can create the main page of our store with WooCommerce and Elementor Pro to our liking.

Common mistake with Elementor and WooCommerce

If you have launched directly to edit the page of your store with WooCommerce, it is very likely that you will get this error and you will not know how to get out of it:

Sorry, the content area for your page was not found.

You must call the 'the_content_' function in the current template, so that Elementor can work on this page.

And we have no choice but to click the button return

Have you encountered this situation? Don't worry we will solve it 😉

The error that the visual builder gives us in the WooCommerce page is due to the fact that WooCommerce itself treats the shop page in a special way and does not allow any external plugin to touch it directly.

If you want to know more about this problem they explain it here.

Create a template with Elementor to solve the problem

In order for WooCommerce not to wage war, what we have to do is first create a template with Elementor and then tell it to be used exclusively on the Shop page through the conditions that Elementor allows us to add. What a great invention 🙂

How do we do this? Very simple, let's do it 😉

Let's go to Elementor —> my templates —> product Archive —> Add New

In add new template select us automatically Product Archive and give it a name:

Now we can choose between a predefined template or make it to our liking.

This time I am going to choose one of the templates:

Once the template is selected, we can modify what we want, with the advantage that we can visually see how it looks:

When we have the page to our liking, we click on publish and here comes the most important part add conditions o add condition

In our case we are going to tell you to take into account this template for the store page

And voila, from now on if you go to the store page you will already have the new design without errors or problems 🙂

If you prefer to see the entire process on video, here is the video tutorial to see the entire process in detail.

I hope it has been useful to you 😉