Elementor and WooCommerce make it easy to create an online store. In this tutorial, I'll show you how to use WooComerce, WordPress, and Elementor to build an online store complete with products, categories, and an Amazon-style dropdown menu.
Why WooCommerce?
WordPress is one of the world’s most popular blogging platforms, but countless businesses also use WordPress to sell their products and services.
With a little help from the WooCommerce ecommerce plugin, you can use WordPress to sell digital and physical goods, and collect payments via popular payment gateways including PayPal and Stripe.
Today, 29% of the top million websites use WooCommerce, and big names such as the All Blacks, L.A. Weekly and AeroPress all rely on this popular WordPress eCommerce plugin.
While WordPress and WooCommerce provide everything you need to launch a successful eCommerce store, you may want more control over how your store looks.
In this two-part series, I’ll show you how to build a professionally-designed online store using WordPress, WooCommerce and Elementor.
In this post, we'll setup Elementor and WooCommerce, and create an online store complete with products, categories, and an Amazon-style dropdown menu. Then, in the next post, we'll redesign WooCommerce's product archive and product pages, using your choice of Elementor Pro templates.
By the end of this tutorial, you'll be ready to go live with a professionally-designed eCommerce store.
What We’ll Be Building
Elementor is a flexible tool that gives you several ways to design your eCommerce store. You could use one of Elementor Pro’s built-in templates, upload additional third-party templates, or even build your own eCommerce template from scratch. In this series, we’ll be covering all three options!
By the end of this tutorial, you’ll have created acustom product page and product archive, using Elementor Pro’s built-in templates.
The product page and product archive are two pages that WooCommerce generates automatically, but the stock design should be adapted to suit your store's branding and features. I’ll show you how to quickly and easily customize these default pages, using Elementor Pro’s built-in templates.
In the follow-up post, we'll use a themed collection of templates to create unique product pages, a product archive, and a themed header that appears across your entire eCommerce store.
If you have a specific vision in mind, then I'll also show you how to bring that vision to life, by creating your own Elementor template.
Elementor: Build an eCommerce Store With Zero Code
The first step is adding Elementor to your WordPress website.
The core Elementor plugin is free to download and provides access to more than 40 widgets and over 30 templates. However, since we’re working with WooCommerce you’ll need to invest in an Elementor Pro subscription.
Unlike the free version of Elementor, Elementor Pro provides a dedicated WooCommerce Builder, plus some important ecommerce-themed widgets such as Add to Cart, Product Rating and Related Products.
If you want to stick with the free Elementor plugin, then this tutorial will help you master the Elementor user interface and the core workflows you’ll need to build beautifully-designed pages, websites, blogs and online stores. However, you will need an Elementor Pro subscription in order to complete all sections of this tutorial.
How to Add Elementor to Your WordPress Website
Elementor Pro requires the free version of Elementor. If you haven’t already installed this free plugin, then you’ll need to add it to your website:
Log into your WordPress account, if you haven’t already.
In WordPress’s left-hand menu, select Plugins > Add New.
Search for the Elementor plugin.
When the plugin appears, select Install Now > Activate.
We can now upgrade to Elementor Pro:
Head over to the Elementor website, and purchase Elementor Pro, if you haven’t already. You should receive a purchase confirmation email.
On the Elementor website, log into your account using the details contained in your confirmation email.
Select Download plugin, and Elementor Pro will be downloaded as a ZIP file.
Log into your WordPress website.
In the left-hand menu, select Plugins > Upload Plugin.
Click Choose file and then select the ZIP file you just downloaded.
Select Install Now > Active.
When prompted, click Connect & Activate and follow the onscreen instructions to activate your Elementor Pro license.
Elementor Pro is now ready for you to use!
WooCommerce: How to Install WordPress’ Free eCommerce Plugin
Next, I’ll show you how to design, build and launch an online eCommerce store, using Elementor and WooCommerce.
If you haven’t already added the free WooCommerce plugin to your website, then now’s your chance:
Log into your WordPress website.
Navigate to Plugins > Add New.
Search for WooCommerce. When this plugin appears, select Install Now > Activate.
You should now see the Welcome to WooCommerce screen; click Yes please to start the setup process.
On the subsequent screen, enter your postal address and then click Continue.
WooCommerce will now ask some questions about your industry and products, and whether you already have an online or physical store.
After answering all of WooCommerce’s questions, you can choose a theme for your online store. We’ll be customizing our store using Elementor, so just select any free theme and then click Continue.
You’ll now be prompted to activate the Jetpack and WooCommerce Services plugin. This plugin will help protect your website against brute force attacks, and can also deliver a performance boost, so it’s recommended that you activate Jetpack unless you have a specific reason not to.
Congratulations, you’ve just successfully installed WooCommerce!
WooCommerce has lots of settings, including some that are essential for running a successful online store, such as specifying whether you accept PayPal, Stripe, or Direct Bank Transfer.
Configuring your WooCommerce store is beyond the scope of this tutorial, but you can explore all of WooCommerce’s settings, by selecting WooCommerce > Settings from WordPress’ left-hand menu.
Stock Those Shelves: Creating Your First WooCommerce Product
In this tutorial, we’ll be creating various layouts so it’s important you test these layouts as you’re building them.
If you already have a catalog of WooCommerce products, then you can use these products to see exactly how your store will look once it’s fully-stocked. However, if you’re building your very first store, then I’d recommend taking a few minutes to create a handful of products that you can use in your layouts.
To create a product, select Products > Add New from WordPress’ left-hand menu.
You can now open the Product data dropdown and specify the kind of product that you want to create:
Simple product. This is any product that’s shipped and has no options.
Grouped Product. This is a collection of related products that all fall into the simple product category.
External/Affiliate product. This is a product that’s sold elsewhere, but is featured on your website.
Variable product. This is a product that has variations, for example a jacket that’s available in different sizes and colors.
For the purposes of this tutorial, I’ll be creating a Simple Product:
Give your product a name and write a short description.
You can now assign this product to a product category, for example if you’re creating a clothing store then your categories might include Hoodies & Sweatshirts, Occasionwear, and Shoes & Boots. Assuming that you want to create a new category, scroll to the Product categories section and select Add new category.
Give your category a name, and then click Add new category.
In the Product categories section, select the category that you just created.
Already know all the categories that you want to feature on your website? You can implement all of these categories in advance, by repeating the above steps. You may also want to separate your categories into parent and child categories, for example I’m creating a Kitchen parent category and assigning it the following child categories: Bar stools, Dining chairs and Kitchen stools.
In Product tags, enter all the tags that you want to use, and then click Add.
Next, add a featured image by scrolling to Product Image and then selecting Set product image.
Choose the image that best represents your product.
Do you have multiple images that you want to use for this particular product? You can create a product gallery, by scrolling to the Product gallery section, selecting Add product gallery images, and then choosing the images that you want to use.
In the Product Data section, make sure General is selected.
In Regular price, enter how much this product should cost.
Next, select the Inventory tab.
In SKU, enter this product’s Stock Keeping Unit, which is the number you’ll use to track this product in your inventory.
Select the Enable stock management at product level checkbox.
In Stock quantity, enter the number of units that you currently have in stock.
WooCommerce can email you when you’re running low on stock. If you want to receive these low stock notifications, then enter the desired value into Low stock threshold. You’ll now receive an email as soon as your stock reaches this threshold.
In the left-hand menu, select Shipping.
In Weight, enter this product’s weight.
In Dimensions, enter the product’s length, width and height.
When you’re happy with the information you’ve entered, click Publish.
To see the product you’ve just created, select View Product.
Rinse and repeat to create multiple products. To really put your layouts to the test, you should try to create a variety of products, spanning multiple categories.
Organize Your Store With Product Categories
After creating all your products, it’s worth taking a few minutes to review your product categories.
By taking stock of all the categories you've created, you can identify any categories that need grouping into a parent category, or you might realize that you’ve forgotten to create a few important categories.
To review your categories, select Product > Categories from WordPress’ left-hand menu.
I’ve already created a Kitchen parent category that features my Bar stools, Dining chairs and Kitchen stools child categories, but now I’m going to create some additional parent categories: Office, Bedroom, Living Room and Garden.
To create a parent category:
In Add New Category, enter the name of the parent category that you want to create.
Make sure Parent category is set to None.
Click Add new category.
Find the first child category that you want to assign to this parent category, and then select the child’s accompanying Edit link.
Open the Parent category dropdown and select the parent category that you just created.
Click Update.
Rinse and repeat for every child category that you want to assign, and every parent category that you want to create.
Creating an Amazon-Style Product Menu
Next, I’m going to give customers the ability to filter products based on product category. In this section, we’ll build a dropdown menu, where selecting a parent category displays all the child categories associated with that parent.
This kind of parent/child product menu is a staple of many eCommerce sites, including heavyweights such as Amazon and eBay. By adding this kind of product menu to your eCommerce site, you can give visitors a familiar way to explore everything that your store has to offer.
By default, it’s not possible to add product categories to a WordPress menu. Before building our menu, we need to edit these default settings:
In WordPress’ left-hand menu, select Appearance > Menus.
Towards the top of the screen, find the Screen options section, and click to expand.
Find Product categories, and select it.
You can now add product categories to your menus, so let’s create our menu:
Give your menu a name, and then click Create new menu.
Click to expand the Product categories section.
Select all the product categories that you want to add to your menu.
Click Add to menu. All of the selected parent and child categories will now be added to the Menu structure section.
Since we’re creating a dropdown menu, you need to grab each child category and drop it beneath its associated parent category.
Next, grab each child category and drag it slightly to the right, so that it appears indented beneath its parent. Release the child category, and it should now be permanently indented.
Repeat this indenting process for every child category.
If you want to change where an item appears in your menu, then grab it in Menu structure and drop it into a new location.
When you’re happy with how your menu is setup, click Save Menu.
To place this menu on your website, click the Manage Locations tab.
Assuming that you want this menu to appear across your entire website, open the Top Menu dropdown and select the menu that you just created.
Click Save Changes.
This parent/child menu will now appear across your eCommerce store, making it easy for customers to explore your product categories.
Designing a WooCommerce Store With Elementor Pro
At this point, you have all the elements that you need for a successful eCommerce store: a WooCommerce installation, some products, and a menu that visitors can use to explore your store.
However, there’s one final piece of setup that we need to perform. By default, you can only use Elementor to design posts and pages, and not products.
Before we move onto the next section, we need to extend Elementor’s capabilities to include WooCommerce products:
In WordPress’ left-hand menu, select Elementor > Settings.
In Post Types, select Products.
Select Save Changes.
You can now use Elementor to design customized product pages—so let’s get started!
Using Elementor Pro’s Ready-Made Templates
Elementor provides a range of templates that can give your website a completely new look and feel, and sometimes even add extra functionality. These professionally-designed templates can take much of the work out of building an eCommerce store, so let’s start by exploring these pre-built templates.
In this section, I’ll show you how to customize two pages that WooCommerce creates automatically: your product archive and product pages.
Redesigning WooCommerce’s Single Product Page
Product pages are how visitors view and ultimately purchase your products, so it’s vital they look good and provide all the functionality your customers need.
Elementor Pro has a range of product page templates, so let’s put these templates to good use:
In WordPress’ left-hand menu, select Templates > Theme Builder.
Select the Add New button.
Open the Template type dropdown and select Single Product.
Give your template a name, and then click Create Template.
Elementor Pro will now display all the available Single Product templates; select the template that you want to use.
This template will now open in the Elementor editor. At this point, you can make changes to your chosen template, but for now we’ll just go ahead and publish our chosen template:
In the Elementor Panel, select Publish.
In the subsequent popup, open the Include dropdown and make sure Products is selected.
Click Save & Close.
This template will now be rolled out across all your product pages.
Building a Custom WooCommerce Product Archive
The product archive is a list containing all your products in a single location. When you setup WooCommerce, this plugin added a product archive to your website automatically, although the archive’s look and feel will vary depending on your WordPress theme.
Not a fan of this automatically-generated product archive? You can quickly and easily give it a makeover, using any of Elementor’s product archive templates:
In WordPress’ left-hand menu, select Templates > Theme Builder.
Select the Add New button.
Open the Template type dropdown and select Product Archive.
Give your template a name, and then click Create Template.
Elementor Pro will now display all the available Product Archive templates; select the template that you want to use.
Your chosen template will now open in the Elementor editor.
If you’re happy with your chosen template, then you can publish it by clicking the green Publish button.
In the subsequent popup, open the Include dropdown and select All Product Archives.
Click Save and close.
This updated product archive will now appear on your website.
Conclusion
In post, we created a complete online store. This WooCommerce site has everything you need to start selling products, all wrapped up in your choice of Elementor Pro's professionally-designed templates.
If you're not entirely happy with your site's look and feel, then why not try a different Elementor Pro template? Or, you could check out our follow-up post, where I'll show you how to use Elementor Template Kits, and how to create your own template from scratch.
Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.
ElementorHow to Use Elementor Templates: A 101 Intro
ElementorTop 25 Elementor Template Kits for WordPress (+ Free Templates)
Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.