As you might have known. Elementor Pro comes with a WooCommerce builder feature that allows you to create a customized e-commerce website with WooCommerce without coding. The feature allows you to create custom WooCommerce pages using Elementor visual editor which offers an intuitive interface. At the time of writing (June 8, 2021), you can create custom pages for the shop page, single product page, and product archive pages (tags and categories). Soon, you will be able to create custom pages for the checkout page and cart page as well. In this article, we will show you how to create a custom WooCommerce shop page using the WooCommerce builder feature of Elementor Pro.
Shop page itself is one of the default pages of WooCommerce. The page plays a role as a storefront to display your products. You can access the page by going to yoursite.com/shop. By default, the WooCommerce shop page only display the WooCommerce products. Creating a custom shop page using Elementor Pro, you can add elements to make your storefront more compelling.
How to Create a Custom WooCommerce Shop Page with Elementor
There are at least two Elementor widgets that you can use to create a custom WooCommerce shop page: Archive Products and Products. In this example, we use latter one.
The function of the Products widget is pretty similar to 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 you have the WooCommerce plugin installed and activated.
To start creating a custom WooCommerce shop page using Elementor Pro, first, go to Templates -> Theme Builder on your WordPress dashboard. Click the Products Archive tab on the Theme Builder page and click the ADD NEW PRODUCTS ARCHIVE button.
Give your template a name and click the CREATE TEMPLATE button.
There are three premade custom shop page templates you can choose from in case you want to create the custom shop page from a premade template. If you want to create the custom shop page from scratch instead, you can simply close the templates library. In this example, we will create the custom shop page from a scratch. As mentioned earlier above, we will use the Products widget to display the products.
Before adding the Products widget to the canvas area, you can set the layout by adding sections and columns. If you are new to Elementor, you can read our previous article to learn how to use it. Once the layout is ready, you can simply drag the Products widget to the canvas area.
As you can see, the Products widget automatically loads and displays the latest WooCommerce products. You can change the query by opening the Query block under the Content tab on the settings panel. There are five query options you can choose from:
- Current query
- Latest products
- Manual selection
You can also set the product order or exclude certain products.
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 the pagination.
You can play around with the settings panel until you get the best settings of the Products widget. Once you are done with the Products widget, you can add other widgets to your page.
Once you are done editing the page, you can click the PUBLISH button on the bottom side 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.
Until here, you have successfully created the custom WooCommerce shop page using Elementor Pro. You can go to yoursite.com/shop to check the result.
Styling Up the Products Widget
Before you publish your page, you can style up the Products widget to make it more compelling. To style up the Products widget, click the widget on the canvas area and go to the Style tab on the settings panel. There are four blocks you can open as follows:
You can open this block to set the gap between columns and rows. From this block, you can also set the typography (font family, font size, and so on) as well as the text color of the product elements like product title, product price, product rating, and so on. You can also set the border of the product image,
In this context, Box refers to container of each product. You can open the Box block to set the border width of the container, border radius, box shadow, background color, border color, and so on.
If you enable the Pagination option from the Content block, you can open the Pagination block on the Style tab to style up the pagination. You can set things like spacing, border color, background color, and so on. You can set different settings on each state (normal, hover, and active).
- Sale Flash
When adding a new product in WooCommerce, you can set a sale price attribute to show your visitors that the associated product is being discounted. To emphasize it, you can display the sale attribute on the shop page so that the discounted products will have a sale badge. You can open the Sale Flash block to style up the sale badge. You can set things like text color, background color, typography, border radius, size (width and height), distance, and so on.
The Bottom Line
WooCommerce builder is one of the features offered by Elementor Pro. The feature allows you to create a customized, unique e-commerce website with WooCommerce without coding. No need to install a WordPress theme that claims itself designed for WooCommerce. Instead, you can create custom WooCommerce pages yourself using the visual editor of Elementor.
Until 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 has announced that on the next release of Elementor Pro, you will be able to create custom cart page, custom checkout page, and custom customer’s account page as well.
JetWooBuilder is another option to create a custom WooCommerce website with Elementor. You can read our previous article to learn the features offered by JetWooBuilder and Elementor WooCommerce Builder.