EnglishDeutschEspañolElementor 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" /> EnglishDeutschEspañolElementor 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" />

The complete woocommerce tutorial

Difficulty:IntermediateLength:LongLanguages:url-selector#selectionChanged" data-controller="url-selector">EnglishDeutschEspañol

Elementor và WooCommerce make it easy to lớn create an online store. In this tutorial, I"ll show you how lớn use WooComerce, WordPress, & Elementor khổng lồ build an online store complete with products, categories, & an Amazon-style dropdown menu.

Bạn đang xem: The complete woocommerce tutorial

Why WooCommerce?

WordPress is one of the world’s most popular blogging platforms, but countless businesses also use WordPress khổng lồ sell their products and services.

With a little help from the WooCommerce eCommerce plugin, you can use WordPress lớn sell digital and physical goods, & collect payments via popular payment gateways including PayPal & Stripe. 

Today, 29% of the top million websites use WooCommerce, và big names such as the All Blacks, L.A. Weekly and AeroPress all rely on this popular WordPress eCommerce plugin.

While WordPress & 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 lớn build a professionally designed online store using WordPress, WooCommerce, and Elementor. 

In this post, we"ll mix up 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 sầu và hàng hóa pages, using your choice of Elementor template kits from Envato lớn Elements.

By the over 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 khổng lồ design your eCommerce store. You could use one of Elementor Pro’s built-in templates, upload additional third-các buổi tiệc nhỏ 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 a custom sản phẩm page và sản phẩm archive sầu, using Elementor Pro’s built-in templates. 


The product page and product archive sầu are two pages that WooCommerce generates automatically, but the stochồng thiết kế should be adapted khổng lồ suit your store"s branding & features. I’ll show you how to lớn quickly and easily customize these mặc định pages, using Elementor Pro’s built-in templates. 

In the follow-up post, we"ll use a themed collection of templates to create chất lượng product pages, a hàng hóa 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 lớn bring that vision to lớn life by creating your own Elementor template. 

Elementor: Build an eCommerce Store With Zero Code

The first step is adding Elementor to lớn your WordPress website. 

The core Elementor plugin is không tính phí to tải về và provides access khổng lồ more than 40 widgets and over 30 templates. However, since we’re working with WooCommerce, you’ll need to lớn invest in an Elementor Pro subscription. 

Unlike the không lấy phí version of Elementor, Elementor Pro provides a dedicated WooCommerce Builder, plus some important eCommerce-themed widgets such as Add lớn Cart, Product Rating, and Related Products.

If you want to stiông chồng with the free Elementor plugin, then this tutorial will help you master the Elementor user interface and the core workflows you’ll need lớn build beautifully designed pages, websites, blogs, & online stores. However, you will need an Elementor Pro subscription in order lớn complete all sections of this tutorial. 

How to lớn Add Elementor lớn Your WordPress Website

Log in to your WordPress tài khoản, if you haven’t already. In WordPress’s left-hvà thực đơn, select Plugins > Add New.Search for the Elementor plugin.When the plugin appears, select Install Now > Activate.

We can now tăng cấp to lớn Elementor Pro:

Select Download plugin, & Elementor Pro will be downloaded as a ZIP. file. Log in to lớn your WordPress trang web. In the left-hvà thực đơn, select Plugins > Upload Plugin.Clichồng Choose file and then select the ZIP. tệp tin you just downloaded.Select Install Now > Active.When prompted, clichồng Connect và Activate và follow the onscreen instructions khổng lồ activate your Elementor Pro license.

Elementor Pro is now ready for you lớn use! 

WooCommerce: How khổng lồ Install WordPress’s Free eCommerce Plugin 

Next, I’ll show you how to thiết kế, build and launch an online eCommerce store, using Elementor and WooCommerce.

If you haven’t already added the miễn phí WooCommerce plugin lớn your trang web, then now’s your chance:

