Elementor and WooCommerce make it straightforward to create a web-based retailer. On this tutorial, I am going to present you the way to use WooComerce, WordPress, and Elementor to construct a web-based retailer full with merchandise, classes, and an Amazon-style dropdown menu.

Why WooCommerce?

WordPress is among the world’s hottest running a blog platforms, however numerous companies additionally use WordPress to promote their services.

With a little assist from the WooCommerce ecommerce plugin, you should use WordPress to promote digital and bodily items, and accumulate funds by way of standard fee gateways together with PayPal and Stripe. 

Right now, 29% of the highest million web sites use WooCommerce, and large names such because the All Blacks, L.A. Weekly and AeroPress all depend on this standard WordPress eCommerce plugin.

Whereas WordPress and WooCommerce present every thing you want to launch a profitable eCommerce retailer, you might have considered trying extra management over how your retailer appears to be like.

On this two-part collection, I’ll present you the way to construct a professionally-designed on-line retailer utilizing WordPress, WooCommerce and Elementor. 

On this publish, we’ll setup Elementor and WooCommerce, and create a web-based retailer full with merchandise, classes, and an Amazon-style dropdown menu. Then, within the subsequent publish, we’ll redesign WooCommerce’s product archive and product pages, utilizing your selection of Elementor Professional templates.

By the tip of this tutorial, you may be prepared to go dwell with a professionally-designed eCommerce retailer. 

What We’ll Be Constructing

Elementor is a versatile instrument that offers you many methods to design your eCommerce retailer. You could possibly use certainly one of Elementor Professional’s built-in templates, add extra third-party templates, and even construct your personal eCommerce template from scratch. On this collection, we’ll be overlaying all three choices!

By the tip of this tutorial, you’ll have created a customized product web page and product archive, utilizing Elementor Professional’s built-in templates. 

Navigate to any product to see your new design in action

The product web page and product archive are two pages that WooCommerce generates mechanically, however the inventory design needs to be tailored to fit your retailer’s branding and options. I’ll present you the way to rapidly and simply customise these default pages, utilizing Elementor Professional’s built-in templates. 

Within the follow-up publish, we’ll use a themed assortment of templates to create distinctive product pages, a product archive, and a themed header that seems throughout your whole eCommerce retailer. 

When you have a particular imaginative and prescient in thoughts, then I am going to additionally present you the way to deliver that imaginative and prescient to life, by creating your personal Elementor template. 

Elementor: Build an eCommerce Store With Zero Code

Step one is including Elementor to your WordPress web site. 

The core Elementor plugin is free to obtain and offers entry to greater than 40 widgets and over 30 templates. Nevertheless, since we’re working with WooCommerce you’ll want to spend money on an Elementor Professional subscription

In contrast to the free model of Elementor, Elementor Professional offers a devoted WooCommerce Builder, plus some vital ecommerce-themed widgets similar to Add to Cart, Product Score and Associated Merchandise.

If you would like to follow the free Elementor plugin, then this tutorial will enable you grasp the Elementor consumer interface and the core workflows you’ll want to construct beautifully-designed pages, web sites, blogs and on-line shops. Nevertheless, you will want an Elementor Professional subscription so as to full all sections of this tutorial. 

How to Add Elementor to Your WordPress Web site

Elementor Professional requires the free model of Elementor. If you happen to haven’t already put in this free plugin, you then’ll want to add it to your web site:

  • Log into your WordPress account, in the event you haven’t already. 
  • In WordPress’s left-hand menu, choose Plugins > Add New.
  • Seek for the Elementor plugin.
  • When the plugin seems, choose Set up Now > Activate.

We are able to now improve to Elementor Professional:

  • Head over to the Elementor web site, and buy Elementor Professional, in the event you haven’t already. You must obtain a buy affirmation electronic mail. 
  • On the Elementor web site, log into your account utilizing the main points contained in your affirmation electronic mail. 
  • Choose Obtain plugin, and Elementor Professional will likely be downloaded as a ZIP file. 
  • Log into your WordPress web site. 
  • Within the left-hand menu, choose Plugins > Add Plugin.
  • Click on Select file after which choose the ZIP file you simply downloaded.
  • Choose Set up Now > Energetic.
  • When prompted, click on Join & Activate and observe the onscreen directions to activate your Elementor Professional license.

