How to Use Elementor WooCommerce Builder

In this Elementor WooCommerce Builder tutorial, you will learn how to build an e-commerce store with WooCommerce and adjust the design in Elementor.

WooCommerce is a free, open-source, fully customizable plugin for WordPress that adds e-commerce functionality to your website. At the moment, WooCommerce is the most popular WordPress e-commerce plugin. And ever since its inception, WooCommerce has experienced a steady incline in popularity and shows no signs of losing its market share. Thus, it is instrumental to understand the inner workings of the plugin and how the e-commerce content has been integrated into Elementor.

1. Why Should You Use WooCommerce?

In WordPress development, it’s essential to understand the capabilities and limitations of the plugins you choose. Knowing what a plugin can and cannot do helps you plan better and avoid unexpected roadblocks while building a WordPress website. When it comes to ecommerce, WooCommerce plugin stands out for its flexibility, robust feature set, and seamless integration with WordPress. This makes it a top choice for building online stores.

Low Entry Cost

One of WooCommerce’s biggest advantages is that it’s free to use. You can set up a fully functional online store without upfront costs. While some advanced features require paid extensions, the overall cost is still lower than most proprietary ecommerce platforms. Keep this in mind, you’ll still need to budget for essentials like hosting, domain, WooCommerce themes, and payment fees, but the core platform for ecommerce functionality, along with Elementor’s free version, keeps startup costs minimal.

Feature-rich

You can sell everything with a WooCommerce store, be it physical products, digital products, or anything in-between. Any type of variation can be adjusted to your needs; colors, sizes, attributes, grouped products, et cetera. Also, every product can be created according to your specifications, not to mention that there is a no limit to the amount of products you can create.

Developer Friendly

WooCommerce is fully open-source, which means developers can contribute to its ongoing improvement if they choose. As a result, WooCommerce integration with most WordPress themes is seamless, and it works well with Elementor. Additionally, WooCommerce offers its own API, which undergoes regular security reviews to ensure safe and reliable performance. To support users further, their official website provides extensive documentation and resources for both beginners and developers.

Loads of Extensions

WooCommerce offers a wide range of official extensions and new ones are added regularly. Whether you need features like memberships, subscriptions, advanced payment gateways, or integrations with shipping providers, there’s likely an extension that fits your needs. Moreover, these extensions are easy to browse and install, making it simple to enhance your store’s functionality as it grows.

Learn about: How to Convert HTML File to a WordPress Theme

2. Setting Up Your Store with Elementor WooCommerce Builder

For the sake of this tutorial, we will skip the install WooCommerce setup and product addition. You can take a look at our previous article in order to get familiar with WooCommerce and its features.

Setting Up a Single WooCommerce Product Page in Elementor

Keep in mind that customizing pages for WooCommerce in Elementor is only possible for Elementor Pro users. Otherwise, you will not be able to use the Theme Builder and get access to the WooCommerce widgets. You can check out our article about the core differences between the free and the pro versions.

• Step 1: You need to create a Single Product template in Elementor’s Theme Builder. Locate the Templates menu bar in your WordPress dashboard. Click on it, and a dropdown menu will appear. Choose the Theme Builder. 

Take a note, that the option for creating templates for WooCommerce pages will only be available if you have activated the plugin.

• Step 2: Click on the Add New button and create a Single Product template.

As you can see, Elementor offers you to pick a pre-made template or import one if need be. The Elementor templates are a useful e-commerce design example for beginners, but you will probably want to create one from scratch.

• Step 3: Construct the product page according to your designs specifications. Elementor Pro has provided us with fully customizable WooCommerce widgets. You can create almost any layout you want with the aforementioned tools.

Take into consideration that you should have at least a few example products with their required fields filled. It will immensely help you when previewing your new product page, as you will be able to see how your design looks on an actual product.

• Step 4: Publish the page. The Publish button is located at the bottom right corner of the widget sidebar. Now, you will need to set the conditions that will determine how and where your new template will be used on the website.

By adding new conditions and using the Include and Exclude features you can set up any scenario possible and display your template precisely where you want to. When you are done, then click on the Save & Close button and see the fruits of your labor for yourself.

3. Setting Up a WooCommerce Shop Page

Now, that your single product page has been developed, we can continue with the shop page.

During the installation, WooCommerce will always create a new page called Shop. Even though we can create a new template just as we did with the single product page, we should first take a look at what can be achieved via the WordPress Customizer.

As you can see, there are options available for every WooCommerce element. You will be able to modify certain aspects of the WooCommerce layout. Unfortunately, without additional plugins, the capability to edit typographical elements and the sort is not present.

Regardless, let us take a quick peek at the available options:

• Store Notice: Enable/disable a sitewide announcement for visitors.
• General: Choose whether or not to display the Cart Title and Cart Total.
• Product Catalog: Regulate what kind of content will be displayed in the store, adjust categories, and set how the products will be sorted. Content width as well as the number of product columns can be adjusted to your needs and the structure of product windows can be altered.
• Single Product: Enable/disable breadcrumbs
• Product Images: Define the width of the main product image and thumbnail. Choose how to crop the thumbnail.
• Cart: Enable/disable cross-sells.
• Checkout: Change the content appearance and pick what fields are mandatory. Set dedicated pages for Privacy Policy and Terms and Conditions and add a statement about them that displays during the checkout.