Log in lớn your WordPress website.Navigate lớn Plugins > Add New.Search for WooCommerce. When this plugin appears, select Install Now > Activate.You should now see the Welcome lớn WooCommerce screen; cliông chồng Yes please khổng lồ start the setup process.On the subsequent screen, enter your postal address and then cliông xã Continue.WooCommerce will now ask some questions about your industry và 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 không tính phí theme and cliông xã 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 và can also deliver a performance boost, so it’s recommended that you activate Jetpachồng unless you have a specific reason not to lớn.

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’s left-h& thực đơn.

For some extra guidance, you may also want to check out our free Beginner"s Guide to Using WooCommerce course, or our Getting Started with WooCommerce series. 

Stoông xã Those Shelves: Creating Your First WooCommerce Product

In this tutorial, we’ll be creating various layouts, so it’s important you thử nghiệm these layouts as you’re building them.

If you already have sầu 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 recommkết thúc taking a few minutes lớn create a handful of products that you can use in your layouts.

To create a product, select Products > Add New from WordPress’s left-hvà menu. 

You can now open the Product data dropdown & specify the kind of product that you want lớn create: 

Simple product. This is any product that’s shipped & has no options. Grouped Product. This is a collection of related products that all fall inlớn the simple sản phẩm category. Variable product. This is a product that has variations, such as 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 sản phẩm a name and write a short description. 

You can now assign this sản phẩm khổng lồ a product category. For example, if you’re creating a clothing store, then your categories might include Hoodies & SweatshirtsOccasionwear, và Shoes và Boots. Assuming that you want khổng lồ create a new category, scroll to lớn the Product categories section & select Add new category.

Give sầu your category a name, và then cliông xã 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 lớn separate your categories into parent & child categories. For example, I’m creating a Kitchen parent category & 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 clichồng Add.Next, add a featured image by scrolling to lớn Product Image và then selecting Set product image.Choose the image that best represents your product. 

Do you have sầu multiple images that you want to lớn use for this particular product? You can create a hàng hóa gallery by scrolling to lớn the Product gallery section, selecting Add product gallery images, & choosing the images that you want lớn 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 Stoông xã Keeping Unit, which is the number you’ll use to lớn track this hàng hóa in your inventory. Select the Enable stoông chồng management at hàng hóa level checkbox.

Xem thêm: Wap Tải Game Miễn Phí Cho Điện Thoại, Tải Game Về Điện Thoại Miễn Phí

In Stoông chồng quantity, enter the number of units that you currently have sầu in stoông chồng. WooCommerce can gmail you when you’re running low on stoông chồng. If you want lớn receive these low stoông xã notifications, then enter the desired value into lớn Low stoông chồng threshold. You’ll now receive an gmail as soon as your stoông chồng reaches this threshold. In the left-h& thực đơn, select Shipping.In Weight, enter this product’s weight. In Dimensions, enter the product’s length, width, và height. When you’re happy with the information you’ve sầu entered, cliông xã Publish.

To see the product you’ve just created, select View Product.


Rinse & repeat to create multiple products. To really put your layouts lớn the chạy thử, you should try khổng lồ 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 lớn reviews your hàng hóa categories.

By taking stoông chồng of all the categories you"ve sầu created, you can identify any categories that need grouping into a parent category, or you might realize that you’ve sầu forgotten to create a few important categories.

To nhận xét your categories, select Product > Categories from WordPress’s 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 lớn create some additional parent categories: Office, Bedroom, Living Room, & 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.Cliông xã Add new category.Find the first child category that you want khổng lồ assign lớn this parent category, & then select the child’s accompanying Edit links.Open the Parent category dropdown và select the parent category that you just created.

Cliông xã Update.

Rinse and repeat for every child category that you want khổng lồ assign và every parent category that you want lớn create. 

Creating an Amazon-Style Product Menu

Next, I’m going lớn give sầu customers the ability to lớn filter products based on hàng hóa category. In this section, we’ll build a dropdown thực đơn, where selecting a parent category displays all the child categories associated with that parent.


