Building an online store with WooCommerce

Hey, it’s Ash from Elementor.

Selling your products and services online has never been easier and with Elementor and WooCommerce, you have the perfect combination of tools at your disposal to make every success with your business.

In this course we will create this store for Bakersons which is a fictitious local bakery which sells delicious baked goods to their customers.

We’ll cover:

1. How to install, set-up and configure WooCommerce
2. How to create products and services to sell on your store
3. How to build your store templates using the Elementor theme builder
4. Additional marketing options, like creating pop-ups, setting featured products and creating sales pages
5. How to configure various shipping options
6. How to connect PayPal & Stripe to your store
7. How to customise your store emails as well as creating coupon codes and managing your orders once your store is live

Be sure to jump to any of these sections if you’re looking for assistance in a specific area and don’t forget to save this course for future reference.

Let’s get started and learn how to build an online store with Elementor & WooCommerce.

Before we install our theme and the necessary plugins, let’s first explore some important aspects involved with running an online store.

First ensure you have suitable web hosting. Running a store tends to use more resources than a simple brochure style website. There are more calls to the database, generally heavier traffic and more resources which need to load.

Ensure that your web hosting is suitable enough to handle this and keep a close on the resources you’re using to ensure that your customers are receiving a great experience when visiting your store.

To find out more about choosing a suitable web host, check out the dedicated lesson in our performance course.

Closely related to web hosting, ensure your website has an active SSL certificate. SSL stands for Secure Sockets Layer and this is absolutely essential for any online store as it helps to keep the connection secure when data is sent between your store and your customers.

Many web hosts provide these for free, but if yours doesn’t there are many options available, both free and premium. Consult your web host for more information about installing an SSL certificate.

As well ensuring you have stable and secure web hosting, as well as an active SSL certificate there are a few aspects which can be managed within WordPress to ensure additional strengthening of your store.

Using a security plugin can be very beneficial and with a quick search in the WordPress repository you’ll see there are many free options available. Many of these provide malware scanning as well as many other features which help to keep your website secure.

Finally it is a good idea to enable Captacha on your website. Google provides an excellent free service here called reCaptacha.

Malicious software is prevented from abusing the website using reCAPTCHA. Legitimate users will be able to login, conduct purchases, view pages, and create accounts, while fake users will be blocked.

Using the free plugin ‘Simple Google reCaptcha’ will easily allow you to add reCaptacha to all aspects of your website, including WooCommerce.

Moving on, this course will cover all aspects of creating an online store with Elementor & WooCommerce, however to ensure you are able to follow along with confidence we recommend that you have at least basic familiarity with Elementor & Elementor Pro. This includes using sections, columns, widgets and basic knowledge of the theme builder.

If you need to learn more about using Elementor please refer to the links in the description.

We’ll be using the free lightweight Hello Elementor theme on our store.

To install this, head over to the themes areas and select the ‘Add New’ button.

Switch to the popular tab then install and activate the theme.

As you can now see we are prompted to install Elementor.

Select the ‘Install Elementor’ button…

And activate…

Next, we’ll install Elementor Pro.

Log into your Elementor Pro account and download the latest version of the plugin.

Back in the plugins area let’s now upload the plugin…

Activate…

And connect to our Elementor account.

Building and running an online store can be a daunting task, but with the right preparation and planning you’ll lessen the risk of running into problems throughout the project.

In our next lesson we’re going to go through the entire WooCommerce installation process, configure many of the settings for our store and also set up our taxes.

Now that we have a good understanding of what is required when owning an online store and have undertaken some important first steps, let’s head back into the WordPress dashboard and explore the WooCommerce plugin.

To get started with WooCommerce we must first install their plugin.

Let’s head to the plugins area and select ‘add new’.

Type “WooCommerce” into the search field and once the results have loaded you should see the WooCommerce plugin as the first result.

Select the ‘Install Now’ button and wait a few moments for the plugin to install.

Once complete you can then activate the plugin.

As soon as WooCommerce has activated you will be redirected to the set-up screen. Here we are able to continue with the set-up of our store.

If you would prefer to manually set up your store, you can select the ‘Skip’ option located at the bottom of the page. All of these details can be entered manually at a later stage if required.

The first option you’ll see enables you to input your store address. Once you have entered your address select continue.

You will now be asked if you would like to share tracking data, we’ll select ‘No Thanks’, but this decision is entirely up to you.

Next, choose the appropriate industry and continue.

The next screen will allow you to specify the types of products you are going to sell. In our store we plan on selling ‘physical’ & ‘downloadable’ products, so these are the two options we’ll select. You’ll see that WooCommerce offers several other premium product types, you can select the info icon to find out more about these.

In the next area we can enter some data about our products and whether we currently sell elsewhere. We’ll select 1-10 products in the first field and ‘Yes, in person at physical stores & events’ in the second. Under “What’s your current annual revenue”, we’ll set the appropriate amount.

Next we can see that WooCommerce would like to add some recommended features. Select the arrow to view more information about these features, and if you feel you could benefit from any of these feel free to leave them checked.

We’ll uncheck the recommended features for now, but please note these can all be added at a later stage if required.

The final step in our set-up is to tell WooCommerce which theme we would like to use. Our website currently uses the ‘Hello Elementor’ theme and we plan to continue doing so, so this is what we’ll select.

WooCommerce will now ask if you would like to install the JetPack plugin. We’re going to select ‘No thanks’.

Ok, the initial store set-up is now complete and as you can see we are taken to the WooCommerce home screen.

We will revisit the store settings later in the course to further configure other aspects of the store like shipping, taxes & payment providers.

Let’s close the welcome pop-up window and head over to the pages section to better understand the pages associated with WooCommerce.

As you can see WooCommerce has automatically created several pages for your new store.

The first three pages, ‘Cart’, ‘Checkout’, and ‘My Account’ can all be edited here using the Elementor editor.

The ‘Cart’ page will allow your customers to view, amend and review the products they’ve added for purchase.

The ‘Checkout’ page is where your customer will enter their billing, shipping and payment information.

And finally the ‘My Account’ page is where you customers can view their order details, amend their account settings like billing information or update their password.

The fourth page which WooCommerce has automatically created is ‘Shop’. This page will display your product archive and can be edited using the Elementor Theme Builder which we explore later in the course.

Now that we have acquainted ourselves with the pages associated with WooCommerce we can take a further look at the store settings.

Head to WooCommerce > Settings.

The settings area contains several tabs which allow you to manage many aspects of your store. Later in our course we’ll cover the payment, shipping & email sections.

For now, ensure you have the ‘General’ tab selected. If you have followed the WooCommerce set-up some of this information will already be filled in. If not, take some time now to fill in your store details.

In this area we can also configure the…

Selling location…

Shipping location…

& default customer location.

We will revisit these options when we configure our shipping options.

We are also able to specify whether or not we wish to enable taxes and the use of coupons.

Finally, at the bottom we can amend the currency options if required.

Remember to save your changes before navigating away from this tab.

Next, we’ll switch over to the Products tab where you can see there are three sub areas…

General…

Inventory…

And downloadable products…

First, let’s take a look at the general area.

By default WooCommerce has already selected our page titled ‘Shop’ to be the default shop page. If you would like to change this page, you can make the amendment here.

Add to cart behaviour allows you to declare if you would like customers to be taken to the cart page upon adding a product and by default Ajax is enabled on the archive page which provides a smoother experience for your customer as it doesn’t require the page to reload for an item to be added to the cart.

As standard, WooCommerce provides a placeholder image. If you would like to change this image, simply amend the attachment ID here to switch to an image of your choice.

To find the ID of an image, simply open your media library, select an image, and in the URL bar copy the number you see here.

If you would like to change the measurements units used within your store, you can do so here.

And finally you’ll see the review and rating options located at the bottom of the page. Here you can switch on and off ratings and reviews and fine tune the options associated with these.

We’re going to leave these all as default for our store, but please note any of these configurations can be amended at any time.

The second subsection we have is to manage the inventory for our store. Switch over the ‘Inventory’ tab.

By default you can see that stock management is enabled, however if your store doesn’t require this you can switch this option off here. If you do wish to have stock management enabled you will see several additional options here.

We can enable a specific time cap to hold stock, switch on low and out of stock notifications, as well as managing the email address these notifications are sent to. We can also set the low and out of stock thresholds and declare whether we would like out of stock items to be hidden from our store completely.

The third and final subsection we see here is for Downloadable Products.

Here you are able to amend the download method, access restrictions and filename configuration.

Now we have finished configuring our products we’re ready to move onto the ‘Tax’ settings.

It is important to spend some time here when first setting up your store as every country has different tax rules. By ensuring your tax configuration is correct before your store goes live, you’ll be making sure your store is compliant with your local authorities.

We already enabled the tax options when we configured our general settings, but if you missed this simply head back to the general tab and switch this option on.

Now switch to the tax tab and we’ll go over each of these options so that you have a better understanding of how to set up tax on your store.

The first option here asks you if you would like to enter prices inclusive or exclusive of tax. We’ll set this to yes as we plan to enter our prices including tax.

‘Calculate tax based on’ allows you to specify the location which is used to calculate your tax. For our store, we’ll set this as ‘Shop base address’ as we would like the local tax rules to be applied to all purchases.

‘Shipping tax class’ we leave as default as we would like the tax to be based on the cart items themselves.