Elementor Professional is now prepared for you to use! 

WooCommerce: How to Set up WordPress’ Free eCommerce Plugin 

Subsequent, I’ll present you the way to design, construct and launch a web-based eCommerce retailer, utilizing Elementor and WooCommerce.

If you happen to haven’t already added the free WooCommerce plugin to your web site, then now’s your likelihood:

  • Log into your WordPress web site.
  • Navigate to Plugins > Add New.
  • Seek for WooCommerce. When this plugin seems, choose Set up Now > Activate.
  • You must now see the Welcome to WooCommerce display; click on Sure please to begin the setup course of.
  • On the following display, enter your postal handle after which click on Proceed.
  • WooCommerce will now ask some questions on your business and merchandise, and whether or not you have already got a web-based or bodily retailer. 

After answering all of WooCommerce’s questions, you possibly can select a theme in your on-line retailer. We’ll be customizing our retailer utilizing Elementor, so simply choose any free theme after which click on Proceed.

You’ll now be prompted to activate the Jetpack and WooCommerce Providers plugin. This plugin will assist shield your web site in opposition to brute drive assaults, and can even ship a efficiency enhance, so it’s beneficial that you just activate Jetpack except you have got a particular purpose not to.

Congratulations, you’ve simply efficiently put in WooCommerce! 

WooCommerce has a number of settings, together with some which are important for working a profitable on-line retailer, similar to specifying whether or not you settle for PayPal, Stripe, or Direct Financial institution Switch.

Configuring your WooCommerce retailer is past the scope of this tutorial, however you possibly can discover all of WooCommerce’s settings, by choosing WooCommerce > Settings from WordPress’ left-hand menu.

For some further steerage, you may additionally need to take a look at our free Newbie’s Information to Utilizing WooCommerce course, or Getting Began with WooCommerce collection. 

Inventory These Cabinets: Creating Your First WooCommerce Product

On this tutorial, we’ll be creating numerous layouts so it’s vital you take a look at these layouts as you’re constructing them.

If you have already got a catalog of WooCommerce merchandise, then you should use these merchandise to see precisely how your retailer will look as soon as it’s fully-stocked. Nevertheless, in the event you’re constructing your very first retailer, then I’d suggest taking a couple of minutes to create a handful of merchandise that you should use in your layouts.

To create a product, choose Merchandise > Add New from WordPress’ left-hand menu. 

Now you can open the Product knowledge dropdown and specify the type of product that you really want to create: 

  • Easy product. That is any product that’s shipped and has no choices. 
  • Grouped Product. That is a assortment of associated merchandise that every one fall into the easy product class. 
  • Exterior/Affiliate product. That is a product that’s offered elsewhere, however is featured in your web site
  • Variable product. That is a product that has variations, for instance a jacket that’s obtainable in several sizes and colours. 

For the needs of this tutorial, I’ll be creating a Easy Product:

  • Give your product a title and write a quick description. 

Now you can assign this product to a product class, for instance in the event you’re creating a clothes retailer then your classes may embrace Hoodies & SweatshirtsOccasionwear, and Sneakers & Boots. Assuming that you really want to create a new class, scroll to the Product classes part and choose Add new class.

You can assign WooCommerce products to multiple product categories
  • Give your class a title, after which click on Add new class.
  • Within the Product classes part, choose the class that you just simply created.

Already know all of the classes that you really want to function in your web site? You’ll be able to implement all of those classes upfront, by repeating the above steps. You might also need to separate your classes into father or mother and youngster classes, for instance I’m creating a Kitchen father or mother class and assigning it the next youngster classes: Bar stools, Eating chairs and Kitchen stools.

Im creating a Kitchen parent category and assigning it the following child categories Bar stools Dining chairs and Kitchen stools
  • In Product tags, enter all of the tags that you really want to use, after which click on Add.
  • Subsequent, add a featured picture by scrolling to Product Picture after which choosing Set product picture.
  • Select the picture that greatest represents your product. 

Do you have got a number of pictures that you really want to use for this specific product? You’ll be able to create a product gallery, by scrolling to the Product gallery part, choosing Add product gallery pictures, after which selecting the photographs that you really want to use. 

  • Within the Product Information part, be certain that Normal is chosen.