The options in the customizer are limited, especially, when it comes to the design. Thankfully, Theme Builder allows us to modify the shop page further. In a similar manner as previously with the single product template, we can re-design the shop page.

4. WooCommerce Shop and Products Archive Template

In essence, creating a shop template works almost the same as creating one for a single product. Instead of creating a Single Product template in Elementors Theme Builder, you will need to create a Products Archive pages template.

Elementor has provided its users with specific widgets for the WooCommerce shop. As you can see, single product widgets are available too. Besides, you can use any widget you wish and then display the required output via the dynamic content (dynamic tags) feature.

Now, you have finished designing the shop page and it is time to publish the page and set the conditions accordingly. Elementor allows setting the Product Archive template as the dedicated shop page, instead of the default WooCommerce one.

By all means, you can use the template in various places and add additional conditions. Keep in mind that the Product Archive template customizes only the segment of the page where products are displayed. If you want to change the design of other elements of your shop page, then you will need to modify your WordPress theme.

5. WooCommerce Checkout and Cart in Elementor

Previously we covered how checkout and cart can be modified via the WordPress Customizer. Unlike with a single product page and shop page, cart and checkout pages can be created like any other page in Elementor. There is a shortcoming though.

WooCommerce features can only be added through the use of shortcodes and several widgets. You can adjust the design for every other element outside the aforementioned ones, but beyond that, there are not many options available that do not involve some coding.

Elementor has a shortcode widget with which you can apply the cart or checkout on your page. Decide where you want to display it and then insert the shortcodes for checkout and cart respectively.

After finishing the design and publishing the page, you will need to define this page as your checkout or cart page in the settings. Locate the WooCommerce menu bar in your dashboard and go to Settings, then Advanced. Under the Page Setup, you can set the pages according to your needs.

6. WooCommerce and Elementor Popups

Popups are a fundamental part of the e-commerce world. As a fact, a properly designed and intelligently placed popup can lead to a direct increase in sales. Information, otherwise lost in the flow of the site or skipped over by the visitor, can be presented as a popup, thus increasing the awareness of the content.

Bear in mind that Google penalizes websites with an absurd number of popups, so it is imperative to implement popups smartly.

Types of Popups in WooCommerce

• E-mail list: Probably the most overused popup on the web altogether. In e-commerce, it is an efficient way of building a solid clientele. Having a large number of subscribers that are constantly alerted to new discounts, sales, etc. can only increase the traffic on your website.

• Aid the Visitor: Clients can be rather picky and, sometimes, not even know what they desire. Popups are of great help in helping them decide. Popup can guide the visitor to similar products, inform them about sales and discounts or point out any information necessary.

• Customer Surveys: Feedback is a valuable instrument in creating a stable business model. You can collect information about your products, websites design, or any other data connected with your online store.

• Sales and Discounts: If a planned sale is just around the corner, you can inform visitors with a popup. Or, if an ongoing sale is taking place, then you can notify new visitors about the special offers. Sale and discount popups are a great way to make the visitor browse your page. Other elements, for instance, time limit, can help create a sense of urgency to take advantage of the discount.

• Shopping Cart: Popups are a great tool to keep customers from abandoning their shopping carts. A great example would be a case when a page exit intent has been detected. It will only be shown to visitors who have placed items in the cart but have not bought anything yet.

There are almost limitless applications to e-commerce popups, these are just one of the more popular types of popups. Adjust the popup design according to your online store’s content and do not forget the message that you want to display.

Which is Best: Ceros vs WordPress

Elementor and Popups

You can easily design popups for WooCommerce related pages on Elementor. Even though popups are created the same way as any other template page, they are located in their own menu sub-section.

Click on the Add New button and either choose a pre-made template or design one from scratch. Make sure that your message is clear and concise. Do not forget about the tablet and mobile versions.

The core difference between a popup template and any other template is how it can be displayed. There are 3 sets of settings available: Conditions, Triggers, and Advanced Rules.

• Conditions are set in the same manner as previously by choosing where on your website specifically will the popup be applied to.

• Triggers regulate what action will prompt the popup to appear. Take time to consider what triggers will increase the effectiveness of your popup.

• Advanced Rules lets you decide what requirements need to be met for the popup to appear. As you can see, there are numerous settings for you to play around with.

Your popup has finally been finished and published. All you have left to do is reap the fruits of your labor. Be mindful of how you implement your popups. No popup is better than a badly designed one!

Simple Methods: How to Push Staging Site to Live

Final Words

Over the years, e-commerce has established a strong presence within the WordPress ecosystem. Plugins like WooCommerce have gradually become essential tools in WordPress web development. When paired with the powerful Elementor page builder, you gain complete control over the design and placement of WooCommerce content across your site.

While the free version of WooCommerce has limitations, you can easily extend its functionality with free and premium plugins. Thanks to its low entry cost and impressive feature set, WooCommerce continues to grow in popularity, attracting more WordPress users each year.

As you begin building your online store, we hope you enjoy the process and make the most of the tools available.

Elementor WooCommerce Builder FAQs