‘Rounding’ simply displays the tax which has been added to the order in one clear to see amount, rather than per line. We’ll leave this on.

The next section allows you to create additional custom tax classes. As you can see there are already two default classes created, reduced rate & zero rate. Our store doesn’t require any custom classes but if you need to create any, simply add the name of your new tax class into the text area on a new line and save your changes. The new class will then appear in the top navigation alongside the other tax options.

Let’s quickly remove our example tax class as we do not require it for our store.

Next, we can state if we would like our prices to display including or excluding tax. We’ll set this to ‘including’, and we’ll do the same for the next option which controls the pricing display on the cart and checkout pages.

If you would like to display a suffix to your prices, you can enter that here. For example you could add ‘Inc VAT’. We’ll leave this blank for our store.

And the final option we see here is to set the display of our tax totals. This determines if multiple taxes get displayed as one total during checkout, or as an itemized list of taxes. We’ll set this to ‘As a single total’.

Now that we have configured the general settings for our tax we are ready to move onto setting the rates for each option.

Select ‘Standard rates’ and as you can see we’re presented with the tax rate table. Here you can define your standard tax rates, one location per line if required. The default asterix applies the tax rate to all locations, but if you need to you can enter a country code, state code, postcode and even a city if you need to fine tune your tax options.

We’ll leave all of these as default as we would like to apply a global tax rate in our store.

Under tax rate we’ll enter 20%.

Tax name allows you to amend the name of this tax option, we’ll enter 20% in the field so it’s clear which tax rate this is.

And if you have set up multiple tax rates here you can specify the priory in which they are used as well as applying compound and shipping taxes.

Once you have finished, save your changes and switch to ‘reduced rate’.

As you can see we are presented with the same tax rate table. We’ll keep most of the same settings here, except we’ll set our reduced tax rate as 5%.

Finally, we’ll switch to the ‘zero rate’ tax option and as you can see this has already been set to 0% so we can leave this as it is.

Our tax rates are now completely configured and when it comes to creating our products we’ll explore the options on how to apply these tax rates to the products in our store.

Let’s move onto configuring the ‘Accounts & Privacy’ settings.

Switch to the ‘Accounts & Privacy’ tab.

Upon installing WooCommerce there are several default account & privacy options configured. If these do not suit your requirements, they can all be changed here.

As you can see WooCommerce has automatically enabled the option for customers to be able to place an order without an account. If your store requires customers to already have an account, you can disable this option. Next, we have an option to allow customers to log into their accounts during the checkout process, we’ll enable this option.

As standard WooCommerce will create your customer an account when they place their first order. The customer will automatically receive their username and password in an email. If you would like customers to be able to manually create an account or create their own account during checkout, you have these options available here.
The next areas allow you to configure several aspects with regards to personal data and privacy. It’s a good idea to consult your company’s data and privacy policies before setting these options.

You can amend the text shown when referencing your privacy policy on the registration and checkout pages.

Please note you must set your privacy policy in the general WordPress settings for this to work on your store.

To do this, simply create your Privacy page…

…then in Settings > Privacy, set your new page like so.

You also have the option to amend how long your store retains personal data. Again, it’s best to consult your company’s privacy policy before configuring this section.

For our store, we will leave these as default.

2i. Settings – Advanced

The last section we’ll explore for now is the advanced tab.

Here you’ll see that WooCommerce has automatically selected the newly created pages for ‘Cart’, ‘Checkout’, & the ‘My Account’ page. Next, you should specify where your terms and conditions are located as WooCommerce automatically inserts a link within the checkout page.

Checking the ‘Force secure checkout’ button is good practice to ensure a secure connection between your store and your customers. Please note this does require a valid SSL certificate.

And finally if you need to amend the endpoints associated with the checkout and account pages, you can do so here.

Once finished, save your changes.
Ensure you dedicate some time to setting up and configuring your WooCommerce settings. By doing so you will give yourself the best chance to first of all understand all of the available features present in WooCommerce and secondly guarantee that your store is ready for your customers to receive a flawless experience when they purchase from you.

In our next lesson we’re going to learn how to create products and categories.

Now that we’ve learnt how to install WooCommerce and have configured parts of our store, it’s time to add in some products.

Let’s head back into the WordPress dashboard to see how this works.
Ok, so now that you’ve installed & configured WooCommerce, it’s time to begin adding in your products. Go to Products > Add New to add in your first product.

Start with something simple that doesn’t have any extra options. For example, for an apparel shop, you might start with a hat that only comes in one color and size. … For the bakery, I’ll start with a simple, yet classic French Baguette.

Note that when you add your first product, tooltips may pop up. You can go ahead and dismiss them. Don’t worry, I’ll walk you through the whole process.

First, add in the Product Name.
Next is the Description. Be as descriptive as possible, to help people find your products when searching online. You can use basic formatting, such as bold text and paragraph alignment in your Description.

Next scroll down past the product data to the product short description. We’ll get back to product data options shortly. Add a short description of your product; this will show at the top of the product page. It should be concise, but at the same entice the viewer to take a closer look.
Scroll back up to the Product categories. Product Categories help customers navigate to relevant products, while they shop your site.
Go ahead and click Add new category. Type your category name, and Click Add new category once more. Great, now this category will always appear on the list here, and you can use it for other products in the future, as needed.

Another way to add Categories is via the Categories tab. Under Products, Command or Control click Categories to open in a new tab. Type in a Name. When you create Categories from here, you can add other details, such as a Description and an Image. Then click Add New Category. Repeat this for each category you add. You can click to edit any category here. Bulk manage your categories from here.

Below the Categories section, is the Tags section. Product tags are keywords that show up in your website’s search and are generally more specific than categories. The same tag may fall within different categories.

The process of adding and managing tags is similar to Categories. Type in the Tag name and click Add new tag. In the case of the bakery, I’ll add the wholemeal and gluten-free tags, so that searchers can find all the products with either of these tags at one time.

Let’s go back to our product. Click Save Draft to refresh the Categories, and as you can see, the ones we added now appear here. We can now apply them as needed to our future products.
If you want to apply a product tag we added, begin typing it, and select it when it appears in the dropdown. Choose as many as is relevant; you can also add new Tags directly from here. Then click Add. Click the X to remove a product tag.

Now it’s time to add the Product data.
Our first product is a basic product, with no extra options, so under Product Data, leave it on the default of Simple Product.

Later in the course, we’ll discuss downloadable products as well as more complex products.

If you need to use a different currency, you can set that up in the store settings. We’ll cover that later in the course, as well.

Start with the Regular price, in the General Tab. This is the normal price of the product. If the product is on sale, enter that below. You can even schedule the sale price to go live and end at a designated time.

Next we are presented with the tax options. Please note this section will only appear if you have enabled and configured your tax options.

We can first of all set the tax status and then the tax class.

Click the Inventory Tab. You can enter an SKU or “sku” number. This is optional, but a good idea to use as a reference number for your product, in case its name changes in the future.
Below that is the stock area, where you can manage your stock. If you decide to enable it, you can add in the available quantity, allowing WooCommerce to keep track of and note when a product is out of stock. You can choose whether or not to allow backorders, as well as when you want to be notified by email from WooCommerce when inventory is low.
If you want to limit a product to one per order, check “sold individually.”

Let’s skip on down to the Advanced Tab. We’ll go back to some of the other options, a bit later. In the Advanced tab, we have an option to include a Purchase note. This note will be sent to the customer only after this specific product is sent.

You can add a value for menu order, if you’d like this product to show up before the default order. Look this up
Last is the option to Enable reviews.

I highly recommend leaving it enabled to allow your products to gain social proof.

Now let’s add our product images. The Product Image, here, is the main image associated with the product and will display on the Shop or Archive page. Click Set Product Image to choose this image. Make sure to choose a high quality image that focuses on the product. At the same time, be sure to keep the image size small – get specifics for this.

The images names should describe the product, with each word separated by a dash. This will help search engines find and display your product in search results. Add in the Alt text, to display on screen readers and whenever the image cannot be displayed. You can also add the Title, which will display when the mouse cursor is hovered over the image.
Now let’s add some more images to the Product Gallery. These can be other images of your product, such as from different angles, closeups, and in use, depending on your product. Click Add product gallery images to add them.

For the baguette, I’ll use a few different angles, as well as images showing a closeup and the texture. All my images are the same dimensions, for consistency…

Hold down Command or Control to select more than one image. Once you’ve selected the images, go through them one by one, and update the Alt text and Title. Then click Add to Gallery
Once again, click Upload Files. The selected gallery images preview here. If you’d like to change the display order, you can drag them like this. To remove any image, just click the X.
Ok great, we’ve now added in all the product data, so click Publish at the top of the page, and command or control click View Product.

What you see here is the main layout and display of a simple product. We have not yet applied any styling or display settings, but you can see the title, price, Add to Cart button, as well as other information we added to the product.

We’ll style it soon, but first, go ahead and add in the rest of your products, data, and images, in the same manner we did for the first product.
Next I’ll walk you through creating a digital product, as well as a variable product.

Great, now that we’ve added the rest of the products, let’s go ahead and create a downloadable product.

Open any product you’d like to make downloadable. I’ll use this ebook cookbook. Scroll down to the Product data. Select Virtual, since the item does not need to be shipped, and downloadable. Notice that the Shipping tab disappeared, and there are new options below.