To test your Elementor layouts youll need to create at least one product
  • In Common worth, enter how a lot this product ought to price. 
  • Subsequent, choose the Stock tab. 
  • In SKU, enter this product’s Inventory Protecting Unit, which is the quantity you’ll use to monitor this product in your stock. 
  • Choose the Allow inventory administration at product stage checkbox.
Find the Manage stock checkbox and click to select
  • In Inventory amount, enter the variety of items that you just presently have in inventory. 
  • WooCommerce can electronic mail you once you’re working low on inventory. If you would like to obtain these low inventory notifications, then enter the specified worth into Low inventory threshold. You’ll now obtain an electronic mail as quickly as your inventory reaches this threshold.  
  • Within the left-hand menu, choose Delivery.
  • In Weight, enter this product’s weight. 
  • In Dimensions, enter the product’s size, width and top. 
  • While you’re pleased with the knowledge you’ve entered, click on Publish.

To see the product you’ve simply created, choose View Product.

Ive created a simple WooCommerce product using the Single Product settings

Rinse and repeat to create a number of merchandise. To actually put your layouts to the take a look at, you must attempt to create a number of merchandise, spanning a number of classes. 

Arrange Your Store With Product Classes

After creating all of your merchandise, it’s value taking a couple of minutes to assessment your product classes.

By taking inventory of all of the classes you have created, you possibly can determine any classes that want grouping into a father or mother class, otherwise you may understand that you just’ve forgotten to create a few vital classes.

To assessment your classes, choose Product > Classes from WordPress’ left-hand menu.

I’ve already created a Kitchen father or mother class that options my Bar stools, Eating chairs and Kitchen stools youngster classes, however now I’m going to create some extra father or mother classes: Workplace, Bed room, Residing Room and Backyard.

To create a father or mother class:

  • In Add New Class, enter the title of the father or mother class that you really want to create.

At this point you may want to review the parent and child categories that youve created
  • Be sure that Mum or dad class is about to None.
  • Click on Add new class.
  • Discover the primary youngster class that you really want to assign to this father or mother class, after which choose the kid’s accompanying Edit hyperlink.
  • Open the Mum or dad class dropdown and choose the father or mother class that you just simply created.
You can assign any WooCommerce child category to a parent category
  • Click on Replace.

Rinse and repeat for each youngster class that you really want to assign, and each father or mother class that you really want to create. 

Creating an Amazon-Model Product Menu

Subsequent, I’m going to give clients the flexibility to filter merchandise based mostly on product class. On this part, we’ll construct a dropdown menu, the place choosing a father or mother class shows all of the youngster classes related to that father or mother.

Help visitors explore your online store with an Amazon-style dropdown menu

This sort of father or mother/youngster product menu is a staple of many eCommerce websites, together with heavyweights similar to Amazon and eBay. By including this type of product menu to your eCommerce web site, you may give guests a acquainted means to discover every thing that your retailer has to provide. 

By default, it’s not potential to add product classes to a WordPress menu. Earlier than constructing our menu, we want to edit these default settings: 

  • In WordPress’ left-hand menu, choose Look > Menus.
  • In direction of the highest of the display, discover the Display choices part, and click on to broaden.  
  • Discover Product classes, and choose it.

Now you can add product classes to your menus, so let’s create our menu:

  • Give your menu a title, after which click on Create new menu.
  • Click on to broaden the Product classes part.
You can add product categories to your WordPress dropdown menu
  • Choose all of the product classes that you really want to add to your menu.
  • Click on Add to menu. All the chosen father or mother and youngster classes will now be added to the Menu construction part. 
  • Since we’re creating a dropdown menu, you want to seize every youngster class and drop it beneath its related father or mother class.
  • Subsequent, seize every youngster class and drag it barely to the proper, in order that it seems indented beneath its father or mother. Launch the kid class, and it ought to now be completely indented.
  • Repeat this indenting course of for each youngster class. 