This kind of parent/child product thực đơn is a staple of many eCommerce sites, including heavyweights such as Amazon và eBay. By adding this kind of sản phẩm menu to your eCommerce site, you can give visitors a familiar way khổng lồ explore everything that your store has khổng lồ offer. 

By default, it’s not possible lớn add hàng hóa categories to lớn a WordPress menu. Before building our menu, we need lớn edit these default settings: 

In WordPress’s left-hvà menu, select Appearance > Menus.Towards the top of the screen, find the Screen options section, và clichồng to lớn expand. Find Product categories, and select it.

You can now add sản phẩm categories to lớn your menus, so let’s create our menu:

Give sầu your thực đơn a name, và then cliông chồng Create new menu.Cliông xã to lớn exp& the Product categories section.
Select all the sản phẩm categories that you want to lớn add lớn your menu.Cliông chồng Add to lớn menu. All of the selected parent and child categories will now be added lớn the Menu structure section. Since we’re creating a dropdown menu, you need khổng lồ grab each child category và drop it beneath its associated parent category.Next, grab each child category & drag it slightly khổng lồ the right, so that it appears indented beneath its parent. Release the child category, và it should now be permanently indented.Repeat this indenting process for every child category. 
If you want lớn change where an chiến thắng appears in your menu, then grab it in Menu structure and drop it into a new location. When you’re happy with how your thực đơn is phối up, clichồng Save sầu Menu.To place this thực đơn on your website, cliông chồng the Manage Locations tab. Assuming that you want this thực đơn to appear across your entire trang web, open the Top Menu dropdown & select the menu that you just created.Cliông xã Save sầu Changes.

This parent/child menu will now appear across your eCommerce store, making it easy for customers lớn explore your hàng hóa 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, & a menu that visitors can use to lớn explore your store.

However, there’s one final piece of cài đặt that we need lớn persize. By default, you can only use Elementor lớn thiết kế posts and pages, và not products. 

Before we move sầu on lớn the next section, we need to extend Elementor’s capabilities khổng lồ include WooCommerce products: 

In WordPress’s left-h& menu, select Elementor > Settings.In Post Types, select Products.

Select Save sầu Changes.

You can now use Elementor to lớn thiết kế customized sản phẩm pages—so let’s get started! 

Using Elementor Pro’s Ready-Made Templates

Elementor provides a range of templates that can give sầu your website a completely new look và feel, và 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 khổng lồ customize two pages that WooCommerce creates automatically: your product archive & sản phẩm 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 & provide all the functionality your customers need. 

Elementor Pro has a range of sản phẩm page templates, so let’s put these templates to lớn good use:

In WordPress’s left-hvà thực đơn, select Templates > Theme Builder.Select the Add New button.mở cửa the Template type dropdown & select Single Product.Give your template a name, và then clichồng Create Template.Elementor Pro will now display all the available Single Product templates; select the template that you want lớn 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. 

Clichồng Save & Close.

This template will now be rolled out across all your hàng hóa pages.

Building a Custom WooCommerce Product Archive

The hàng hóa archive sầu is a các mục containing all your products in a single location. When you phối up WooCommerce, this plugin added a sản phẩm archive lớn your website automatically, although the archive’s look and feel will vary depending on your WordPress theme. 


Not a người of this automatically generated hàng hóa archive? You can quickly và easily give it a makeover, using any of Elementor’s hàng hóa archive templates:

In WordPress’s left-h& menu, select Templates > Theme Builder.Select the Add New button.mở cửa the Template type dropdown và select Product Archive.Give sầu your template a name, and then cliông xã Create Template.

Elementor Pro will now display all the available Product Archive templates; select the template that you want to use.

Xem thêm: Create And Use Wordpress Template Parts

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 & select All Product Archives. Cliông xã Save and close.

This updated product archive will now appear on your website. 


In this post, we created a complete online store. This WooCommerce site has everything you need to lớn 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 & feel, then why not try a different Elementor Pro template? Or you could kiểm tra out our follow-up post, where I"ll show you how to lớn use Elementor Template Kits, and how to create your own template from scratch. 

Chuyên mục: Theme wordpress