Click Add File, Upload your file, and click Insert File URL. Go ahead and name the file. If you’d like, you can add restrictions to your download. You can limit how many times the customer can download the file, as well as if and when the download link should expire. The customer will receive a link to download the file after purchasing.

Click Update, and that’s all there is to creating a downloadable product.

Next we’ll take a look at Variable Products.

Open a product that will have at least one variation. An example could be T-shirts that come in several sizes and/or colors or cosmetics that have multiple options for skin type and/or product size. For the bakery, I’ll choose these Gourmet Donuts, since they come in several flavors and dietary options.

Scroll down to Product data, and select Variable Product. You’ll notice that the pricing information disappears, and the Variations tab now appears.

But before we can set up Variations, we’ll need to first add Attributes to the product. Click the Attributes Tab, and click, Add Custom Attribute. A custom attribute is an attribute that will be used only for this product. Name it; I’ll use “Flavor,”…then add each variation value, separated by the pipe symbol. In this case, I’ll enter three delicious flavor options. Select Used for variations and click Save Attributes.

Now go back to Variations. Click Go next to Add Variation. Next to Any Flavor I’ll click to Expand it, and now we can add the pricing and any other info that appears below. These will be the default settings for any variation.

Let’s preview our changes. And you can see that now there’s an option to choose the donut flavor, and the image and price remain constant for each option.

If you’d like for different content to appear, depending on the variation, such as specific images or pricing, you’ll need to set up each variation up separately. To do this, go back to the product…Variations
I’ll click Any Flavour, and change it to the first variation from the dropdown. Now add the image and description for this variation.

If you’d like to update the content for each variation, you can select Create variations from all attributes, and you’ll see that the remaining variations have all been added in one shot. Alternatively, if you only want to make changes to select variations, you can create them individually, as we did before with the Add Variation option.

Now I’ll add an image….and price. I’ll set a different price for this flavor variation. Add in any other relevant information below. Now repeat for any remaining variations.
Let’s now preview our changes. You can see the main product image and price range. Choosing a flavor, switches the image, description and price, where relevant.

In the event that no image was added to a variation, it will default to the main product image.

Ok, our product entries are coming along nicely. But what if you need another set of options for a product? No problem. You can do that too. Let’s set them now, and while we’re at it, see how to create a Global Attribute, for options you will need again with other products. In this case, I’ll add an option for Dietary Options, because I want to offer this option on some of the other bakery items.

Go back to your product screen, and under Products, click Attributes. Type in a name for the attribute and click Add attribute. Click Configure terms… add in a variation…and click to Add new. Do these for each variation.
Go back to the variable product, and Attributes. From the dropdown, select the Attribute you just added and click Add. Select used for variations. Click Select all to choose each option. In the event you don’t want to use all the variations for this product, just X them out. Click Save Attributes.
Now go over to Variations, and you’ll see the new attribute has been added to each variation.

Now Update and Preview.

A second option has been added to the Gourmet Doughnuts. Customers can now choose both the Flavor and Dietary Option.

And now you know how to add the most common types of products to your store. WooCommerce has several other plugins, which you can use to add other types of Products, such as bundled products and subscriptions. If you require these types of products for your store, you can search for them in the WordPress plugin repository and add them to your site.

Next up, we’ll review the Theme Builder as it relates to WooCommerce, and design our shop pages. Keep watching to learn how!

Ok, so now that we’ve added in all our products, it’s time to get down to business and start styling our shop templates!

We’ll use Elementor’s Theme Builder to create, design, and save our shop templates.

From the Dashboard, navigate to Templates > Theme Builder > Try it Now.

The Theme Builder provides an easy to use interface for managing the templates associated with your website.

As you can see we’ve already created several templates for our website including the header, footer, 404 page & blog templates.

If you’re unsure how to set up these templates, check out our dedicated tutorials on the channel.

At first glance, you’ll have a birds eye view with thumbnails of the site parts templates that make up your site. Just click on any part to drill down and you’ll see more information, as well as management and editing options for that template.

For our store, we will create several templates which will connect with WooCommerce. These include the Single Product template, Products Archive templates, and Search templates.

Please note that the Single Product and Products Archive template options will only show once you’ve installed the WooCommerce plugin.

We’ll begin with the Single Product template.

Before we begin creating it, let’s take a quick look at the finished Product Page, to get a better idea of what we’ll be building.

The Product page consists of several elements. On the left are product image thumbnails

On the right, at the top are the WooCommerce breadcrumbs. By breadcrumbs, we mean the navigational path to this particular page, which helps the visitor understand where in your catalog they are located, and allows them to click directly back to another section.

Below that, is the product title, star rating, short product description, the product price, as well as the quantity field, and an add to cart button.

If we scroll down a little further we will see the full description, as well as any reviews which have been left.

And finally, we have a section displaying related products.

Let’s head back to the Theme Builder, and add a new single product template.

This brings us directly into the Elementor Library, where you’ll find the option to use an Elementor block or page template, as well as the ability to insert your own saved template.

We’re going to create our Single Product page from scratch, so go ahead and dismiss the Library.

The first thing you’ll notice is that the website header and footer have already been pulled into the template, which is exactly what we need. This is because the header and footer templates have been set to automatically display on all the pages on the website.

Click the Plus icon to add a section, and select the first two-column layout.

Let’s start by adding in all the widgets we’ll need for this section.

This will give us a good idea of the basic structure, and then we can add the content and style to them one by one.

In the widget panel, select and drag the Product Images widget into the first column.

For the second column drag in the breadcrumbs widget…

the Product Title widget…

then the Product Rating widget…notice how this widget is currently grayed out. This is because the current product displayed in the editor doesn’t have any ratings yet. We’ll fix this soon so we’re able to preview this widget…

next, the Short Description Widget…

After that, the Products price widget…

and last but not least the Add to cart widget.

If you would like to change the product displayed here in the editor you can change this by clicking the gear icon, and Preview settings.

Begin typing in the name of the product you’d like to preview…

Select it…

Then select ‘Apply & Preview’…

You see now the ‘product ratings’ widget is showing correctly as this product has a couple of reviews…

OK, great, the first section is already starting to take shape. Now let’s go through each widget and update them with the right content and styling.

Select the Product Images widget.

The first option here is to set whether or not we would like the sales flash to appear. For this to show our product must have a sale price entered. Let’s quickly add one to our ‘French Baguette’ so we can see this in the editor.

In a new tab open the ‘All Products’ screen and scroll down to ‘French Baguette’. We showed you earlier how to add a sales price in the product page, but we can actually amend many details about our products from this screen as well.

Select ‘Quick Edit’ and you’ll be presented with a whole host of options for your product including the price fields.

Let’s add £3.00 in the ‘Sales Field’ and then update our product.

Now back in the editor, save your template as a draft and refresh the page.

As you can see the style badge is now showing.

Add a border by clicking the Border type drop down. There are several different border types to choose from. After selecting a border type you can change the width…color…and border radius.

Add space between the top and bottom images by dragging the space slider…or typing in a value.

The next settings focus on the Thumbnail images. Once again, you can choose from several border options, as well as set the spacing between thumbnails.

Go ahead and add some spacing to the thumbnails.

Great, let’s move on to the breadcrumbs next.

Select the text color…

Then select the link color…

Next, set the Typography…

The last option is for the alignment.

We’ll leave it on the default left alignment.

Now select the Product title.

This widget is automatically set to dynamically pull in the name of the product.

Let’s leave the other default content settings, and move over to the Style tab.

Set your text color…

And typography…

You can also apply a text shadow and blend mode if required.

Next we’ll style the ‘Product Rating Widget’.

We can apply styles to the star…

Empty star…

Link…

As well as amend the typography…

Change the star size…

The space between the stars and text…

And the alignment of the entire widget.

Select the ‘Short Description’ widget next.

Set your alignment…

Text color…

And typography.

Now let’s set our standard and sale price styles.

We’ll set our alignment…

Color…

Typography…

And now the sale styles…

‘Stacked’ allows you to control if the sale price is displayed below or to the side of the main price…

And finally we’ll add some space between the two values.

The final widget in this immediate section is the add to cart button and quantity field.

First let’s style the button

Let’s set our alignment to the left…

Typography using our global styles…

Border type as solid, with 2px on all sides…

We’ll see the border radius to 0px for nice neat corners…

And then our padding…

Now let’s set our colors for both the normal & hover states.

That’s the styling for our button finished, let’s switch to the quantity tab next…

We can first add spacing between the quantity field and button…

Then the typography…

Set the border to match our button…

And then our normal & focus colors…

The final set of styles is for the variations. This particular product doesn’t have any variations, so let’s switch the product preview so we can see our changes.

(…search doughnuts….)

We can amend the width of this section…

The spacing between the variations and button…

Set your colors & typography for the label…

And then the same for the select field…

Before we move onto the next widget, let’s apply some styles to this section to fit in with the rest of our website.

Select the section…

And then set a background image in the style tab…

Add some margin to the top & bottom…

And some padding…

Now select the column which holds the product data and add some padding…

OK, that looks great.

Let’s now add the product data tabs…

Add a new section…

Then drop in the product data tabs widget…

We can set the colors for the tabs first of all…

We’re going to leave the default colors for our store, but notice how you can amend the colors for both the normal and active tabs if required.

Next we’ll set the typography…

And if required you can amend the border radius…

Now switch to the ‘Panel’ tab…