Drag categories to the right to create an indented effect
  • If you would like to change the place an merchandise seems in your menu, then seize it in Menu construction and drop it into a new location. 
  • While you’re pleased with how your menu is setup, click on Save Menu.
  • To put this menu in your web site, click on the Handle Areas tab. 
  • Assuming that you really want this menu to seem throughout your whole web site, open the High Menu dropdown and choose the menu that you just simply created.
  • Click on Save Adjustments.

This father or mother/youngster menu will now seem throughout your eCommerce retailer, making it straightforward for patrons to discover your product classes. 

Designing a WooCommerce Store With Elementor Professional

At this level, you have got all the weather that you just want for a profitable eCommerce retailer: a WooCommerce set up, some merchandise, and a menu that guests can use to discover your retailer.

Nevertheless, there’s one closing piece of setup that we want to carry out. By default, you possibly can solely use Elementor to design posts and pages, and never merchandise. 

Earlier than we transfer onto the subsequent part, we want to lengthen Elementor’s capabilities to embrace WooCommerce merchandise: 

  • In WordPress’ left-hand menu, choose Elementor > Settings.
  • In Put up Varieties, choose Merchandise.
Give Elementor access to your Products post types
  • Choose Save Adjustments.

Now you can use Elementor to design personalized product pages—so let’s get began! 

Utilizing Elementor Professional’s Prepared-Made Templates

Elementor offers a vary of templates that may give your web site a utterly new appear and feel, and typically even add further performance. These professionally-designed templates can take a lot of the work out of constructing an eCommerce retailer, so let’s begin by exploring these pre-built templates. 

On this part, I’ll present you the way to customise two pages that WooCommerce creates mechanically: your product archive and product pages. 

Redesigning WooCommerce’s Single Product Web page

Product pages are how guests view and in the end buy your merchandise, so it’s very important they appear good and supply all of the performance your clients want. 

Elementor Professional has a vary of product web page templates, so let’s put these templates to good use:

  • In WordPress’ left-hand menu, choose Templates > Theme Builder.
  • Choose the Add New button.
  • Open the Template sort dropdown and choose Single Product.
  • Give your template a title, after which click on Create Template.
  • Elementor Professional will now show all of the obtainable Single Product templates; choose the template that you really want to use.
Elementor Pro provides a range of professionally-designed single product pages that you can use in your WooCommerce store

This template will now open within the Elementor editor. At this level, you may make adjustments to your chosen template, however for now we’ll simply go forward and publish our chosen template: 

  • Within the Elementor Panel, choose Publish.
  • Within the subsequent popup, open the Embrace dropdown and ensure Merchandise is chosen. 
Youll need to apply your chosen single product template to all of your Product pages
  • Click on Save & Shut.

This template will now be rolled out throughout all of your product pages. 

Constructing a Customized WooCommerce Product Archive

The product archive is a listing containing all of your merchandise in a single location. While you setup WooCommerce, this plugin added a product archive to your web site mechanically, though the archive’s appear and feel will range relying in your WordPress theme. 

You can also use Elementor to re-design your Product Archive page which WooCommerce creates automatically

Not a fan of this automatically-generated product archive? You’ll be able to rapidly and simply give it a makeover, utilizing any of Elementor’s product archive templates:

  • In WordPress’ left-hand menu, choose Templates > Theme Builder.
  • Choose the Add New button.
  • Open the Template sort dropdown and choose Product Archive.
  • Give your template a title, after which click on Create Template.

Elementor Professional will now show all of the obtainable Product Archive templates; choose the template that you really want to use.

If youre using Elementor Pro then youll have access to a range of professionally-designed Product Archive templates
  • Your chosen template will now open within the Elementor editor.
  • If you happen to’re completely happy along with your chosen template, then you possibly can publish it by clicking the inexperienced Publish button. 
  • Within the subsequent popup, open the Embrace dropdown and choose All Product Archives
  • Click on Save and shut.

This up to date product archive will now seem in your web site. 

Conclusion 

In publish, we created a full on-line retailer. This WooCommerce web site has every thing you want to begin promoting merchandise, all wrapped up in your selection of Elementor Professional’s professionally-designed templates. 

If you happen to’re not solely completely happy along with your web site’s appear and feel, then why not attempt a totally different Elementor Professional template? Or, you may take a look at our follow-up publish, the place I am going to present you the way to use Elementor Template Kits, and how to create your personal template from scratch. 

Leave a Reply