Would you like to learn how to create a personalized store page? WooCommerce with Elementor?

As you may know, Elementor Pro comes with builder feature WooCommerce Which allows you to create a website of personalized e-Commerce with WooCommerce without coding. This feature allows you to create custom WooCommerce pages using Elementor's visual editor which offers an intuitive interface.

See also: How to install Elementor on WordPress

At the time of writing this article, you can create custom pages for the store page, product page, and product archive pages (tags and categories). Soon you will also be able to create custom pages for the checkout page and the cart page.

In this article, we'll show you how to create a custom WooCommerce store page using Elementor Pro's WooCommerce builder feature.

The shop page itself is one of the default pages in WooCommerce. This page acts as a showcase to display your products. You can access this page by going to yoursite.com/store. By default, the WooCommerce store page only displays WooCommerce products.

By creating a custom store page using Elementor Pro, you can add elements to make your storefront more attractive.

How to create a custom page of a WooCommerce store with Elementor

There are at least two Elementor widgets that you can use to create a custom page of a WooCommerce store: Archive Products and Products.

In this example, we use the latter.

The function of the widget Products is quite similar to that of the widget posts. The difference is that the Products widget is used to display WooCommerce products while the Posts widget is used to display blog posts.

Read also: How to import or export models in Elementor

Please note that you can only find the Products widget when the WooCommerce plugin is installed and activated.

To start creating a custom WooCommerce store page using Elementor Pro, go to first à Templates -> Theme Builder on your WordPress dashboard. Click on the tab Products Archive of the Theme Builder page, then click on the button add a PRODUCTS ARCHIVE.

Give your model a name and click on the button CREATE A MODEL.

how to create custom page for a WooCommerce store with Elementor

There are three custom shop page templates you can choose from in case you want to create the custom shop page from a template. If you want to build the custom shop page from scratch, you can just close the template library.

See also: How to use the Color Sampler in Elementor

In this example, we'll create the custom store page from scratch. As mentioned above, we will be using the Products widget to display the products.

Before adding the Products widget to the edit box, you can define the layout by adding sections and columns. Once the layout is ready, you can simply drag the Products widget into the edit box.

As you can see, the Products widget automatically loads and displays the latest WooCommerce products. You can modify the query by opening the block Query under the tab Contents from the settings panel. There are five options to choose from:

  • Current Query - Current Query
  • Latest Products - Latest Products
  • Sale - Sale
  • Featured - Featured
  • Manual Selection - Manual Selection

You can also set the order in which the products are displayed or exclude certain

how to create custom page for a WooCommerce store with Elementor

To set the number of columns and rows, you can open the block Content under the tab Content. From this block you can also activate the pagination.

You can play around with the settings panel until you get the best settings for the Products widget. Once you are done with the Products widget, you can add more widgets to your page.

Read also: How to use the color picker in Elementor

Once you are done editing the page, you can click the button PUBLISH at the bottom of the settings panel.

Add a display condition by clicking on the button add a condition. Since you want to create a custom store page, select the option Shop Page. Click on the button SAVE & CLOSE to save the change.

how to create custom page for a WooCommerce store with Elementor

So far, you have successfully created the custom WooCommerce store page using Elementor Pro. You can go at your site.com/store to check the result.

Customize the Products widget

Before publishing your page, you can customize the Products widget to make it more attractive. To do so, click on the widget in the edit box and navigate to the tab Style from the settings panel. There are four blocks you can open as follows:

  • Products

You can open this block to define the gap between columns and rows. From this block you can also set the typography (font family, font size, etc.) as well as the text color of product elements such as product title, product price, rating of product. product, etc…. You can also set the border of the product image,

  • Box

In this context, Box refers to the container of each product. You can open the block Box to define the border width of the container, the border radius, shadow of the box, the background color, the border color, etc.

  • Pagination

If you activate the option Pagination from the block Happy, you can open the block Pagination under the tab Style to customize the pagination. You can set things like spacing, border color, background color, etc.

You can also define different parameters on each state (normal, pointing and active).

  • Flash Rooms

When you add a new product in WooCommerce, you can set a sale price attribute to show your visitors that the associated product is discounted. To emphasize this, you can display the sale attribute on the store page so that discounted products have a sale badge.

You can open the block Flash Rooms to personalize the sale badge. You can define elements such as text color, background color, typography, border radius, size (width and height), distance, etc….

Ultimately

WooCommerce Builder is one of the features offered by Elementor Pro. It allows you to create a website personalized and unique e-commerce platform with WooCommerce and without coding. No need to install a WordPress theme which claims to be designed for WooCommerce. Instead, you can create custom WooCommerce pages yourself using Elementor's visual editor.

Read also: How to add divider to create section in Elementor

Up to version 3.2.2, Elementor Pro only allows you to create Custom Shop Page, Custom Single Product Page, and Custom Product Archive Pages. But Elementor announced that on the next version of Elementor Pro, you will also be able to create a custom cart page, a custom checkout page, and a custom customer account page.

Get Elementor Pro Now!

Conclusion

Here ! That's it for this article that shows you how to create a custom page for a WooCommerce store with Elementor. If you have any concerns on how to get there flet us know in the Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...