Here we are able to amend the styles for the contents of our tabs…

Set colors & typography for the content itself…

And then the heading…

Finally you can set a border width, radius and box shadow if required.

The last widget we’ll add to our product template is the ‘Related Products’ widget.

This widget is great to use as it will display additional products to your website users which are relevant to what they’re currently looking at.

Create another section…and add some padding…

And drop in the ‘Related Products’ widget…

We can first of all amend the content by setting the…

Products per page…

Columns…

How they’re ordered…

And whether we would like them to be ascending or descending…

Now switch to the style tab where you can see we have a whole host of styling options available.

We’ll set the column & row gaps first…

And then the alignment…

We can add a border to our images if required…

And amend the spacing between the image and title…

The next few sections will allow us to control the colors, typography & spacing for the…

Title…

Rating….

Price…

& Regular price…

We can then style the button. Let’s amend this so it matches the rest of our buttons…

The final option here is style the ‘View Cart’ link. To preview this, select ‘Add to Cart’ and then make your amendments.

Switch to the heading tab now…

You can choose whether to show or hide this element…

Set the color…

Font…

Alignment…

And spacing.

Up next is the styling options for the box which holds all of the previous elements.

If I add a border you can see exactly what I mean…

Here we can add a border radius..

Amend the padding…

And set the styles for both the normal & hover states…

The final option here is to amend the ‘Sale Flash’.

You can of course toggle this option on or off.

Set the text & background colors…

As well as the typography…

We can then change the border radius…width & height.

Finally we can choose to display the sales badge on the right or left of the box and also the distance.

Before we save and preview our new template, let’s first rename it by selecting the gear icon. Change the title to something which will allow you to easily identify this template for future reference.

We’ll call ours ‘Single Product Template’.

Before we publish our template, we have one last step.

To the right of the ‘Publish’ button you’ll see a small arrow. Selecting this will allow you to navigate to the ‘Display Settings’.

Here we can set where we would like our template to display.

Select ‘Add Condition’…

And you can see Elementor does a great job of automatically selecting ‘Products’ as our chosen location.

By selecting the dropdown arrow you can see we are able to set specific instructions on where we would like to display this template.

For example, we may only want this template to display for products in our ‘Recipe’ category.

We can also add multiple rules here if required, and can also set these rules to exclude specific products and categories.

In our store, we simply need one template for all products so that’s what we’ll select here.

Now go ahead and publish your template.

OK, fantastic! As you can see our single product template is now complete and looks great.

In part 1 of this lesson we learnt about the templates which make up a WooCommerce store. Now we’ll explore how to create our archive and search templates.

Our store will use two Product Archive templates.

The first will be displayed when somebody visits our ‘Shop’ page which will show the various categories which we set up earlier on.

Upon selecting one of these categories, our website visitors will then be taken to our second archive template, which displays the products themselves in a grid layout.

Let’s head back to the theme builder now and add a new ‘Product Archive Template’.

The first thing we’ll do is add in this header section which we’ve previously saved as a template. It contains our page title, a short description and will provide consistency across all of our template files.

Now, add in a new section and give it some padding.

In the widgets panel, find and drop in the ‘Product Categories’ widget. This widget will automatically display any categories which we’ve set up for our store.

Several default configurations have already been applied. Let’s make some changes so that this shows exactly how we’d like it to.

Set the columns to ‘3’.

And the category count to ‘3’.

Now switch to the ‘Query’ tab.

By default this widget is set to show all categories, but you can amend this to show a manual selection, by parent or current subcategory.

We’ll choose ‘manual’ and then select the categories we would like to display on our shop page.

Note how each category has its own image. This is because we set them earlier on when creating our categories.

If any categories are empty, we can choose to hide them here.

And finally we can amend the order by name, slug, description or count and also to be descending or ascending.

Now switch over to the style tab.

You can first of all amend the column and row gaps…

And then the alignment…

Add a border type…

Width…

Color…

Radius…

And spacing, if required.

And then style the color and typography for both the title and count.

Before we publish this template, let’s rename it just like we did with our single product template.

Let’s now publish our template and set the display conditions.

Select ‘publish’…

Then ‘add condition’…

Now in the dropdown select ‘shop page’ to ensure this template is shown every time somebody visits the main shop page on your website.

Finally select ‘save & close’ and now let’s visit the website to ensure this is working correctly.

Now let’s create the template which is shown when somebody selects one of the categories on our shop page.

Again, back in the theme builder add another ‘product archive’ template.

Just like before we’re going to add a previously made section in this template file, however this one is using dynamic content so that it always shows the correct title & description.

Select the title and you can see we’ve selected ‘Products Terms’ in the dynamic field and ‘Product Category’.

Similar to the title, we’ve set this to dynamically pull in the archive description.

All of these values were set earlier on when we created our categories.

Now add in a new section…

Apply some padding…

And then drop in the ‘Products’ widget.

First set your columns…

And rows…

Enabling pagination opens up some additional options…

Allow order will add a drop down field…

And ‘show result count’ adds the number of results to the widget.

Switching to the query tab now, we are able to specify what content is shown in this widget.

Because we’re going to use this template to display products of a certain category, we are going to need to select ‘Current Query’ to obtain the desired results.

This widget can be used elsewhere however and you’ll notice that we can also set it to display…

Latest products, products on sale, featured products & also a manual selection.

Switch to the style tab now and let’s explore what options we have.

First we can set our styles for the products themselves…

Set your gap distances…

And alignment…

Now add a border if required…

And spacing…

Now scroll down and set your styles & spacing for the title…

Price…

And Regular Price…

Now let’s apply our ‘Normal’ & ‘Hover’ styles so that our ‘Add to Cart’ buttons match the rest of our website…

And finally the ‘View Cart’ styles…

Now open the box tab…

The default settings work great for us, but if you need to you can add a border…

Border radius…

Padding…

As well as shadow, background colors and border colors for both normal & hover states.

Finally we can set the styles for our sales flash…

Before we rename and publish this template, let’s add in the testimonial block template we previously created to fill the page out.

Now rename the template…

Select publish…

Add condition…

Select ‘Product Categories’…and leave it on ‘All’ to ensure this layout appears on all product categories.

OK, great. Let’s now visit the website and test all of the templates we’ve made so far.

We’ll start on the homepage and select ‘Shop’…

Now select one of the categories…

Finally choose one of the products…

As you can see, all of the templates are working great on the live website. Let’s move onto our final template which is for the search results.

First add a new ‘search’ template in the theme builder…

Again, we have a pre-made hero section to add here, so let’s drop this in…

The title is set to use dynamic content and will automatically display the search term entered by the user.

To add your own search term, select the gear icon…

Preview settings…

Enter your search term and click ‘Apply & Preview’.

Now add a new section…

And add some padding…

Drop in the ‘Archive Posts’ widget and instantly we can see the search results appear.

Now let’s make some adjustments so it appears exactly how we’d like it to…

You can also amend the pagination configuration & ‘Nothing Found’ message if required.

Now let’s style the search results…

Set your column…and row gap distance…

And then your alignment.

Add a border radius if required…

And spacing…

You can also apply a CSS filter to both the normal & hover states.

Under content we can set our colors, typography & spacing for the title & excerpt.

And finally apply your styles for the pagination…

And ‘Nothing Found Message’.

This concludes the content and styling options, let’s now rename our template…

And publish…

Add condition…

Select ‘Search Results’ from the dropdown…

And save.

And there we have it.

When somebody performs a search on our website, they will be directed to the search template which looks great.

Using Elementor’s theme builder makes it easy to both create and manage the template files associated with your website.

Make the most of this amazing feature and wow your website visitors with entirely branded content to keep them engaged on your website.

In our next lesson we’ll take a look at the page associated with running a WooCommerce store.

When we first installed WooCommerce it automatically created several important pages for us. These pages are vital for a successful shopping experience for your customers.

If we navigate to our website pages, you will see that WooCommerce has created four pages called ‘Cart, Checkout, My Account & Shop’.

Here at Elementor we’ve been working hard on three new widgets which will allow for full customisation of the Cart, Checkout & My Account pages. Once released we’ll update this video with full instructions on how you can implement them into your store.

We’ve already explored the Shop section in our previous lesson, so let’s focus on the cart, checkout and my account pages.

The first page we’ll investigate is the cart page.

This is the page which customers can view once they’ve added an item to their cart. The page will allow them to review their order and make any necessary amendments, like changing the quantity, or removing an item.

If you select the title of the page, we are taken to the default WordPress editing screen.

Here you can see that WooCommerce has automatically inserted a shortcode into the page. This shortcode will dynamically show the cart on the live website.

Lets now select ‘Edit with Elementor’ and add in some other elements to the page.

The shortcode is carried across into the Elementor editor and you should now see the cart within the editor.

There is also a WooCommerce widget which can be dropped into the editor. By using this you are able to select the WooCommerce section you would like to appear. This works in exactly the same way as the already embedded shortcode, so feel free to use the method of your preference.

As you can see the default Elementor layout is showing the page name. Let’s remove this by selecting the gear icon in the bottom left hand corner and toggling the hide title option.

Next, we’ll amend the padding around the cart area so that the spacing aligns with the rest of our website.

The final step is to add in a hero section which contains our page title. We’ve saved our hero section as a template, so we’ll simply drop this into position and then amend the title.

Let’s now preview our cart page to see what it looks like.

