Would you like to learn how to create a custom page for a WooCommerce store with Elementor?
As you may know, Elementor Pro comes with a WooCommerce builder feature that allows you to build a custom e-Commerce website with WooCommerce without coding. This feature allows you to create custom WooCommerce pages using Elementor’s visual editor which offers an intuitive interface.
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 your site.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 Products widget is quite similar to that of the Posts widget. The difference is that the Products widget is used to display WooCommerce products while the Posts widget is used to display blog posts.
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, first, navigate to Templates -> Theme Builder on your WordPress dashboard. Click on the Products Archive tab of the Theme Builder page, then click on the add a PRODUCTS ARCHIVE button.
Give your template a name and click on the CREATE TEMPLATE button.
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.
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 edit the query by opening the Query block under the Content tab of 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
To set the number of columns and rows, you can open the Content block under the Content tab. From this block, you can also enable 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.
Once you are done editing the page, you can click the PUBLISH button at the bottom of the settings panel.
Add a display condition by clicking the Add condition button. Since you want to create a custom shop page, select the Shop Page option. Click the SAVE & CLOSE button to save the change.
So far, you have successfully created the custom WooCommerce store page using Elementor Pro. You can go to 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 go to the Style tab of the settings panel. There are four blocks you can open as follows:
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 the product. product, etc…. You can also set the border of the product image,
In this context, Box refers to the container of each product. You can open the Box block to set the container border width, border radius, box-shadow, background color, border color, etc.
If you enable the Pagination option from the Content block, you can open the Pagination block under the Style tab 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).
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 Sale Flash block to customize the sale badge. You can define elements such as text color, background color, typography, border-radius, size (width and height), distance, etc….
WooCommerce Builder is one of the features offered by Elementor Pro. It allows you to build a personalized and unique eCommerce website with WooCommerce and no coding. No need to install a WordPress theme that claims to be designed for WooCommerce. Instead, you can create custom WooCommerce pages yourself using Elementor’s visual editor.
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.
For website maintenance service contact us.