Are you looking to open your first WooCommerce store? Or maybe you’ve built WooCommerce stores for clients, but want to build better custom eCommerce stores?
You’ve got amazing products that you can’t wait to get out to your customers. Luckily, you can be open for business in no time.
In this post, I’ll be going over how to build a WooCommerce store using Elementor WooCommerce Builder. It’s a visual, drag-and-drop WordPress page builder that gives you full control over your shop and product page designs.
The areas I’ll be covering are:
- What are Elementor and WooCommerce?
- Advantages of using Elementor WooCommerce Builder
- Set up and configure WooCommerce
- Design your shop archive page(s)
- Design a single product page
- Include WooCommerce products in other designs as needed
No matter whether it’s your first store or your fiftieth, you’ll discover a simpler workflow that eliminates the need to directly edit WooCommerce template files or get your hands dirty with hooks. Woo-hoo!
What are Elementor and WooCommerce?
To kick things off, in case you didn’t know (although how couldn’t you?), here’s a quick rundown of what Elementor and WooCommerce are.
Elementor is “the ultimate & free WordPress page builder.”
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.
It’s currently the only (and first) frontend page builder to allow limitless design possibilities.
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, get secure payments, configurable shipping options, and much more.
How Elementor WooCommerce Builder Helps You Create an eCommerce Store
The free core Elementor 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.
With Elementor Pro, you then 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.
However, to control the design of the cart and checkout content, there are a few options.
First, you can use a flexible base theme that pairs well with Elementor, while also giving you settings to control your cart and checkout pages. Some good options here are:
Second, if you know your way around CSS, you can add your own styles to control the cart and checkout pages.
Finally, you can use a plugin that modifies the checkout process.
For example, the CartFlows plugin lets you build a custom checkout process using Elementor. However, CartFlows is more suited for sales funnels than “traditional” eCommerce stores, so it won’t work in all situations.
You can also use a plugin such as our very own Forminator to create a customized checkout process.
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:
- Install and activate the free WooCommerce plugin from WordPress.org.
- Run the WooCommerce setup wizard to configure important basics.
- Add your products.
- 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 fancy 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 Publish button to control when to use your template.
You get five display conditions that you can mix-and-match as needed:
- All Product Archives
- Shop page
- Search results
- Product categories
- 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:
- All products
- In category
- In child category
- In tag
- 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.
If you really want to make your site shine, check out our article on 8 Must-Haves When Adding eCommerce to Your WordPress Site.
Also, if you’re shopping around for additional WordPress features, we offer dedicated hosting, site management, and 24/7 support.
So, get started today and build your own custom WooCommerce store. Then, turn that sign over to “OPEN” and start selling your amazing products.