OK, great. Let’s save this page and move onto the ‘Checkout’ page.

The checkout page is the final step in the process of a customer buying a product from you.

They will first of all see the fields they are required to fill in, like their name, contact information and billing address.

Customers can also amend the shipping options here if required and select their chosen payment method.

Once the transaction has successfully been completed, this same page will also display the order confirmation.

Just like before we can see that the WooCommerce shortcode has automatically been added and if we apply the same steps as before in the Elementor editor, our page will be transformed to match our website.

We’ll first remove the page title…

Amend the padding around the shortcode…

And then add in…

And amend the text in the header section…

Let’s now check this on the front end of our website.

The last WooCommerce page we’re going to take a look at is the my account page.

Let’s head to All Pages and now let’s select ‘My Account’.

Just like before we can see that WooCommerce has automatically added a shortcode. This shortcode will display the my account area.

The account area is where your customers can view the details of any orders they have placed, as well as amend any account settings like their address & password.

Let’s again select ‘Edit with Elementor’ to customise our account page to fit in with the style of our website.

Work your way through the same steps which we followed when adjusting the cart and checkout pages…

And then check everything on the front end of your website.

OK, that looks great!

WooCommerce does a great job of automatically creating these essential pages for your store.

Combined with the ease of editing these pages in the Elementor editor, you have a solid toolkit to create an amazing store your customers will want to come back to time and time again.

In our next lesson we learn how to configure the shipping options for your store.

Understanding how to configure the WooCommerce shipping options can be overwhelming, but I’ll walk you through this step by step so you know how to set up your shipping zones, methods, options & classes.

To correctly set up our shipping options we must first understand the core concepts of the available options within WooCommerce.

Firstly, we have shipping zones. Shipping zones are geographic locations where a certain set of shipping methods and their rates apply.

Once a shipping zone has been created, we can then create shipping methods which are associated with that specific zone. In its most basic form WooCommerce allows you to set either a flat rate of shipping or free shipping method. We’ll cover both of these shortly.

Finally, we have shipping classes. Shipping classes allow us to create product specific charges, for example we’re going to create an additional shipping charge to be applied if a product is classed as ‘Heavy Goods’. This will add the appropriate fee to the customers order ensuring they are paying for the correct shipping costs.

We’ll be sure to go over each of these core aspects, but let’s start with the shipping zones.

Our store, for example, only allows products to be shipped within the UK, so let’s apply those settings to ensure nobody places an order expecting delivery overseas.

In the general tab first of all ensure we have the correct locations selected for our store.

Scroll down to the General Options and set the Shipping Location to ‘Ship to specific countries only’. You will now see a new field where you can select the country you would like to ship to. In our instance, we’re going to set this to the United Kingdom.

Notice that there were options available…

You could set this to ‘Ship to all countries you sell to’…

Ship to all countries…

And you can even disable shipping as well as shipping calculations…

Spend some time here ensuring you have explored all of the available options to make sure the configuration is correct for your store requirements.

Once you have finished, let’s save and head to the ‘Shipping’ tab.

The first thing we’re going to do is set a standard shipping charge for all orders. Before we do this however, let’s first set the Zone name and region by selecting the ‘Add Shipping Zone’ button.

In the zone name we’ll enter ‘UK’ and under zone region we will select ‘United Kingdom’.

You’ll see there is an option to limit our region to a specific ZIP or Postcode. This feature is useful if you need to further limit your delivery services to a more specific location.

Once these options have been set we are now ready to set our first shipping method. Let’s save our changes so far and then select the ‘Add shipping method’ button and now you’ll be presented with a pop-up window which asks you which shipping method you would like to create.

WooCommerce provides three default shipping methods…

Flat rate lets you charge a fixed rate for shipping.

Free shipping allows you to offer free shipping when certain conditions are met, like the use of a coupon or when a customer meets a minimum spend amount.

Local pickup gives customers the option to bypass the shipping choices and collect their order in person.

We’re going to choose ‘Flat Rate’ followed by ‘Add Shipping Method’.

Select the edit link now and a new pop-up will appear.

Here we can specify a title, whether we would like tax to be applied and a price.

We’ll call our method ‘Standard UK Shipping’…

Set the tax status to ‘taxable’…

And finally we’ll set the cost to £1.99.

Once complete, save your changes to return to the shipping zones screen.

Now it’s time to create our second shipping method. This time we’re going to create a set of rules which allows customers to receive free shipping if they spend a certain amount within our store.

Select ‘Add shipping method’.

This time we’ll choose ‘Free shipping’ from the dropdown and then select ‘Add shipping method’. Select the edit icon located underneath the ‘Free shipping’ title and we’ll leave the title as ‘Free shipping’, then under ‘Free shipping requires…’ you see there are several available options.

A valid free shipping coupon allows your customers to use a coupon during checkout to receive free shipping.

We’ll cover how to create coupons for your store in a later lesson.

A minimum order amount allows you to state a minimum spend before free shipping is enabled.

And then we have an option to set an ‘Or’ or ‘And’ rule, allowing you to combine these options.

We’re going to choose ‘A minimum order amount’ and then set the value to £20.00. This means that if the customer’s cart totals more than £20.00, they will see the free shipping option when they checkout.

If you have coupon codes enabled on your store it’s worth noting the final option here which allows you to apply the minimum order rule before a coupon discount is applied.

Once all of these sections have been configured, hit save changes to return to the shipping zones screen.

Before we move onto shipping classes we’ll first take a quick look at the shipping options.

This section provides you with some additional options to further configure your store. The first option we see is ‘Calculations’. Here we can enable or disable the shipping calculator on the cart page and we can also state whether or not we would like to hide the shipping costs until the customer has entered their address.

For our store, we’re going to leave both of these options as default.

Shipping destination controls which address is used. As standard it is set to ‘Default to customers billing address’ and we’ll leave it as this. You can change this if needed to ‘default to the customers shipping address’ and you can also force shipping to the customers billing address, meaning that the billing and shipping address must be the same.

When finished, remember to save your changes.

To finish the shipping configuration for our store let’s now create a shipping class.

In our example our shipping class is to be applied to heavy items only, meaning that if the shipping class is applied to a product it will incur an additional cost for the customer.

Navigate your way to the shipping class tab and select ‘Add shipping class’.

First of all give your shipping class a name, in our example we’re going to name it ‘Heavy Goods’.

We can leave the slug blank, as this will automatically be created once our shipping class is saved. Finally we’ll add the description… “Additional shipping charge for heavy items”, and select the ‘Save shipping classes’ button.

Now that the new shipping class has been created we will assign it to a shipping method, and then a product.

Let’s head back to the shipping zones area and select ‘UK’, followed by ‘Standard UK Shipping’.

We are now presented with some additional options because we’ve added a shipping class.

The field allows us to enter a price for our new shipping class, here we’ll enter £10.00. We’ll leave the next field blank and the final option allows us to set whether the shipping class is applied per class or per order. We’ll leave this as per class.

When finished, save your changes.

Now that we have configured our shipping class we are ready to apply it to a product.

Head over to your products screen now and find the product you would like to apply your shipping class to. In our store we have a bread basket which is heavier than all of our other products so therefore will cost more to be delivered.

Select the product and scroll down to the ‘Product Data’ section.

Here you will see the ‘Shipping’ tab, select this tab and under ‘Shipping Class’ choose your newly created shipping class.

Remember to update your product and now let’s test it out.

Everytime a customer adds this item to their cart the additional ‘Heavy Goods’ fee of £10.00 will be added to their order.

The default WooCommerce shipping options are usually enough to accommodate most basic shipping requirements, however if you find you need more flexibility and customisations there are a whole host of 3rd party add-ons which allow for a combination of configurations and integrations.

Check out the WooCommerce link in the description for more information.

In our next lesson we will learn how to integrate Stripe & PayPal into our store so that customers can make a payment.

The ability to take payments in a secure and user friendly way on any online store is crucial. There are multiple ways to take payments from your customers on a WooCommerce store, and WooCommerce provides many options for you to do this.

If you perform a quick search in the plugin repository you’ll see there are multiple 3rd party options to choose from.

In our course we’re going to explore the inbuilt PayPal Standard option first of all and then we’ll move onto integrating the free WooCommerce Stripe plugin.

Before we begin with configuring our PayPal settings, please first ensure you have an active PayPal Business account.

Navigate your way to ‘WooCommerce > Settings > Payments’ and select the ‘Set up’ button to begin. As you can see we’re presented with several options to configure and link our PayPal account.

You will also see these handy tooltips located next to several options, hovering your mouse over these brings up more information about the option.

Please note that some settings below are optional, like the IPN Email Notifications and Identity Token. We’re going to enable them all and take you through the steps on how to configure these as all stores will have slightly different setups and we’d like to cover all bases.

First, we’ll enable PayPal Standard.

Next, we have the option to amend the title and description which is shown on the checkout page. We’ll leave these as they are for our store.

Now we need to enter our PayPal email address. Be sure to double check this once you’ve entered it as an incorrect email address will not allow your website to connect to PayPal successfully.

Under advanced options we have the ability to enable a PayPal sandbox account. A sandbox account allows you to perform test transactions and to use this feature you’ll need to sign up for a developers account.

Debug log is a useful tool if you are experiencing any issues with your transactions, be sure to leave this switched off if your store is running correctly.

