Combining Elementor and WooCommerce For An Amazing Online Store

In this article, we'll do a step-by-step run through on how to build a WooCommerce store using Accept's Elementor WooCommerce Builder, to give you full control over your shop and product page designs.

What are Elementor and WooCommerce?

To kick things off, in case you didn’t know, here’s a quick rundown of what Elementor and WooCommerce are.

Elementor Pro

Elementor Pro is an easy-to-use webpage builder, provided for free with every Accept Pay card payments plan.

It lets you create an amazingly beautiful website in the quickest way possible. You can reach a high level of design by designing live, and on the frontend of your WordPress site.


WooCommerce is a free WordPress plugin that incorporates eCommerce capabilities for your site so you can have an online store. It integrates easily with your existing WordPress site, allowing you to create customizable stores in minutes, receive secure payments using Accept Pay, configurable shipping options, and much more.

How Elementor WooCommerce Builder Helps You Create an eCommerce Store

The Elementor Pro plugin allows you to design your WordPress content using a visual, drag-and-drop interface.

You can use widgets to add content to your site and control nearly every aspect of your designs’ layouts and styles.

You also get access to Elementor WooCommerce Builder, which lets you design dynamic templates for your product archive and single product pages using the same visual editor.

With WooCommerce Builder, you can easily build an entirely custom WooCommerce store without ever needing to work directly with PHP template files or WooCommerce hooks.

Advantages of Using Elementor WooCommerce Builder

  • Visual, drag-and-drop design:You can design your WooCommerce store precisely as your visitors will see it. You can even preview different products to see how they look with your designs.
  • No PHP/code: Rather than working directly with PHP and/or template files, you can design everything from the Elementor interface.
  • Dedicated WooCommerce widgets: You’ll get dedicated widgets to include all the important WooCommerce information, even down to upsells and related products.
  • Conditional template display: You can create as many product archives and single templates as needed and use conditional rules to control where to use each template. For example, you could create one product single design for products in “Category A” and another for products in “Category B”.
  • Pre-built templates: You get access to pre-built product archives and single templates that you can customize to meet your needs. Or, you can build your own designs from scratch.

Is There Anything You Can’t Design with Elementor WooCommerce Builder?

You can use Elementor WooCommerce Builder to design your product archive and single templates, which comprise most of your store’s content. You can also design the rest of your WordPress content, even including templates for your header and footer.

However, there are two WooCommerce pages that it doesn’t help you with at this time:

  • Shopping cart
  • Checkout

You can use Elementor to add content around the WooCommerce cart and checkout content, but you cannot customize the actual content itself. To do this you will need to know your way around CSS, and you can add your own styles to control the cart and checkout pages.

How to Design Your WooCommerce Store with Elementor

Now, roll up those sleeves to get hands-on and design your store using Elementor Pro and WooCommerce Builder.

Let’s go step-by-step and create a store.

Set Up and Configure WooCommerce

If you haven’t already, you’ll want to start by setting up and configuring the basics of your WooCommerce store. These basic setup steps aren’t the main focus of this tutorial, so we won’t go too in-depth.

But in general, you’ll want to:

  1. Install and activate the free WooCommerce plugin from
  2. Run the WooCommerce setup wizard to configure important basics.
  3. Add your products.
  4. Configure any other relevant settings in the WooCommerce settings area.

If you need help getting started, more information on how to do this can be found here.

Design Your Shop Archive Page(s)

Now, you’re ready to start building your store, starting with the template for your product archives.

The product archive page is the page that lists all of your WooCommerce products (or the products with a specific category, tag, etc.).

To get started, go to Templates > Theme Builder > Product Archive. Then, click the Add New Product Archive button.

Give it a name and click Create Template to continue.

This will launch you into the design interface. You can import one of the pre-made product archive templates or close the template library to build your design from scratch.

From there, you’ll be able to design your archive template using the visual, drag-and-drop interface.

You can use the dedicated Product Archive widgets to add core content like a list of all your products or the title of the archive page (e.g. the name of the category).

Editing one of the widgets lets you control its appearance and functionality. You can customize everything from star ratings to sale badges.

When you’re finished with your design, click the Publishbutton to control when to use your template.

You get five display conditions that you can mix-and-match as needed:

  1. All Product Archives
  2. Shop page
  3. Search results
  4. Product categories
  5. Product tags

For example, to display the template on your main shop page only, choose Shop Page.

For some conditions, you’ll get additional options. An example of this is if you select Product categories, you can target your template to all product category archive pages or just a specific category (or set of categories).

These display conditions are useful because they let you create as many unique templates as you need to best showcase all the different products that you sell.

Sometimes a one-size-fits-all approach isn’t the best solution. WooCommerce Builder makes it easy to spin up new templates without needing to work directly with PHP template files.

Design Your Single Product Pages

Once you’ve created your product archive pages, you can use the same basic approach to customize a WooCommerce product page template for single products.

To get started, go to Templates > Theme Builder > Single Product. Then, click the Add New Single Product button and give it a name.

Just as with your product archive design, you’ll have the option to import one of the pre-made templates or build your own product page template from scratch.

Now, you’ll get another set of dedicated widgets for all the information on the product single page, including everything from the product title to related products and upsells.

Entering the settings for one of the widgets lets you configure its style and placement.

By default, Elementor will pull in one of your real products for the live preview of your design. But if you’d prefer to see how your design would look with a different product, click on the gear icon in the bottom-left corner and edit the Preview Settings to use any product at your store.

Once you’re finished, click the Publish button to choose where to apply this product single template.

Here, you’ll get another five options:

  1. All products
  2. In category
  3. In child category
  4. In tag
  5. Products by author

For the latter options, you’ll be able to choose specific items that apply to that condition (e.g. a specific category).

As with your product archive templates, you can repeat the process as many times as needed to ensure that each type of product has an optimized single product design.

Include WooCommerce Products in Other Designs as Needed

Beyond letting you design your product archive and single templates, Elementor Pro also gives you dedicated WooCommerce widgets that you can use in other designs.

For example, you could use them to feature products in a blog post that you’re writing. You can access these widgets at any time from the WooCommerce section in the Elementor interface.

If you want to display products, you can create your own custom queries to control which products to display.

You can even use the included Elementor Popup Builder feature to include or promote products in a popup. For example, you can advertise a special deal and include an add to cart button right in the popup.

It’s a great feature to promote special deals and promotions.

Time to Open Shop

With Elementor Pro, you can build a custom WooCommerce store faster and with more flexibility.

As you can see, it’s a simple process. Rather than working with hooks or template files, you can use a visual, drag-and-drop interface.

You get dedicated widgets to display important WooCommerce product information, and you can also use conditional display rules to create as many single product and product archive templates as your store needs.

So, get started today and build your own custom WooCommerce store. Then, turn that sign over to “OPEN” and start selling your amazing products.