We’ll enable the IPN Email Notifications. This will send notifications when an Instant Payment Notification is received from PayPal indicating refunds, chargebacks and cancellations.

If your main PayPal email differs from the PayPal email entered above, you can input your main receiver email for your PayPal account here. We’ll leave this blank as ours doesn’t differ.

Now we’ll enter our PayPal Identity token. This will allow payments to be verified without the need for PayPal IPN. We’ll open our PayPal account in a new tab and navigate our way to Account Settings > Website Payments. Select the Update link next to the Website Preferences option.

Enable Auto return, and then add your store’s thank you page link in the Return URL field. Once this is added, select save.

Now enable the Payment Data Transfer and copy the identity token. Head back to your website dashboard and paste your token into the field.

Next, you can amend the invoice prefix if required.

You can opt to have WooCommerce send shipping details to PayPal to create shipping labels instead of billing. We’ll keep this enabled for our store.

And next we have an address override option. PayPal verifies addresses therefore this setting can cause errors. We recommend keeping it disabled, but it can be useful in preventing address information from being changed.

The payment action options allows you to specify if you would like payments to be captured immediately or authorise them only. If you choose to authorise them, the customer will be charged once the order status has been updated to processing or completed.

In the Image URL field we are able to set a logo to appear on the PayPal checkout page. Please note this image should be 150x50px.

And finally we have the API Credentials.

There are three fields we must populate here, they are:

API Username
API Password
API Signature

To find this information, head over to your PayPal account and navigate your way to Account Settings > API Access > Update.

On this page scroll down until you see NVP/SOAP API integration (Classic) and select Manage API Credentials.

Ensure ‘Request an API Signature’ is selected and select ‘Agree and Submit’ to generate your API Credentials.

On each credential, select show then copy and paste into your website dashboard.

Once you have done this, simply save your settings and your store is now ready to accept payments with PayPal.

The next payment processor we’ll enable in our store is Stripe. Please ensure first of all that you have already set up and configured a Stripe account with all of your relevant banking and business information.

WooCommerce provides a free plugin to allow us to connect our store with Stripe, so let’s install that first.

Head over to Plugins > Add New and search for Stripe. As you can see the official WooCommerce Stripe plugin appears first for all, so go ahead and install and activate the plugin.

If we now go back to our payments tab in our WooCommerce settings you will see that Stripe is now present and ready for us to configure. Stripe integrates with many different payment providers, but for our store we would simply like to allow customers to make payment with a credit or debit card, so we’ll be configuring the first option here.

Enable Stripe and then head to the settings screen.

And just like with PayPal, we’re able to amend the title and description which appears on the checkout page.

The Stripe plugin provides two methods of connecting your Stripe account. We can first of all select the button located in the ‘Stripe Account Keys’ area to automatically connect our account and import our account keys. Or if you prefer you can manually login into your Stripe account to copy and paste these keys over.

Let’s select the ‘Set up or link an existing Stripe account’ button and log into our Stripe account.

From here we are asked to select our business and connect…

After a few moments you will be redirected to the WooCommerce settings page and as you can see our live and secret keys have been automatically populated.

Next we must add our Webhook Endpoint to our Stripe account. Doing so ensures that we are able to receive notifications about transactions.

First copy the Webhook Endpoint and then in a new tab log into your Stripe account.

Navigate to Developers > Webhooks and select ‘Add Endpoint’. Paste the endpoint into the field and under ‘Events to send’ select ‘Receive all Events’, then ‘Add Endpoint’.

While we’re on the Webhooks page we can also grab our signing secret and enter it into our website dashboard.

Under ‘signing secret’, select ‘Click to reveal’ and paste this value into the field titled ‘Webhook Secret’.

Before we move on you’ll see in the WooCommerce settings page that Stripe provides a test mode option, these keys are not automatically populated so let’s add those now.

Over in our Stripe account we need to check the toggle ‘View test data’. Now we can copy and paste our test publishable key & test secret keys. We can also add the Webhook Endpoint to the test data, and finally the ‘Test Webhook Secret’.

With test mode still enabled, let’s save our settings so far and if we now switch over to our checkout page and select Stripe as the payment method a notice appears instructing the user that ‘Test Mode is Enabled’ and even provides some helpful instructions on how to perform a test purchase.

Let’s switch back, disable test mode and continue with our Stripe setup.

We can set our credit card form as inline, meaning the date and CSV fields will not be separate. We’ll enable this option.

Next you can control the information which is displayed on your customers invoice. We’ll simply enter ‘Bakersons’.

And like with the PayPal configuration we can control if we would like the funds to be captured immediately or when the order is set to processing or completed.

Stripe can also enable payments buttons from Apple Pay & Google Pay. If you would like to enable these on your store, you can do so here. With this option enabled you are presented with some additional configurations. You can set the type of button, as well as the theme and height.

Saved cards, if enabled, will allow users to be able to pay with a saved card during checkout. Card details are saved on the Stripe servers, and not on your store.

And finally we can enable logging of debug messages, this is helpful if you are experiencing issues with your transactions.

Save you changes and there we have it, your store is now ready to accept payments with Stripe.

If we now visit our store and proceed to the checkout page, you will see that our two payment options are now live and ready for our customers to use.

WooCommerce provides excellent integrations with many third party payment providers and many of these plugins are expertly supported and well documented. We’ve covered two of the major payment providers but be sure to explore what other options are available for your store.

In our next lesson we’ll take a look at customising our emails, creating coupons and managing our orders.

Now that our store has been created, it’s time to dive into the management aspect of running a store.

In this lesson, we will take a look at the emails associated with WooCommerce. We’ll also take a look at the customisation options which are available to ensure that all of our emails match our store’s branding.

We’ll then learn how to create and use coupon codes.

And finally we’ll take a look at the process of what happens when a customer places an order.

One of the many great things about WooCommerce is that it automatically creates all of the emails for your store. If we head over to WooCommerce > Settings > Emails, you can see the list of emails which have been created.

If you see the purple tick, it means that this email is enabled for your store.

We have the email title which also acts as a clear indicator on which action this email is linked to. Hovering over the question mark allows you to view more information about this email.

In the recipient column we can see who the email is sent to. As you can see the first few emails are admin based and are sent to the email address associated with the admin account. Where we see ‘customer’ these emails are sent to the customer who places the order.

If we now select the ‘Manage’ button we can further customise the details associated with each individual email.

As you can see we first of all have the option to enable and disable this email.

Next, we can amend the recipient. If you need to enter multiple addresses here, do so by separating them with a comma.

Both ‘Subject’ and ‘Email Heading’ can be amended if required, and you can also make use of the shortcodes provided. To view these shortcodes, hover your mouse over the question mark. Using these shortcodes will dynamically populate those fields for you.

If you would like to add any additional information to this email, you can do so here and it will be displayed at the bottom of the email.

And finally you are able to amend the email type.

Once finished, be sure to save your changes.

If we now head back to the ‘Email’ tab and scroll down, you will see that we have several options to customise our email.

We can first of all amend the ‘From name’ and ‘From address’.

Next, we can customise the template. Clicking the preview link shows you an example of what your emails will currently look like. Pretty boring I’d say so let’s make some adjustments and make the email template fit with the style of our website.

We’ll paste the URL for our logo into the ‘Header Image’ field and you can find this by visiting the media library, selecting your logo and then the ‘Copy URL to Clipboard’ button.

We can now amend the ‘Footer text’ and just like with the email title we can use the available shortcodes if required.

Change the base color to #6a5036, background & body background color to #ffffff, and the body text to #000000.

If we now save our changes and view our preview again, you can see the email template now fits in well with our store and is ready for when our store is live.

Next up we’ll explore the inbuilt coupon options in WooCommerce.

Creating coupons is a really useful feature built into WooCommerce which allows you to generate discount coupons for a variety of factors.

Head over to Marketing > Coupons and if this is your first time creating a coupon you will see the ‘Create your first coupon’ button.

Select this button and let’s go over the configuration options which are available.

We first see the ‘Coupon code’ field. We can manually type something here or use the helpful ‘Generate coupon code’ button.

Next, we can enter a description, although this is an optional field.

And then we move onto ‘Coupon data’, which is where we’ll define the rules for our coupon.

Discount type allows us to choose from a percentage, fixed cart or fixed product discount. We’ll choose percentage.

In the ‘Coupon amount’ field we’ll enter 10, as we would like our discount code to apply a 10% discount to the order.

Next, we have the option to enable free shipping with the use of this coupon code. Please note that you must have a ‘Free Shipping Method’ configured for this option to work. To find out how to set up a free shipping method, check our dedicated section on shipping.

Finally in this section we can set a coupon expiry date. If your coupon should only run for a specific amount of time, you can define that here. We’ll leave this blank as we would like our coupon to be available indefinitely.

Now, switch to the ‘Usage Restrictions’ tab, here we can set any restrictions associated with our coupon.

We first of all can specify a minimum and maximum spend, and then we can state whether this coupon can be used in conjunction with other coupons. Next, you can define if you would like to disable the use of this coupon on sale items.

The next area allows you to really fine tune the use of your coupons on specific products, categories and email addresses. Use the product and category search boxes to find these values and in the email field, you can manually type customer email addresses. This is extremely useful if you plan on sending a coupon code to a specific customer and do not wish for it to be used by anybody else.

Our discount is going to be available to everybody without any restrictions so we’ll leave these all blank.

Finally, we have the ‘Usage limits’ area.

You can state how many times you’re happy for the coupon to be used before it’s void. Leaving this blank with default to ‘Unlimited’.

Next, you can apply usage limits per item and last of all you can apply usage limits per user.

Just like with many WooCommerce settings, hover your mouse over the question mark to find out more information on these configurations.

Once you have finished configuring your coupon, select ‘Publish’ and your coupon is now ready for your customers to use.

If we now head to our store we can test to see if it works.

Add a product to the cart and proceed to the cart page…and enter your discount code…and there you go, you can see the discount of 10% is being applied to our order.

Now that your store is configured and ready for the world to see it’s important to understand what happens when a customer places an order.

We’ve configured everything so far to ensure the correct emails are sent out and also made sure that those emails are matched with your branding.

When a customer successfully places an order they will receive email confirmation of this. At the same time, an email is sent to you, the store owner which provides the details of their order.

If we visit the WordPress dashboard and open the ‘Screen Options’ dropdown, you can see that WooCommerce has a helpful widget which gives you a quick overview of any orders which have recently been placed on your website.

To view more information about any orders which have been placed, simply navigate to WooCommerce > Orders.

Here you’re presented with a list of all the orders which have been placed on your website. By default, this list will show the newest orders at the top.

The list gives you a clear to see overview of each order which has been placed, and shows you the order number, customer name, date of the order, the status of the order and the total.

If we now select the order number we are taken to the edit order screen. Here we can view more details about the customer and the order. We can also amend the status of the order, which is a very important aspect of this page.

In the status dropdown we can amend the status of the order. By default it will always show as processing. If you have completed the order and the product is on the way to the customer, simply change this to ‘completed’ and then update the page. This will send an email to your customer informing them that their order is now complete.

Next we can see that we have an ‘order actions’ dropdown. This can be helpful if you ever need to resend notifications to your customers or to regenerate the download permissions on digital products.

Another useful feature on this page is the ability to save a note to the order. As you can see these notes can be private, meaning they’ll only appear here in the admin panel. Or you can send a note to your customer.

Remember to update the order once you’ve finished making your changes.

WooCommerce makes light work of running an online store.

With its many built in features like email customisations, and coupon creation, you have an extensive toolkit at your disposal which will allow you to provide a professional and efficient service.

WooCommerce also has an easy to follow process for managing orders and with just a few clicks you are able to undertake the necessary daily admin tasks associated with running a store.

In our final lesson, we will explore some additional marketing features using both WooCommerce and Elementor to give your website visitors a great user experience, ultimately resulting in more sales for your store.

Running an online store isn’t simply a case of uploading your products once, sitting back and then hoping they sell. As a store owner you’ll need to continuously think of new ways to entice customers to purchase your products.

In this lesson we’re going to teach you a few basic marketing techniques which you can apply to your store to help push your sales higher and higher.

We’ll first create a popup.

which will suggest a product to our customers who are browsing through the store. – remove

Next, we’ll take a look at the inbuilt ‘Featured Products’ option. This will allow us to make specific products stand out which we are trying to push the sale on.

Finally, we’ll create a dedicated sales page for a single product.

So if you’re ready, let’s get started and take your store to the next level.

The first marketing element we’re going to add to our website is a popup.

Popups are a great way to inform customers of important announcements. You can use them on your store to promote products, provide recommendations, collect visitor information and much more.

The key is timing your popups so that they are helpful and not annoying. Nobody likes to be inundated with lots of popups when viewing a website, so strategically (struh tee juh kuh lee) plan yours to ensure they provide value to your customers.

In our example of using a popup on an online store, we’re going to create one which shows just once when a visitor first comes to our website. The popup will display a prompt for them to sign up to our newsletter and the reward for this will be a 10% discount on their first order.

Let’s head over to the Popups area and create our first store popup.

We’ll name ours “Newsletter Prompt”.

You can of course choose a template from the library to get started if you so wish, but we’ll create ours from scratch so will dismiss the library.

Before we add any content lets configure some general popup settings by selecting the gear icon…

Set the width to 50VH…and leave the height as ‘Fit to Content’…you can amend this to ‘Fit to Screen’ or ‘Custom’ though if required.

We’ve leave the default position rules as we’d like our popup to show directly in the middle of the screen.

And we’ll also leave the ‘Overlay’ & ‘Close Button’ as ‘Show’.

Set the animations to fade in…and fade out.

Then in the style tab…set a background image for the popup…

Set the position…attachment…repeat…and size…

The overlay we’ll leave as default..

And in the ‘Close Button’ tab set the color…and size of the close button (Primary 25).

Finally in the advanced tab….add 5% padding to all sides.

Ok, great…now let’s add some content.

Add a new one column section…and then drop in a heading widget…amend the text…and the styles (Sign up – Center – Secondary Title – 1em Line Height).

Duplicate the heading…amend the text….then the styles (And save 10% on your first order – ).

Add in our divider image.

And now add in a contact form.

Give the form a name (Newsletter Sign Up)

Remove the message field…amend the input size to medium…and hide the label.

Now amend the size of the button…and the text (Sign up).

We’ll come back to this section shortly to finalise our form settings but for now switch to the style tab and amend the text color to secondary…background color to white…border width to 0…and border radius to 0.

Now under the button styles…set the typography (Button S Text – 1em)…background color (black)…border radius (0)…and hover color (brown).

Switch back to the ‘Content’ tab and lets fine tune our form settings.

Open ‘Actions after Submit’ and by default our form will automatically be added to our submission database, as well as emailed to the admin email address.

If you select the plus icon you’ll see a whole host of additional options. These inbuilt Elementor features can be a great time saver, as they allow you to integrate your form with many third party providers as well as additional popup settings, redirections and additional emails.

For example, if you use MailChimp you could connect this form to your MailChimp account and every time a visitor fills in this form, they’ll automatically be added to your mailing list.

For more information about integrating Elementor forms with third party services, please check out the detailed instructions in our documentation.

In our example, we’re going to keep things simple by storing the submitted form in our submission database which we can then manually add to a mailing list at a later stage.

We’ll also set up an automatic email which is sent to the customer providing them with their 10% discount code.

And finally we’ll configure the popup to close, once the form has been submitted (select popup).

There aren’t any configurations to be made with the submission, so let’s move onto the automatic email.

We’ll remove the default email address first of all. Then we need to insert a shortcode into this field so that when the form is submitted the email is sent to the customer. To do this, open the form fields tab…then select email…advanced…and copy the shortcode.

Now paste this shortcode into the ‘To Field’. This will now dynamically populate this field with whichever email address has been entered on the front end of our website.

Amend the title of the email…

And then add your message…(Hey! Thanks for signing up to the Bakersons’ Newsletter. Your 10% discount is F3FSCPC4).

Please note that you can add HTML as well as shortcodes to this message field if required for in depth personalisation of your email.

Scrolling down, you’ll see that we can also control the from name…email address…as well as reply to…cc…and bcc if required. We’ll leave these as default for our form.

Finally open the popup tab…and under action set this to ‘Close Popup’. This means that once the form has been submitted, the popup will automatically close and the customer can continue browsing through our website.

If we now select ‘Publish’ we’re automatically taken to the display condition window.

Here we can define the exact display settings for our popup.

We would like to display our popup just once, to first time visitors.

Select add condition…and leave it as the default ‘entire site’. This was the popup will show to first visitors, regardless of which page they land on first.

Now under ‘Triggers’ enable ‘On Page Load’ and we’ll set this to 5 seconds.

Finally switch the ‘Advanced Rules Tab’ and under ‘Show up to X times’ we’ll set this to 1, ensuring that the popup only shows the once.

Now save and close, and your popup is ready for your store.

If we now open our store in a new window and wait a few seconds, you’ll see that the popup shows…we can fill in the form…and once we select sign up…the popup disappears and we are free to continue browsing.

Popups are a powerful marketing feature for any website and the Elementor popup builder is a valuable toolkit which allows you to create a diverse collection of popups for your site and allows for extensive configurations which go way beyond the scope of this lesson. Be sure to check out our dedicated tutorial by following the link in this video description for more information.

Now that we’ve learnt how to create a popup for our store, let’s take a look at WooCommerce’s Featured Products.

Featured products are a great way to promote specific items on your website and are extremely fast and easy to set up. Once you have set up some featured products, you can then easily display them throughout your website using the ‘Products Widget’ just like we have here on the homepage of our website.

There are two ways to set up a product as ‘featured’ in WooCommerce, and both are done on the products page, so let’s head there now.

The first method (and likely the most simple way) is to select the star in the feature column. Doing so will reload the page and as you can see this product now has a solid star and is officially now considered a featured product.

The second method is to select the ‘Quick Edit’ option. Here we can use the checkbox to indicate if we would like this product to be featured. Be sure to save your changes once you’ve made any amendments.

Let’s now choose two other products to be featured…

OK, great. Now that we’ve selected some products to be featured, let’s see how to display them on our website.

Open up the homepage in the Elementor editor first of all…and then scroll down to this section, just below our hero image.

Search for…and drop in the ‘Products Widget’.

Don’t worry about the styles for this widget just yet, we’ll fix that soon. But for now switch over to the ‘Query’ tab and under ‘Source’ select ‘Featured’. And as you can see, the four products we just set as ‘featured’ are now showing.

Lets now fix the styling, but rather than manually adjusting the styles to match the rest of our website, we can achieve this in a much more efficient way.

We’ve previously styled a ‘Products Widget’ when we created our shop templates, so let’s open that template into a new tab…right click the ‘Products Widget’ and select ‘Copy.

Now back on the homepage, right click the ‘Products Widget’ and select ‘Paste Styles’.

Wow, how easy was that!?

If we now visit our home page you can see the 4 featured products now showing in a very prominent position.

Using featured products on your store is an easy and efficient way to promote specific products in unique locations. Experiment with different combinations and locations until your find the perfect setup for your store.

In the final part of this lesson we’re going to create a dedicated sales page which sells only one product.

It’s very common for website owners to create dedicated sales pages when selling products like eBooks, courses or specialist items. Doing so provides a great user experience for the visitor as it allows you to provide a tailored experience designed specifically for the targeted product or service.

On our website we’ve created this sales page which is directly linked to a digital e-book of recipes from the bakery.

We’ve provided some sample recipes to entice the user in, a product description and then an ‘Add to cart’ button.

And as you can see, selecting the ‘Add to Cart’ button takes the user straight to the cart page for ease.

Lets jump into the Elementor editor and check out just how we added this product to our page.

As you can see we’ve pre created this page to display our header image, text, as well as our sample recipes.

If we keep scrolling you’ll see we have an empty column which is ready for our product to be added.

Let’s search for and drop in the ‘Product Widget’.

And just like we did before when creating our featured products area, we’re going to copy the styles from a previously created product widget to save us time with the styling.

Open up any template or page which is currently using this widget…copy the widget…and paste the style onto the product widget on our sales page.

Now adjust the columns and rows to 1 as we would only like to display 1 product on this page.

Lets now switch to the query tab…choose manual selection under source…and then search for our recipe ebook.

OK, great…things are starting to take shape.

Let now make some additional style adjustments…

Switch to style and add to 75px padding to the box area…change the background to white…and then apply a box shadow (25% 10 5 15 0).

Let’s now update our page and test it out.

Fantastic, our sales page is complete and is ready for us to drive traffic to.

Learning a few basic marketing techniques can really push your store to the next level.

The great thing about using Elementor and WooCommerce together, is it’s extremely easy to set up and test multiple different combinations and ideas, allowing you to find the most optimal marketing techniques for your store.

Elementor and WooCommerce really are the perfect combination.

By using these tools together you have everything you need to create an amazing online store for any type of business.

From the ease of the initial set up and configuration, to the ability to create all of your shop based templates and products, Elementor and WooCommerce are a great duo.

During this course we covered all aspects associated with building an online store with Elementor & WooCommerce and you know have the knowledge and skills required to make a success of this.

Be sure to share your shop creations with us by posting your website links in the comments.

Thank you for watching and be sure to like and subscribe to our channel for more amazing tutorials and courses.

Hey there, it’s Ash from Elementor.

In this lesson we’re going to add the menu cart widget to our website, which will help to provide a seamless shopping experience for our customers.

The menu cart is a great addition for any store, as it allows customers to view and manage their cart items without leaving their current page. It then provides a direct link to the checkout page, so your customers can pay for and finalise their order.

In this lesson…

We’ll first of all add the menu cart widget to our header template
We’ll then amend it’s positioning so that it fits perfectly with our other header elements
Then we’ll configure and style this widget to our exact requirements

If you would like an in depth tutorial on each and every aspect of this widget, please check the description below for a link to our dedicated tutorial.
Let’s get started by first opening the homepage in the Elementor Editor.

We’ll add a few products to the cart, so that when we create our menu cart we’ll have some real time products to preview.

Now select to edit the header.

We’ll first drop in the Menu Cart Widget underneath our menu…and then amend it’s positioning so that it sits in line with our other elements.
Switch back to the content tab and let’s amend these options so that our menu cart is perfect for our requirements.

Set your desired icon type…and items indicator.

We’ll configure ours to hide if empty and will also disable the subtotal.

Next, open the ‘Cart’ tab and we’ll also open the menu cart so that we can see our changes.

Here we have an array of options to fully configure our menu cart. We’re going to leave most of these default values, as they work great for our requirements.

Scroll down now until you see the ‘Button’ area. We’ll hide the ‘View Cart’ button, and move the ‘Checkout’ button to the bottom of the container.

Open the ‘Additional Options’ tab next, and set the cart to open each time an item is added.

And as you can see, if we scroll down and add a product, the menu cart opens and displays the newly added item.

Now that we’ve configured our menu cart it’s time to switch over to the style tab and set the appearance.

Let’s hide the side cart first, and then style the menu cart icon.

We’ll set the icon color…border width….and size.

Now reopen the side cart again, and open the cart tab to set these styles.

Set the padding to 50px on all sides.

We’ll set the size and color for the close cart icon.

The size and color for the remove item icon.

And the color…typography…and width for the subtotal.

Now open the products tab.

Set your color for the product title.

Color and typography for the product price.

And styles for the button normal state…as well as the button hover state.

Let’s now save the changes to our header and check this out on the front end of our website.

As you can see, when we add products to our cart, the side cart automatically opens and is populated with our newly added products.

We can remove items if we so wish, and also head to the checkout page to complete our order.
Make good use of the menu cart widget to ensure your customers receive a flawless and user friendly experience when browning your store.

Thank you for watching, be sure to comment below with any questions, and don’t forget to subscribe to our channel for more amazing courses and tutorials.

Hey there, it’s Ash from Elementor.

In this lesson I’m going to teach you how to use WooCommerce Dynamic Tags on your website.

We’ll be building this popup which will be populated using dynamic data, all pulled straight from our WooCommerce products.

To achieve this we’ll undertake the following:

We’ll first create and configure our popup
Then we’ll populate it using various widgets, columns and sections. Many of which will display data using dynamic tags.
And finally we’ll set our display conditions, so that the popup shows when a user tries to leave the website

Elementor makes displaying dynamic data extremely straightforward, if you need to familiarise yourself with this feature, you’ll find a link in the description below to our dedicated tutorial.
We’ll begin the WordPress dashboard.

Then head over to Templates > Popups, and add a new pop-up.

Give your pop-up a name, and then select ‘Create Template’.

Dismiss the library…
…and then select the gear icon, located in the bottom left corner.

We’ll set the width to 70vw…

And entrance and exit animations to fade-in and fade-out.
Now add a new two column section.

Set it to full-width and then amend the padding on the first column.

Drop in a heading widget…amend the text…alignment….and typography.
We’ll add in a divider image.
Next we’ll drop in another heading widget, and this time instead of manually amending the text, we’ll set it using dynamic content.

Select the dynamic tags icon, and scroll down until you see ‘Product Title’.

Open the dynamic options by selecting the wrench icon, select ‘All’ and then search for your product.

Now set the alignment…color…and padding.
Add in another heading widget and again, select the dynamics tags icon and this time choose ‘Product Price’. Select the wrench icon and search for your product.

By default, you will see both the normal and sale price. We can amend to show just the sale price but using the ‘Format Dropdown’.

If we now open the ‘Advanced’ tab you’ll see we can enter text to display before and after our dynamic value, as well as fallback text.

In the after field, enter a space followed by “/ per kg”.

Once you’ve done this, set your alignment…and typography.
Now search for and drop in the ‘Custom Add to Cart’ widget.

Search for your product…Amend the text…Alignment…Remove the icon…

And then in the style tab adjust the typography…normal colors…add a border…border width…border color…border radius…then set the hover colors for the button.
To continue styling our popup, we’re going to set the background image of the second column to automatically display the product image.

To do this, select the column…then go to style…background…and choose classic.

Select the dynamic tags icon, choose product image and then search for your product.

Set the position…and size.

OK, that’s looking great. Now let’s check our design for tablet and mobile devices as well.
Open responsive mode and then switch to tablet first of all.

We’ll set each column to take up 100% of the available width first of all, which will stack them on top of one another.

This would look better if the image was placed on top, so select the section and then open the advanced tab and head to the responsive area. Here we amend the columns so that they reverse, let’s do this for both tablet and mobile devices.

Now drop a spacer widget into the column and set it’s height.

Latestly, amend the padding on the second column.

Switch to mobile view next…and make any necessary amendments.
Once finished, close responsive mode and now let’s style the close button.

Select the gear icon and head to style > close button.

Set the normal color….hover color…and size.
Now that we’ve finished creating and styling our popup, it’s time to publish and set it’s display conditions.

Select the ‘Publish’ button, then choose ‘Add Condition’.

By default, it will show across the entire website, and this is what we’ll leave it as.

Next, select ‘Triggers’ and activate ‘On Page Exit Intent’. This ensures the popup appears when a user is about to leave the page….hopefully enticing them into purchasing a product before they go.

And finally to ensure that our popup isn’t too intrusive, we’ll set advanced rule to only display once.

When finished, save and close, and now your popup is ready.

If we now visit our website and act as if we’re about to leave, you can see the popup fades in and displays our offer.
Outro
Utilizing popups on your store can be really beneficial in both promoting products and engaging with your customers.

By using this helpful Elementor feature coupled together with WooCommerce Dynamic Tags, you have a powerful toolkit at your disposal to drive more sales for your business.

Thank you for watching, be sure to comment below with any questions, and don’t forget to subscribe to our channel for more amazing courses and tutorials.