{"id":5625,"date":"2021-07-29T10:03:02","date_gmt":"2021-07-29T10:03:02","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=5625"},"modified":"2023-02-21T09:55:12","modified_gmt":"2023-02-21T09:55:12","slug":"building-an-online-store-with-woocommerce","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/","title":{"rendered":"Building an online store with WooCommerce"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5625\" class=\"elementor elementor-5625\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-429d5ee4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"429d5ee4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-52102897\" data-id=\"52102897\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-64506387 elementor-layout-start e-tabs-view-vertical elementor-widget elementor-widget-video-playlist\" data-id=\"64506387\" data-element_type=\"widget\" data-settings=\"{&quot;playlist_title&quot;:&quot;Building an online store with WooCommerce&quot;,&quot;tabs&quot;:[{&quot;title&quot;:&quot;Building an online store with WooCommerce&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=uR9YmvkwtIk&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=1&quot;,&quot;duration&quot;:&quot;1:28&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;_id&quot;:&quot;08f9296&quot;,&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;In this course we will create this store for Bakersons which is a fictitious local bakery which sells delicious baked goods to their customers.&lt;\\\/p&gt;&lt;p&gt;In this course we\\u2019ll cover:&lt;br \\\/&gt;\\u2714\\ufe0e How to install, set-up and configure WooCommerce&lt;br \\\/&gt;\\u2714\\ufe0e How to create products and services to sell on your store&lt;br \\\/&gt;\\u2714\\ufe0e How to build your store templates using the Elementor theme builder&lt;br \\\/&gt;\\u2714\\ufe0e How to configure various shipping options&lt;br \\\/&gt;\\u2714\\ufe0e How to connect PayPal &amp; Stripe to your store&lt;br \\\/&gt;\\u2714\\ufe0e How to customise your store emails as well as creating coupon codes and managing your orders once your store is live&lt;br \\\/&gt;\\u2714\\ufe0e Additional marketing options, like creating pop-ups, setting featured products and creating sales pages&lt;\\\/p&gt;&lt;p&gt;Be sure to jump to any of these sections if you\\u2019re looking for assistance in a specific area.&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hey, it\\u2019s Ash from Elementor.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;In this course we will create this store for Bakersons which is a fictitious local bakery which sells delicious baked goods to their customers.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll cover:&lt;\\\/p&gt;&lt;ol&gt;&lt;li&gt;How to install, set-up and configure WooCommerce&lt;\\\/li&gt;&lt;li&gt;How to create products and services to sell on your store&lt;\\\/li&gt;&lt;li&gt;How to build your store templates using the Elementor theme builder&lt;\\\/li&gt;&lt;li&gt;Additional marketing options, like creating pop-ups, setting featured products and creating sales pages&lt;\\\/li&gt;&lt;li&gt;How to configure various shipping options&lt;\\\/li&gt;&lt;li&gt;How to connect PayPal &amp; Stripe to your store&lt;\\\/li&gt;&lt;li&gt;How to customise your store emails as well as creating coupon codes and managing your orders once your store is live&lt;\\\/li&gt;&lt;\\\/ol&gt;&lt;p&gt;Be sure to jump to any of these sections if you\\u2019re looking for assistance in a specific area and don\\u2019t forget to save this course for future reference.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s get started and learn how to build an online store with Elementor &amp; WooCommerce.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;title&quot;:&quot;Important First Steps&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=1czN1ARBP4U&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=2&quot;,&quot;duration&quot;:&quot;3:45&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;_id&quot;:&quot;040e7e7&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we&#039;ll learn about the important first steps which must be undertaken before creating and launching an online store.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e Web Hosting Requirements when running an online store&lt;br \\\/&gt;\\u2714\\ufe0e The importance of an active SSL Certificate&lt;br \\\/&gt;\\u2714\\ufe0e Benefits of using a Security Plugin&lt;br \\\/&gt;\\u2714\\ufe0e How to install the Hello Elementor Theme&lt;br \\\/&gt;\\u2714\\ufe0e How to install Elementor &amp; Elementor Pro&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Before we install our theme and the necessary plugins, let\\u2019s first explore some important aspects involved with running an online store.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Ensure that your web hosting is suitable enough to handle this and keep a close on the resources you\\u2019re using to ensure that your customers are receiving a great experience when visiting your store.&lt;\\\/p&gt;&lt;p&gt;To find out more about choosing a suitable web host, check out the dedicated lesson in our performance course.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Many web hosts provide these for free, but if yours doesn\\u2019t there are many options available, both free and premium. Consult your web host for more information about installing an SSL certificate.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Using a security plugin can be very beneficial and with a quick search in the WordPress repository you\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;Finally it is a good idea to enable Captacha on your website. Google provides an excellent free service here called reCaptacha.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Using the free plugin \\u2018Simple Google reCaptcha\\u2019 will easily allow you to add reCaptacha to all aspects of your website, including WooCommerce.&lt;\\\/p&gt;&lt;p&gt;Moving on, this course will cover all aspects of creating an online store with Elementor &amp; WooCommerce, however to ensure you are able to follow along with confidence we recommend that you have at least basic familiarity with Elementor &amp; Elementor Pro. This includes using sections, columns, widgets and basic knowledge of the theme builder.&lt;\\\/p&gt;&lt;p&gt;If you need to learn more about using Elementor please refer to the links in the description.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll be using the free lightweight Hello Elementor theme on our store.&lt;\\\/p&gt;&lt;p&gt;To install this, head over to the themes areas and select the \\u2018Add New\\u2019 button.&lt;\\\/p&gt;&lt;p&gt;Switch to the popular tab then install and activate the theme.&lt;\\\/p&gt;&lt;p&gt;As you can now see we are prompted to install Elementor.&lt;\\\/p&gt;&lt;p&gt;Select the \\u2018Install Elementor\\u2019 button\\u2026&lt;\\\/p&gt;&lt;p&gt;And activate\\u2026&lt;\\\/p&gt;&lt;p&gt;Next, we\\u2019ll install Elementor Pro.&lt;\\\/p&gt;&lt;p&gt;Log into your Elementor Pro account and download the latest version of the plugin.&lt;\\\/p&gt;&lt;p&gt;Back in the plugins area let\\u2019s now upload the plugin...&lt;\\\/p&gt;&lt;p&gt;Activate\\u2026&lt;\\\/p&gt;&lt;p&gt;And connect to our Elementor account.&lt;\\\/p&gt;&lt;p&gt;Building and running an online store can be a daunting task, but with the right preparation and planning you\\u2019ll lessen the risk of running into problems throughout the project.&lt;\\\/p&gt;&lt;p&gt;In our next lesson we\\u2019re going to go through the entire WooCommerce installation process, configure many of the settings for our store and also set up our taxes.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;6e526f9&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=R0n_3s0wlYA&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=3&quot;,&quot;title&quot;:&quot;Install &amp; Configure WooCommerce&quot;,&quot;duration&quot;:&quot;14:07&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will cover how to install, activate and set up WooCommerce. We\\u2019ll walk you through the setup process step by step whilst exploring the pages which are associated with WooCommerce. Finally we will learn how to configure the tax settings as well as adding a privacy policy.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e How to install and activate WooCommerce&lt;br \\\/&gt;\\u2714\\ufe0e General WooCommerce setup and configuration&lt;br \\\/&gt;\\u2714\\ufe0e Understanding WooCommerce pages&lt;br \\\/&gt;\\u2714\\ufe0e WooCommerce general settings&lt;br \\\/&gt;\\u2714\\ufe0e Tax configurations&lt;br \\\/&gt;\\u2714\\ufe0e Adding a privacy policy&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Now that we have a good understanding of what is required when owning an online store and have undertaken some important first steps, let\\u2019s head back into the WordPress dashboard and explore the WooCommerce plugin.&lt;\\\/p&gt;&lt;p&gt;To get started with WooCommerce we must first install their plugin.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s head to the plugins area and select \\u2018add new\\u2019.&lt;\\\/p&gt;&lt;p&gt;Type \\u201cWooCommerce\\u201d into the search field and once the results have loaded you should see the WooCommerce plugin as the first result.&lt;\\\/p&gt;&lt;p&gt;Select the \\u2018Install Now\\u2019 button and wait a few moments for the plugin to install.&lt;\\\/p&gt;&lt;p&gt;Once complete you can then activate the plugin.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;If you would prefer to manually set up your store, you can select the \\u2018Skip\\u2019 option located at the bottom of the page. All of these details can be entered manually at a later stage if required.&lt;\\\/p&gt;&lt;p&gt;The first option you\\u2019ll see enables you to input your store address. Once you have entered your address select continue.&lt;\\\/p&gt;&lt;p&gt;You will now be asked if you would like to share tracking data, we\\u2019ll select \\u2018No Thanks\\u2019, but this decision is entirely up to you.&lt;\\\/p&gt;&lt;p&gt;Next, choose the appropriate industry and continue.&lt;\\\/p&gt;&lt;p&gt;The next screen will allow you to specify the types of products you are going to sell. In our store we plan on selling \\u2018physical\\u2019 &amp; \\u2018downloadable\\u2019 products, so these are the two options we\\u2019ll select. You\\u2019ll see that WooCommerce offers several other premium product types, you can select the info icon to find out more about these.&lt;\\\/p&gt;&lt;p&gt;In the next area we can enter some data about our products and whether we currently sell elsewhere. We\\u2019ll select 1-10 products in the first field and \\u2018Yes, in person at physical stores &amp; events\\u2019 in the second. Under \\u201cWhat\\u2019s your current annual revenue\\u201d, we\\u2019ll set the appropriate amount.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll uncheck the recommended features for now, but please note these can all be added at a later stage if required.&lt;\\\/p&gt;&lt;p&gt;The final step in our set-up is to tell WooCommerce which theme we would like to use. Our website currently uses the \\u2018Hello Elementor\\u2019 theme and we plan to continue doing so, so this is what we\\u2019ll select.&lt;\\\/p&gt;&lt;p&gt;WooCommerce will now ask if you would like to install the JetPack plugin. We\\u2019re going to select \\u2018No thanks\\u2019.&lt;\\\/p&gt;&lt;p&gt;Ok, the initial store set-up is now complete and as you can see we are taken to the WooCommerce home screen.&lt;\\\/p&gt;&lt;p&gt;We will revisit the store settings later in the course to further configure other aspects of the store like shipping, taxes &amp; payment providers.&lt;\\\/p&gt;&lt;p&gt;Let&#039;s close the welcome pop-up window and head over to the pages section to better understand the pages associated with WooCommerce.&lt;\\\/p&gt;&lt;p&gt;As you can see WooCommerce has automatically created several pages for your new store.&lt;\\\/p&gt;&lt;p&gt;The first three pages, \\u2018Cart\\u2019, \\u2018Checkout\\u2019, and \\u2018My Account\\u2019 can all be edited here using the Elementor editor.&lt;\\\/p&gt;&lt;p&gt;The \\u2018Cart\\u2019 page will allow your customers to view, amend and review the products they\\u2019ve added for purchase.&lt;\\\/p&gt;&lt;p&gt;The \\u2018Checkout\\u2019 page is where your customer will enter their billing, shipping and payment information.&lt;\\\/p&gt;&lt;p&gt;And finally the \\u2018My Account\\u2019 page is where you customers can view their order details, amend their account settings like billing information or update their password.&lt;\\\/p&gt;&lt;p&gt;The fourth page which WooCommerce has automatically created is \\u2018Shop\\u2019. This page will display your product archive and can be edited using the Elementor Theme Builder which we explore later in the course.&lt;\\\/p&gt;&lt;p&gt;Now that we have acquainted ourselves with the pages associated with WooCommerce we can take a further look at the store settings.&lt;\\\/p&gt;&lt;p&gt;Head to WooCommerce &gt; Settings.&lt;\\\/p&gt;&lt;p&gt;The settings area contains several tabs which allow you to manage many aspects of your store. Later in our course we\\u2019ll cover the payment, shipping &amp; email sections.&lt;\\\/p&gt;&lt;p&gt;For now, ensure you have the \\u2018General\\u2019 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.&lt;\\\/p&gt;&lt;p&gt;In this area we can also configure the\\u2026&lt;\\\/p&gt;&lt;p&gt;Selling location\\u2026&lt;\\\/p&gt;&lt;p&gt;Shipping location\\u2026&lt;\\\/p&gt;&lt;p&gt;&amp; default customer location.&lt;\\\/p&gt;&lt;p&gt;We will revisit these options when we configure our shipping options.&lt;\\\/p&gt;&lt;p&gt;We are also able to specify whether or not we wish to enable taxes and the use of coupons.&lt;\\\/p&gt;&lt;p&gt;Finally, at the bottom we can amend the currency options if required.&lt;\\\/p&gt;&lt;p&gt;Remember to save your changes before navigating away from this tab.&lt;\\\/p&gt;&lt;p&gt;Next, we\\u2019ll switch over to the Products tab where you can see there are three sub areas\\u2026&lt;\\\/p&gt;&lt;p&gt;General\\u2026&lt;\\\/p&gt;&lt;p&gt;Inventory\\u2026&lt;\\\/p&gt;&lt;p&gt;And downloadable products...&lt;\\\/p&gt;&lt;p&gt;First, let\\u2019s take a look at the general area.&lt;\\\/p&gt;&lt;p&gt;By default WooCommerce has already selected our page titled \\u2018Shop\\u2019 to be the default shop page. If you would like to change this page, you can make the amendment here.&lt;\\\/p&gt;&lt;p&gt;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\\u2019t require the page to reload for an item to be added to the cart.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;If you would like to change the measurements units used within your store, you can do so here.&lt;\\\/p&gt;&lt;p&gt;And finally you\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;We\\u2019re going to leave these all as default for our store, but please note any of these configurations can be amended at any time.&lt;\\\/p&gt;&lt;p&gt;The second subsection we have is to manage the inventory for our store. Switch over the \\u2018Inventory\\u2019 tab.&lt;\\\/p&gt;&lt;p&gt;By default you can see that stock management is enabled, however if your store doesn\\u2019t 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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;The third and final subsection we see here is for Downloadable Products.&lt;\\\/p&gt;&lt;p&gt;Here you are able to amend the download method, access restrictions and filename configuration.&lt;\\\/p&gt;&lt;p&gt;Now we have finished configuring our products we\\u2019re ready to move onto the \\u2018Tax\\u2019 settings.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll be making sure your store is compliant with your local authorities.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Now switch to the tax tab and we\\u2019ll go over each of these options so that you have a better understanding of how to set up tax on your store.&lt;\\\/p&gt;&lt;p&gt;The first option here asks you if you would like to enter prices inclusive or exclusive of tax. We\\u2019ll set this to yes as we plan to enter our prices including tax.&lt;\\\/p&gt;&lt;p&gt;\\u2018Calculate tax based on\\u2019 allows you to specify the location which is used to calculate your tax. For our store, we\\u2019ll set this as \\u2018Shop base address\\u2019 as we would like the local tax rules to be applied to all purchases.&lt;\\\/p&gt;&lt;p&gt;\\u2018Shipping tax class\\u2019 we leave as default as we would like the tax to be based on the cart items themselves.&lt;\\\/p&gt;&lt;p&gt;\\u2018Rounding\\u2019 simply displays the tax which has been added to the order in one clear to see amount, rather than per line. We\\u2019ll leave this on.&lt;\\\/p&gt;&lt;p&gt;The next section allows you to create additional custom tax classes. As you can see there are already two default classes created, reduced rate &amp; zero rate. Our store doesn\\u2019t 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.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s quickly remove our example tax class as we do not require it for our store.&lt;\\\/p&gt;&lt;p&gt;Next, we can state if we would like our prices to display including or excluding tax. We\\u2019ll set this to \\u2018including\\u2019, and we\\u2019ll do the same for the next option which controls the pricing display on the cart and checkout pages.&lt;\\\/p&gt;&lt;p&gt;If you would like to display a suffix to your prices, you can enter that here. For example you could add \\u2018Inc VAT\\u2019. We\\u2019ll leave this blank for our store.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll set this to \\u2018As a single total\\u2019.&lt;\\\/p&gt;&lt;p&gt;Now that we have configured the general settings for our tax we are ready to move onto setting the rates for each option.&lt;\\\/p&gt;&lt;p&gt;Select \\u2018Standard rates\\u2019 and as you can see we\\u2019re 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.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll leave all of these as default as we would like to apply a global tax rate in our store.&lt;\\\/p&gt;&lt;p&gt;Under tax rate we\\u2019ll enter 20%.&lt;\\\/p&gt;&lt;p&gt;Tax name allows you to amend the name of this tax option, we\\u2019ll enter 20% in the field so it\\u2019s clear which tax rate this is.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Once you have finished, save your changes and switch to \\u2018reduced rate\\u2019.&lt;\\\/p&gt;&lt;p&gt;As you can see we are presented with the same tax rate table. We\\u2019ll keep most of the same settings here, except we\\u2019ll set our reduced tax rate as 5%.&lt;\\\/p&gt;&lt;p&gt;Finally, we\\u2019ll switch to the \\u2018zero rate\\u2019 tax option and as you can see this has already been set to 0% so we can leave this as it is.&lt;\\\/p&gt;&lt;p&gt;Our tax rates are now completely configured and when it comes to creating our products we\\u2019ll explore the options on how to apply these tax rates to the products in our store.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s move onto configuring the \\u2018Accounts &amp; Privacy\\u2019 settings.&lt;\\\/p&gt;&lt;p&gt;Switch to the \\u2018Accounts &amp; Privacy\\u2019 tab.&lt;\\\/p&gt;&lt;p&gt;Upon installing WooCommerce there are several default account &amp; privacy options configured. If these do not suit your requirements, they can all be changed here.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll enable this option.&lt;\\\/p&gt;&lt;p&gt;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.&lt;br \\\/&gt;The next areas allow you to configure several aspects with regards to personal data and privacy. It\\u2019s a good idea to consult your company&#039;s data and privacy policies before setting these options.&lt;\\\/p&gt;&lt;p&gt;You can amend the text shown when referencing your privacy policy on the registration and checkout pages.&lt;\\\/p&gt;&lt;p&gt;Please note you must set your privacy policy in the general WordPress settings for this to work on your store.&lt;\\\/p&gt;&lt;p&gt;To do this, simply create your Privacy page\\u2026&lt;\\\/p&gt;&lt;p&gt;...then in Settings &gt; Privacy, set your new page like so.&lt;\\\/p&gt;&lt;p&gt;You also have the option to amend how long your store retains personal data. Again, it\\u2019s best to consult your company&#039;s privacy policy before configuring this section.&lt;\\\/p&gt;&lt;p&gt;For our store, we will leave these as default.&lt;\\\/p&gt;&lt;p&gt;2i. Settings - Advanced&lt;\\\/p&gt;&lt;p&gt;The last section we\\u2019ll explore for now is the advanced tab.&lt;\\\/p&gt;&lt;p&gt;Here you\\u2019ll see that WooCommerce has automatically selected the newly created pages for \\u2018Cart\\u2019, \\u2018Checkout\\u2019, &amp; the \\u2018My Account\\u2019 page. Next, you should specify where your terms and conditions are located as WooCommerce automatically inserts a link within the checkout page.&lt;\\\/p&gt;&lt;p&gt;Checking the \\u2018Force secure checkout\\u2019 button is good practice to ensure a secure connection between your store and your customers. Please note this does require a valid SSL certificate.&lt;\\\/p&gt;&lt;p&gt;And finally if you need to amend the endpoints associated with the checkout and account pages, you can do so here.&lt;\\\/p&gt;&lt;p&gt;Once finished, save your changes.&lt;br \\\/&gt;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.&lt;\\\/p&gt;&lt;p&gt;In our next lesson we\\u2019re going to learn how to create products and categories.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;4517d0d&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=0FI5qK2vZ-o&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=4&quot;,&quot;title&quot;:&quot;Adding Products &amp; Categories&quot;,&quot;duration&quot;:&quot;13:37&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will learn how to create simple, downloadable and variable products in WooCommerce. We\\u2019ll then explore how and why to create categories, tags and attributes.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e Adding simple, downloadable and variable products&lt;br \\\/&gt;\\u2714\\ufe0e Creating categories, tags &amp; attributes&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Now that we\\u2019ve learnt how to install WooCommerce and have configured parts of our store, it\\u2019s time to add in some products.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s head back into the WordPress dashboard to see how this works.&lt;br \\\/&gt;Ok, so now that you\\u2019ve installed &amp; configured WooCommerce, it\\u2019s time to begin adding in your products. Go to Products &gt; Add New to add in your first product.&lt;\\\/p&gt;&lt;p&gt;Start with something simple that doesn\\u2019t have any extra options. For example, for an apparel shop, you might start with a hat that only comes in one color and size. \\u2026 For the bakery, I\\u2019ll start with a simple, yet classic French Baguette.&lt;\\\/p&gt;&lt;p&gt;Note that when you add your first product, tooltips may pop up. You can go ahead and dismiss them. Don\\u2019t worry, I\\u2019ll walk you through the whole process.&lt;\\\/p&gt;&lt;p&gt;First, add in the Product Name.&lt;br \\\/&gt;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.&lt;\\\/p&gt;&lt;p&gt;Next scroll down past the product data to the product short description. We\\u2019ll 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.&lt;br \\\/&gt;Scroll back up to the Product categories. Product Categories help customers navigate to relevant products, while they shop your site.&lt;br \\\/&gt;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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Below the Categories section, is the Tags section. Product tags are keywords that show up in your website\\u2019s search and are generally more specific than categories. The same tag may fall within different categories.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll add the wholemeal and gluten-free tags, so that searchers can find all the products with either of these tags at one time.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s 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.&lt;br \\\/&gt;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.&lt;\\\/p&gt;&lt;p&gt;Now it\\u2019s time to add the Product data.&lt;br \\\/&gt;Our first product is a basic product, with no extra options, so under Product Data, leave it on the default of Simple Product.&lt;\\\/p&gt;&lt;p&gt;Later in the course, we\\u2019ll discuss downloadable products as well as more complex products.&lt;\\\/p&gt;&lt;p&gt;If you need to use a different currency, you can set that up in the store settings. We\\u2019ll cover that later in the course, as well.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Next we are presented with the tax options. Please note this section will only appear if you have enabled and configured your tax options.&lt;\\\/p&gt;&lt;p&gt;We can first of all set the tax status and then the tax class.&lt;\\\/p&gt;&lt;p&gt;Click the Inventory Tab. You can enter an SKU or \\u201csku\\u201d 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.&lt;br \\\/&gt;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.&lt;br \\\/&gt;If you want to limit a product to one per order, check \\u201csold individually.\\u201d&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s skip on down to the Advanced Tab. We\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;You can add a value for menu order, if you\\u2019d like this product to show up before the default order. Look this up&lt;br \\\/&gt;Last is the option to Enable reviews.&lt;\\\/p&gt;&lt;p&gt;I highly recommend leaving it enabled to allow your products to gain social proof.&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s 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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;br \\\/&gt;Now let\\u2019s 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.&lt;\\\/p&gt;&lt;p&gt;For the baguette, I\\u2019ll use a few different angles, as well as images showing a closeup and the texture. All my images are the same dimensions, for consistency...&lt;\\\/p&gt;&lt;p&gt;Hold down Command or Control to select more than one image. Once you\\u2019ve selected the images, go through them one by one, and update the Alt text and Title. Then click Add to Gallery&lt;br \\\/&gt;Once again, click Upload Files. The selected gallery images preview here. If you\\u2019d like to change the display order, you can drag them like this. To remove any image, just click the X.&lt;br \\\/&gt;Ok great, we\\u2019ve now added in all the product data, so click Publish at the top of the page, and command or control click View Product.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll 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.&lt;br \\\/&gt;Next I\\u2019ll walk you through creating a digital product, as well as a variable product.&lt;\\\/p&gt;&lt;p&gt;Great, now that we\\u2019ve added the rest of the products, let\\u2019s go ahead and create a downloadable product.&lt;\\\/p&gt;&lt;p&gt;Open any product you\\u2019d like to make downloadable. I\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;Click Add File, Upload your file, and click Insert File URL. Go ahead and name the file. If you\\u2019d 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.&lt;\\\/p&gt;&lt;p&gt;Click Update, and that\\u2019s all there is to creating a downloadable product.&lt;\\\/p&gt;&lt;p&gt;Next we\\u2019ll take a look at Variable Products.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll choose these Gourmet Donuts, since they come in several flavors and dietary options.&lt;\\\/p&gt;&lt;p&gt;Scroll down to Product data, and select Variable Product. You\\u2019ll notice that the pricing information disappears, and the Variations tab now appears.&lt;\\\/p&gt;&lt;p&gt;But before we can set up Variations, we\\u2019ll 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\\u2019ll use \\u201cFlavor,\\u201d...then add each variation value, separated by the pipe symbol. In this case, I\\u2019ll enter three delicious flavor options. Select Used for variations and click Save Attributes.&lt;\\\/p&gt;&lt;p&gt;Now go back to Variations. Click Go next to Add Variation. Next to Any Flavor I\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s preview our changes. And you can see that now there\\u2019s an option to choose the donut flavor, and the image and price remain constant for each option.&lt;\\\/p&gt;&lt;p&gt;If you\\u2019d like for different content to appear, depending on the variation, such as specific images or pricing, you\\u2019ll need to set up each variation up separately. To do this, go back to the product...Variations&lt;br \\\/&gt;I\\u2019ll click Any Flavour, and change it to the first variation from the dropdown. Now add the image and description for this variation.&lt;\\\/p&gt;&lt;p&gt;If you\\u2019d like to update the content for each variation, you can select Create variations from all attributes, and you\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;Now I\\u2019ll add an image....and price. I&#039;ll set a different price for this flavor variation. Add in any other relevant information below. Now repeat for any remaining variations.&lt;br \\\/&gt;Let\\u2019s 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.&lt;\\\/p&gt;&lt;p&gt;In the event that no image was added to a variation, it will default to the main product image.&lt;\\\/p&gt;&lt;p&gt;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\\u2019s set them now, and while we\\u2019re at it, see how to create a Global Attribute, for options you will need again with other products. In this case, I\\u2019ll add an option for Dietary Options, because I want to offer this option on some of the other bakery items.&lt;\\\/p&gt;&lt;p&gt;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.&lt;br \\\/&gt;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\\u2019t want to use all the variations for this product, just X them out. Click Save Attributes.&lt;br \\\/&gt;Now go over to Variations, and you\\u2019ll see the new attribute has been added to each variation.&lt;\\\/p&gt;&lt;p&gt;Now Update and Preview.&lt;\\\/p&gt;&lt;p&gt;A second option has been added to the Gourmet Doughnuts. Customers can now choose both the Flavor and Dietary Option.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Next up, we\\u2019ll review the Theme Builder as it relates to WooCommerce, and design our shop pages. Keep watching to learn how!&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;42123f4&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=MT5vQGZEGVA&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=5&quot;,&quot;title&quot;:&quot;WooCommerce Templates Part 1&quot;,&quot;duration&quot;:&quot;14:20&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In part 1 of this lesson we will learn how to create the single product template for our WooCommerce store using the Elementor Theme Builder.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e How to create the single product template&lt;br \\\/&gt;\\u2714\\ufe0e How to set the display conditions&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Ok, so now that we\\u2019ve added in all our products, it\\u2019s time to get down to business and start styling our shop templates!&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll use Elementor\\u2019s Theme Builder to create, design, and save our shop templates.&lt;\\\/p&gt;&lt;p&gt;From the Dashboard, navigate to Templates &gt; Theme Builder &gt; Try it Now.&lt;\\\/p&gt;&lt;p&gt;The Theme Builder provides an easy to use interface for managing the templates associated with your website.&lt;\\\/p&gt;&lt;p&gt;As you can see we\\u2019ve already created several templates for our website including the header, footer, 404 page &amp; blog templates.&lt;\\\/p&gt;&lt;p&gt;If you\\u2019re unsure how to set up these templates, check out our dedicated tutorials on the channel.&lt;\\\/p&gt;&lt;p&gt;At first glance, you\\u2019ll 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\\u2019ll see more information, as well as management and editing options for that template.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Please note that the Single Product and Products Archive template options will only show once you\\u2019ve installed the WooCommerce plugin.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll begin with the Single Product template.&lt;\\\/p&gt;&lt;p&gt;Before we begin creating it, let\\u2019s take a quick look at the finished Product Page, to get a better idea of what we\\u2019ll be building.&lt;\\\/p&gt;&lt;p&gt;The Product page consists of several elements. On the left are product image thumbnails&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;If we scroll down a little further we will see the full description, as well as any reviews which have been left.&lt;\\\/p&gt;&lt;p&gt;And finally, we have a section displaying related products.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s head back to the Theme Builder, and add a new single product template.&lt;\\\/p&gt;&lt;p&gt;This brings us directly into the Elementor Library, where you\\u2019ll find the option to use an Elementor block or page template, as well as the ability to insert your own saved template.&lt;\\\/p&gt;&lt;p&gt;We\\u2019re going to create our Single Product page from scratch, so go ahead and dismiss the Library.&lt;\\\/p&gt;&lt;p&gt;The first thing you\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;Click the Plus icon to add a section, and select the first two-column layout.&lt;\\\/p&gt;&lt;p&gt;Let&#039;s start by adding in all the widgets we\\u2019ll need for this section.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;In the widget panel, select and drag the Product Images widget into the first column.&lt;\\\/p&gt;&lt;p&gt;For the second column drag in the breadcrumbs widget\\u2026&lt;\\\/p&gt;&lt;p&gt;the Product Title widget\\u2026&lt;\\\/p&gt;&lt;p&gt;then the Product Rating widget\\u2026notice how this widget is currently grayed out. This is because the current product displayed in the editor doesn\\u2019t have any ratings yet. We\\u2019ll fix this soon so we\\u2019re able to preview this widget...&lt;\\\/p&gt;&lt;p&gt;next, the Short Description Widget\\u2026&lt;\\\/p&gt;&lt;p&gt;After that, the Products price widget\\u2026&lt;\\\/p&gt;&lt;p&gt;and last but not least the Add to cart widget.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Begin typing in the name of the product you\\u2019d like to preview\\u2026&lt;\\\/p&gt;&lt;p&gt;Select it\\u2026&lt;\\\/p&gt;&lt;p&gt;Then select \\u2018Apply &amp; Preview\\u2019...&lt;\\\/p&gt;&lt;p&gt;You see now the \\u2018product ratings\\u2019 widget is showing correctly as this product has a couple of reviews...&lt;\\\/p&gt;&lt;p&gt;OK, great, the first section is already starting to take shape. Now let\\u2019s go through each widget and update them with the right content and styling.&lt;\\\/p&gt;&lt;p&gt;Select the Product Images widget.&lt;\\\/p&gt;&lt;p&gt;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\\u2019s quickly add one to our \\u2018French Baguette\\u2019 so we can see this in the editor.&lt;\\\/p&gt;&lt;p&gt;In a new tab open the \\u2018All Products\\u2019 screen and scroll down to \\u2018French Baguette\\u2019. 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.&lt;\\\/p&gt;&lt;p&gt;Select \\u2018Quick Edit\\u2019 and you\\u2019ll be presented with a whole host of options for your product including the price fields.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s add \\u00a33.00 in the \\u2018Sales Field\\u2019 and then update our product.&lt;\\\/p&gt;&lt;p&gt;Now back in the editor, save your template as a draft and refresh the page.&lt;\\\/p&gt;&lt;p&gt;As you can see the style badge is now showing.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Add space between the top and bottom images by dragging the space slider...or typing in a value.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Go ahead and add some spacing to the thumbnails.&lt;\\\/p&gt;&lt;p&gt;Great, let\\u2019s move on to the breadcrumbs next.&lt;\\\/p&gt;&lt;p&gt;Select the text color...&lt;\\\/p&gt;&lt;p&gt;Then select the link color\\u2026&lt;\\\/p&gt;&lt;p&gt;Next, set the Typography\\u2026&lt;\\\/p&gt;&lt;p&gt;The last option is for the alignment.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll leave it on the default left alignment.&lt;\\\/p&gt;&lt;p&gt;Now select the Product title.&lt;\\\/p&gt;&lt;p&gt;This widget is automatically set to dynamically pull in the name of the product.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s leave the other default content settings, and move over to the Style tab.&lt;\\\/p&gt;&lt;p&gt;Set your text color\\u2026&lt;\\\/p&gt;&lt;p&gt;And typography...&lt;\\\/p&gt;&lt;p&gt;You can also apply a text shadow and blend mode if required.&lt;\\\/p&gt;&lt;p&gt;Next we\\u2019ll style the \\u2018Product Rating Widget\\u2019.&lt;\\\/p&gt;&lt;p&gt;We can apply styles to the star\\u2026&lt;\\\/p&gt;&lt;p&gt;Empty star\\u2026&lt;\\\/p&gt;&lt;p&gt;Link\\u2026&lt;\\\/p&gt;&lt;p&gt;As well as amend the typography\\u2026&lt;\\\/p&gt;&lt;p&gt;Change the star size\\u2026&lt;\\\/p&gt;&lt;p&gt;The space between the stars and text\\u2026&lt;\\\/p&gt;&lt;p&gt;And the alignment of the entire widget.&lt;\\\/p&gt;&lt;p&gt;Select the \\u2018Short Description\\u2019 widget next.&lt;\\\/p&gt;&lt;p&gt;Set your alignment\\u2026&lt;\\\/p&gt;&lt;p&gt;Text color\\u2026&lt;\\\/p&gt;&lt;p&gt;And typography.&lt;\\\/p&gt;&lt;p&gt;Now let&#039;s set our standard and sale price styles.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll set our alignment\\u2026&lt;\\\/p&gt;&lt;p&gt;Color\\u2026&lt;\\\/p&gt;&lt;p&gt;Typography\\u2026&lt;\\\/p&gt;&lt;p&gt;And now the sale styles\\u2026&lt;\\\/p&gt;&lt;p&gt;\\u2018Stacked\\u2019 allows you to control if the sale price is displayed below or to the side of the main price\\u2026&lt;\\\/p&gt;&lt;p&gt;And finally we\\u2019ll add some space between the two values.&lt;\\\/p&gt;&lt;p&gt;The final widget in this immediate section is the add to cart button and quantity field.&lt;\\\/p&gt;&lt;p&gt;First let\\u2019s style the button&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s set our alignment to the left\\u2026&lt;\\\/p&gt;&lt;p&gt;Typography using our global styles\\u2026&lt;\\\/p&gt;&lt;p&gt;Border type as solid, with 2px on all sides\\u2026&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll see the border radius to 0px for nice neat corners\\u2026&lt;\\\/p&gt;&lt;p&gt;And then our padding\\u2026&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s set our colors for both the normal &amp; hover states.&lt;\\\/p&gt;&lt;p&gt;That\\u2019s the styling for our button finished, let\\u2019s switch to the quantity tab next\\u2026&lt;\\\/p&gt;&lt;p&gt;We can first add spacing between the quantity field and button\\u2026&lt;\\\/p&gt;&lt;p&gt;Then the typography\\u2026&lt;\\\/p&gt;&lt;p&gt;Set the border to match our button\\u2026&lt;\\\/p&gt;&lt;p&gt;And then our normal &amp; focus colors...&lt;\\\/p&gt;&lt;p&gt;The final set of styles is for the variations. This particular product doesn\\u2019t have any variations, so let\\u2019s switch the product preview so we can see our changes.&lt;\\\/p&gt;&lt;p&gt;(...search doughnuts\\u2026.)&lt;\\\/p&gt;&lt;p&gt;We can amend the width of this section\\u2026&lt;\\\/p&gt;&lt;p&gt;The spacing between the variations and button\\u2026&lt;\\\/p&gt;&lt;p&gt;Set your colors &amp; typography for the label\\u2026&lt;\\\/p&gt;&lt;p&gt;And then the same for the select field...&lt;\\\/p&gt;&lt;p&gt;Before we move onto the next widget, let\\u2019s apply some styles to this section to fit in with the rest of our website.&lt;\\\/p&gt;&lt;p&gt;Select the section\\u2026&lt;\\\/p&gt;&lt;p&gt;And then set a background image in the style tab\\u2026&lt;\\\/p&gt;&lt;p&gt;Add some margin to the top &amp; bottom\\u2026&lt;\\\/p&gt;&lt;p&gt;And some padding\\u2026&lt;\\\/p&gt;&lt;p&gt;Now select the column which holds the product data and add some padding...&lt;\\\/p&gt;&lt;p&gt;OK, that looks great.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s now add the product data tabs\\u2026&lt;\\\/p&gt;&lt;p&gt;Add a new section\\u2026&lt;\\\/p&gt;&lt;p&gt;Then drop in the product data tabs widget\\u2026&lt;\\\/p&gt;&lt;p&gt;We can set the colors for the tabs first of all\\u2026&lt;\\\/p&gt;&lt;p&gt;We\\u2019re 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.&lt;\\\/p&gt;&lt;p&gt;Next we\\u2019ll set the typography\\u2026&lt;\\\/p&gt;&lt;p&gt;And if required you can amend the border radius\\u2026&lt;\\\/p&gt;&lt;p&gt;Now switch to the \\u2018Panel\\u2019 tab\\u2026&lt;\\\/p&gt;&lt;p&gt;Here we are able to amend the styles for the contents of our tabs\\u2026&lt;\\\/p&gt;&lt;p&gt;Set colors &amp; typography for the content itself\\u2026&lt;\\\/p&gt;&lt;p&gt;And then the heading\\u2026&lt;\\\/p&gt;&lt;p&gt;Finally you can set a border width, radius and box shadow if required.&lt;\\\/p&gt;&lt;p&gt;The last widget we\\u2019ll add to our product template is the \\u2018Related Products\\u2019 widget.&lt;\\\/p&gt;&lt;p&gt;This widget is great to use as it will display additional products to your website users which are relevant to what they\\u2019re currently looking at.&lt;\\\/p&gt;&lt;p&gt;Create another section\\u2026and add some padding...&lt;\\\/p&gt;&lt;p&gt;And drop in the \\u2018Related Products\\u2019 widget\\u2026&lt;\\\/p&gt;&lt;p&gt;We can first of all amend the content by setting the\\u2026&lt;\\\/p&gt;&lt;p&gt;Products per page\\u2026&lt;\\\/p&gt;&lt;p&gt;Columns\\u2026&lt;\\\/p&gt;&lt;p&gt;How they\\u2019re ordered\\u2026&lt;\\\/p&gt;&lt;p&gt;And whether we would like them to be ascending or descending\\u2026&lt;\\\/p&gt;&lt;p&gt;Now switch to the style tab where you can see we have a whole host of styling options available.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll set the column &amp; row gaps first\\u2026&lt;\\\/p&gt;&lt;p&gt;And then the alignment\\u2026&lt;\\\/p&gt;&lt;p&gt;We can add a border to our images if required\\u2026&lt;\\\/p&gt;&lt;p&gt;And amend the spacing between the image and title\\u2026&lt;\\\/p&gt;&lt;p&gt;The next few sections will allow us to control the colors, typography &amp; spacing for the\\u2026&lt;\\\/p&gt;&lt;p&gt;Title\\u2026&lt;\\\/p&gt;&lt;p&gt;Rating....&lt;\\\/p&gt;&lt;p&gt;Price\\u2026&lt;\\\/p&gt;&lt;p&gt;&amp; Regular price\\u2026&lt;\\\/p&gt;&lt;p&gt;We can then style the button. Let\\u2019s amend this so it matches the rest of our buttons\\u2026&lt;\\\/p&gt;&lt;p&gt;The final option here is style the \\u2018View Cart\\u2019 link. To preview this, select \\u2018Add to Cart\\u2019 and then make your amendments.&lt;\\\/p&gt;&lt;p&gt;Switch to the heading tab now\\u2026&lt;\\\/p&gt;&lt;p&gt;You can choose whether to show or hide this element\\u2026&lt;\\\/p&gt;&lt;p&gt;Set the color\\u2026&lt;\\\/p&gt;&lt;p&gt;Font\\u2026&lt;\\\/p&gt;&lt;p&gt;Alignment\\u2026&lt;\\\/p&gt;&lt;p&gt;And spacing.&lt;\\\/p&gt;&lt;p&gt;Up next is the styling options for the box which holds all of the previous elements.&lt;\\\/p&gt;&lt;p&gt;If I add a border you can see exactly what I mean\\u2026&lt;\\\/p&gt;&lt;p&gt;Here we can add a border radius..&lt;\\\/p&gt;&lt;p&gt;Amend the padding\\u2026&lt;\\\/p&gt;&lt;p&gt;And set the styles for both the normal &amp; hover states\\u2026&lt;\\\/p&gt;&lt;p&gt;The final option here is to amend the \\u2018Sale Flash\\u2019.&lt;\\\/p&gt;&lt;p&gt;You can of course toggle this option on or off.&lt;\\\/p&gt;&lt;p&gt;Set the text &amp; background colors\\u2026&lt;\\\/p&gt;&lt;p&gt;As well as the typography\\u2026&lt;\\\/p&gt;&lt;p&gt;We can then change the border radius...width &amp; height.&lt;\\\/p&gt;&lt;p&gt;Finally we can choose to display the sales badge on the right or left of the box and also the distance.&lt;\\\/p&gt;&lt;p&gt;Before we save and preview our new template, let\\u2019s 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.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll call ours \\u2018Single Product Template\\u2019.&lt;\\\/p&gt;&lt;p&gt;Before we publish our template, we have one last step.&lt;\\\/p&gt;&lt;p&gt;To the right of the \\u2018Publish\\u2019 button you\\u2019ll see a small arrow. Selecting this will allow you to navigate to the \\u2018Display Settings\\u2019.&lt;\\\/p&gt;&lt;p&gt;Here we can set where we would like our template to display.&lt;\\\/p&gt;&lt;p&gt;Select \\u2018Add Condition\\u2019...&lt;\\\/p&gt;&lt;p&gt;And you can see Elementor does a great job of automatically selecting \\u2018Products\\u2019 as our chosen location.&lt;\\\/p&gt;&lt;p&gt;By selecting the dropdown arrow you can see we are able to set specific instructions on where we would like to display this template.&lt;\\\/p&gt;&lt;p&gt;For example, we may only want this template to display for products in our \\u2018Recipe\\u2019 category.&lt;\\\/p&gt;&lt;p&gt;We can also add multiple rules here if required, and can also set these rules to exclude specific products and categories.&lt;\\\/p&gt;&lt;p&gt;In our store, we simply need one template for all products so that\\u2019s what we\\u2019ll select here.&lt;\\\/p&gt;&lt;p&gt;Now go ahead and publish your template.&lt;\\\/p&gt;&lt;p&gt;OK, fantastic! As you can see our single product template is now complete and looks great.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;dbc66a1&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=BJWOFkdugjM&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=6&quot;,&quot;title&quot;:&quot;WooCommerce Templates Part 2&quot;,&quot;duration&quot;:&quot;8:39&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In part 2 of this lesson we will learn how to create the shop &amp; product category templates as well as our search results template for our WooCommerce store using the Elementor Theme Builder.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e How to create a shop template&lt;br \\\/&gt;\\u2714\\ufe0e Creating a product category template&lt;br \\\/&gt;\\u2714\\ufe0e Building the search results template&lt;br \\\/&gt;\\u2714\\ufe0e The various display conditions associated with these templates&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;In part 1 of this lesson we learnt about the templates which make up a WooCommerce store. Now we\\u2019ll explore how to create our archive and search templates.&lt;\\\/p&gt;&lt;p&gt;Our store will use two Product Archive templates.&lt;\\\/p&gt;&lt;p&gt;The first will be displayed when somebody visits our \\u2018Shop\\u2019 page which will show the various categories which we set up earlier on.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s head back to the theme builder now and add a new \\u2018Product Archive Template\\u2019.&lt;\\\/p&gt;&lt;p&gt;The first thing we\\u2019ll do is add in this header section which we\\u2019ve previously saved as a template. It contains our page title, a short description and will provide consistency across all of our template files.&lt;\\\/p&gt;&lt;p&gt;Now, add in a new section and give it some padding.&lt;\\\/p&gt;&lt;p&gt;In the widgets panel, find and drop in the \\u2018Product Categories\\u2019 widget. This widget will automatically display any categories which we\\u2019ve set up for our store.&lt;\\\/p&gt;&lt;p&gt;Several default configurations have already been applied. Let\\u2019s make some changes so that this shows exactly how we\\u2019d like it to.&lt;\\\/p&gt;&lt;p&gt;Set the columns to \\u20183\\u2019.&lt;\\\/p&gt;&lt;p&gt;And the category count to \\u20183\\u2019.&lt;\\\/p&gt;&lt;p&gt;Now switch to the \\u2018Query\\u2019 tab.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll choose \\u2018manual\\u2019 and then select the categories we would like to display on our shop page.&lt;\\\/p&gt;&lt;p&gt;Note how each category has its own image. This is because we set them earlier on when creating our categories.&lt;\\\/p&gt;&lt;p&gt;If any categories are empty, we can choose to hide them here.&lt;\\\/p&gt;&lt;p&gt;And finally we can amend the order by name, slug, description or count and also to be descending or ascending.&lt;\\\/p&gt;&lt;p&gt;Now switch over to the style tab.&lt;\\\/p&gt;&lt;p&gt;You can first of all amend the column and row gaps\\u2026&lt;\\\/p&gt;&lt;p&gt;And then the alignment\\u2026&lt;\\\/p&gt;&lt;p&gt;Add a border type\\u2026&lt;\\\/p&gt;&lt;p&gt;Width\\u2026&lt;\\\/p&gt;&lt;p&gt;Color\\u2026&lt;\\\/p&gt;&lt;p&gt;Radius\\u2026&lt;\\\/p&gt;&lt;p&gt;And spacing, if required.&lt;\\\/p&gt;&lt;p&gt;And then style the color and typography for both the title and count.&lt;\\\/p&gt;&lt;p&gt;Before we publish this template, let\\u2019s rename it just like we did with our single product template.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s now publish our template and set the display conditions.&lt;\\\/p&gt;&lt;p&gt;Select \\u2018publish\\u2019...&lt;\\\/p&gt;&lt;p&gt;Then \\u2018add condition\\u2019...&lt;\\\/p&gt;&lt;p&gt;Now in the dropdown select \\u2018shop page\\u2019 to ensure this template is shown every time somebody visits the main shop page on your website.&lt;\\\/p&gt;&lt;p&gt;Finally select \\u2018save &amp; close\\u2019 and now let\\u2019s visit the website to ensure this is working correctly.&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s create the template which is shown when somebody selects one of the categories on our shop page.&lt;\\\/p&gt;&lt;p&gt;Again, back in the theme builder add another \\u2018product archive\\u2019 template.&lt;\\\/p&gt;&lt;p&gt;Just like before we\\u2019re 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 &amp; description.&lt;\\\/p&gt;&lt;p&gt;Select the title and you can see we\\u2019ve selected \\u2018Products Terms\\u2019 in the dynamic field and \\u2018Product Category\\u2019.&lt;\\\/p&gt;&lt;p&gt;Similar to the title, we\\u2019ve set this to dynamically pull in the archive description.&lt;\\\/p&gt;&lt;p&gt;All of these values were set earlier on when we created our categories.&lt;\\\/p&gt;&lt;p&gt;Now add in a new section\\u2026&lt;\\\/p&gt;&lt;p&gt;Apply some padding\\u2026&lt;\\\/p&gt;&lt;p&gt;And then drop in the \\u2018Products\\u2019 widget.&lt;\\\/p&gt;&lt;p&gt;First set your columns\\u2026&lt;\\\/p&gt;&lt;p&gt;And rows\\u2026&lt;\\\/p&gt;&lt;p&gt;Enabling pagination opens up some additional options\\u2026&lt;\\\/p&gt;&lt;p&gt;Allow order will add a drop down field\\u2026&lt;\\\/p&gt;&lt;p&gt;And \\u2018show result count\\u2019 adds the number of results to the widget.&lt;\\\/p&gt;&lt;p&gt;Switching to the query tab now, we are able to specify what content is shown in this widget.&lt;\\\/p&gt;&lt;p&gt;Because we\\u2019re going to use this template to display products of a certain category, we are going to need to select \\u2018Current Query\\u2019 to obtain the desired results.&lt;\\\/p&gt;&lt;p&gt;This widget can be used elsewhere however and you\\u2019ll notice that we can also set it to display\\u2026&lt;\\\/p&gt;&lt;p&gt;Latest products, products on sale, featured products &amp; also a manual selection.&lt;\\\/p&gt;&lt;p&gt;Switch to the style tab now and let\\u2019s explore what options we have.&lt;\\\/p&gt;&lt;p&gt;First we can set our styles for the products themselves\\u2026&lt;\\\/p&gt;&lt;p&gt;Set your gap distances\\u2026&lt;\\\/p&gt;&lt;p&gt;And alignment\\u2026&lt;\\\/p&gt;&lt;p&gt;Now add a border if required\\u2026&lt;\\\/p&gt;&lt;p&gt;And spacing...&lt;\\\/p&gt;&lt;p&gt;Now scroll down and set your styles &amp; spacing for the title\\u2026&lt;\\\/p&gt;&lt;p&gt;Price\\u2026&lt;\\\/p&gt;&lt;p&gt;And Regular Price\\u2026&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s apply our \\u2018Normal\\u2019 &amp; \\u2018Hover\\u2019 styles so that our \\u2018Add to Cart\\u2019 buttons match the rest of our website\\u2026&lt;\\\/p&gt;&lt;p&gt;And finally the \\u2018View Cart\\u2019 styles\\u2026&lt;\\\/p&gt;&lt;p&gt;Now open the box tab\\u2026&lt;\\\/p&gt;&lt;p&gt;The default settings work great for us, but if you need to you can add a border\\u2026&lt;\\\/p&gt;&lt;p&gt;Border radius\\u2026&lt;\\\/p&gt;&lt;p&gt;Padding\\u2026&lt;\\\/p&gt;&lt;p&gt;As well as shadow, background colors and border colors for both normal &amp; hover states.&lt;\\\/p&gt;&lt;p&gt;Finally we can set the styles for our sales flash\\u2026&lt;\\\/p&gt;&lt;p&gt;Before we rename and publish this template, let\\u2019s add in the testimonial block template we previously created to fill the page out.&lt;\\\/p&gt;&lt;p&gt;Now rename the template\\u2026&lt;\\\/p&gt;&lt;p&gt;Select publish\\u2026&lt;\\\/p&gt;&lt;p&gt;Add condition\\u2026&lt;\\\/p&gt;&lt;p&gt;Select \\u2018Product Categories\\u2019...and leave it on \\u2018All\\u2019 to ensure this layout appears on all product categories.&lt;\\\/p&gt;&lt;p&gt;OK, great. Let\\u2019s now visit the website and test all of the templates we\\u2019ve made so far.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll start on the homepage and select \\u2018Shop\\u2019...&lt;\\\/p&gt;&lt;p&gt;Now select one of the categories\\u2026&lt;\\\/p&gt;&lt;p&gt;Finally choose one of the products\\u2026&lt;\\\/p&gt;&lt;p&gt;As you can see, all of the templates are working great on the live website. Let\\u2019s move onto our final template which is for the search results.&lt;\\\/p&gt;&lt;p&gt;First add a new \\u2018search\\u2019 template in the theme builder\\u2026&lt;\\\/p&gt;&lt;p&gt;Again, we have a pre-made hero section to add here, so let\\u2019s drop this in\\u2026&lt;\\\/p&gt;&lt;p&gt;The title is set to use dynamic content and will automatically display the search term entered by the user.&lt;\\\/p&gt;&lt;p&gt;To add your own search term, select the gear icon\\u2026&lt;\\\/p&gt;&lt;p&gt;Preview settings\\u2026&lt;\\\/p&gt;&lt;p&gt;Enter your search term and click \\u2018Apply &amp; Preview\\u2019.&lt;\\\/p&gt;&lt;p&gt;Now add a new section\\u2026&lt;\\\/p&gt;&lt;p&gt;And add some padding\\u2026&lt;\\\/p&gt;&lt;p&gt;Drop in the \\u2018Archive Posts\\u2019 widget and instantly we can see the search results appear.&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s make some adjustments so it appears exactly how we\\u2019d like it to\\u2026&lt;\\\/p&gt;&lt;p&gt;You can also amend the pagination configuration &amp; \\u2018Nothing Found\\u2019 message if required.&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s style the search results\\u2026&lt;\\\/p&gt;&lt;p&gt;Set your column...and row gap distance\\u2026&lt;\\\/p&gt;&lt;p&gt;And then your alignment.&lt;\\\/p&gt;&lt;p&gt;Add a border radius if required\\u2026&lt;\\\/p&gt;&lt;p&gt;And spacing\\u2026&lt;\\\/p&gt;&lt;p&gt;You can also apply a CSS filter to both the normal &amp; hover states.&lt;\\\/p&gt;&lt;p&gt;Under content we can set our colors, typography &amp; spacing for the title &amp; excerpt.&lt;\\\/p&gt;&lt;p&gt;And finally apply your styles for the pagination\\u2026&lt;\\\/p&gt;&lt;p&gt;And \\u2018Nothing Found Message\\u2019.&lt;\\\/p&gt;&lt;p&gt;This concludes the content and styling options, let\\u2019s now rename our template\\u2026&lt;\\\/p&gt;&lt;p&gt;And publish\\u2026&lt;\\\/p&gt;&lt;p&gt;Add condition\\u2026&lt;\\\/p&gt;&lt;p&gt;Select \\u2018Search Results\\u2019 from the dropdown\\u2026&lt;\\\/p&gt;&lt;p&gt;And save.&lt;\\\/p&gt;&lt;p&gt;And there we have it.&lt;\\\/p&gt;&lt;p&gt;When somebody performs a search on our website, they will be directed to the search template which looks great.&lt;\\\/p&gt;&lt;p&gt;Using Elementor\\u2019s theme builder makes it easy to both create and manage the template files associated with your website.&lt;\\\/p&gt;&lt;p&gt;Make the most of this amazing feature and wow your website visitors with entirely branded content to keep them engaged on your website.&lt;\\\/p&gt;&lt;p&gt;In our next lesson we\\u2019ll take a look at the page associated with running a WooCommerce store.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;16001e9&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/X9q4yiaV2F8&quot;,&quot;title&quot;:&quot;WooCommerce Pages Explained&quot;,&quot;duration&quot;:&quot;16:41&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;WooCommerce Pages&quot;,&quot;source&quot;:&quot;library&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will learn about the pages associated with running a WooCommerce store.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e The cart page&lt;br \\\/&gt;\\u2714\\ufe0e The checkout page&lt;br \\\/&gt;\\u2714\\ufe0e The my account page&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;If we navigate to our website pages, you will see that WooCommerce has created four pages called \\u2018Cart, Checkout, My Account &amp; Shop\\u2019.&lt;\\\/p&gt;&lt;p&gt;Here at Elementor we\\u2019ve been working hard on three new widgets which will allow for full customisation of the Cart, Checkout &amp; My Account pages. Once released we\\u2019ll update this video with full instructions on how you can implement them into your store.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ve already explored the Shop section in our previous lesson, so let\\u2019s focus on the cart, checkout and my account pages.&lt;\\\/p&gt;&lt;p&gt;The first page we\\u2019ll investigate is the cart page.&lt;\\\/p&gt;&lt;p&gt;This is the page which customers can view once they\\u2019ve 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.&lt;\\\/p&gt;&lt;p&gt;If you select the title of the page, we are taken to the default WordPress editing screen.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Lets now select \\u2018Edit with Elementor\\u2019 and add in some other elements to the page.&lt;\\\/p&gt;&lt;p&gt;The shortcode is carried across into the Elementor editor and you should now see the cart within the editor.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;As you can see the default Elementor layout is showing the page name. Let\\u2019s remove this by selecting the gear icon in the bottom left hand corner and toggling the hide title option.&lt;\\\/p&gt;&lt;p&gt;Next, we\\u2019ll amend the padding around the cart area so that the spacing aligns with the rest of our website.&lt;\\\/p&gt;&lt;p&gt;The final step is to add in a hero section which contains our page title. We\\u2019ve saved our hero section as a template, so we\\u2019ll simply drop this into position and then amend the title.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s now preview our cart page to see what it looks like.&lt;\\\/p&gt;&lt;p&gt;OK, great. Let\\u2019s save this page and move onto the \\u2018Checkout\\u2019 page.&lt;\\\/p&gt;&lt;p&gt;The checkout page is the final step in the process of a customer buying a product from you.&lt;\\\/p&gt;&lt;p&gt;They will first of all see the fields they are required to fill in, like their name, contact information and billing address.&lt;\\\/p&gt;&lt;p&gt;Customers can also amend the shipping options here if required and select their chosen payment method.&lt;\\\/p&gt;&lt;p&gt;Once the transaction has successfully been completed, this same page will also display the order confirmation.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll first remove the page title\\u2026&lt;\\\/p&gt;&lt;p&gt;Amend the padding around the shortcode\\u2026&lt;\\\/p&gt;&lt;p&gt;And then add in\\u2026&lt;\\\/p&gt;&lt;p&gt;And amend the text in the header section\\u2026&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s now check this on the front end of our website.&lt;\\\/p&gt;&lt;p&gt;The last WooCommerce page we\\u2019re going to take a look at is the my account page.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s head to All Pages and now let\\u2019s select \\u2018My Account\\u2019.&lt;\\\/p&gt;&lt;p&gt;Just like before we can see that WooCommerce has automatically added a shortcode. This shortcode will display the my account area.&lt;\\\/p&gt;&lt;p&gt;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 &amp; password.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s again select \\u2018Edit with Elementor\\u2019 to customise our account page to fit in with the style of our website.&lt;\\\/p&gt;&lt;p&gt;Work your way through the same steps which we followed when adjusting the cart and checkout pages...&lt;\\\/p&gt;&lt;p&gt;And then check everything on the front end of your website.&lt;\\\/p&gt;&lt;p&gt;OK, that looks great!&lt;\\\/p&gt;&lt;p&gt;WooCommerce does a great job of automatically creating these essential pages for your store.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;In our next lesson we learn how to configure the shipping options for your store.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;c066df4&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=JXpFcqjIads&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=8&quot;,&quot;title&quot;:&quot;Configuring the Shipping Options&quot;,&quot;duration&quot;:&quot;8:44&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will learn how to use the default WooCommerce shipping options. We\\u2019ll first learn what shipping zones, methods, options &amp; classes are, followed by creating and applying these to our store.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e How to set up shipping zones, methods, options &amp; classes&lt;br \\\/&gt;\\u2714\\ufe0e Setting up flat rate &amp; free shipping&lt;br \\\/&gt;\\u2714\\ufe0e Assigning shipping classes to a product&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Understanding how to configure the WooCommerce shipping options can be overwhelming, but I\\u2019ll walk you through this step by step so you know how to set up your shipping zones, methods, options &amp; classes.&lt;\\\/p&gt;&lt;p&gt;To correctly set up our shipping options we must first understand the core concepts of the available options within WooCommerce.&lt;\\\/p&gt;&lt;p&gt;Firstly, we have shipping zones. Shipping zones are geographic locations where a certain set of shipping methods and their rates apply.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll cover both of these shortly.&lt;\\\/p&gt;&lt;p&gt;Finally, we have shipping classes. Shipping classes allow us to create product specific charges, for example we\\u2019re going to create an additional shipping charge to be applied if a product is classed as \\u2018Heavy Goods\\u2019. This will add the appropriate fee to the customers order ensuring they are paying for the correct shipping costs.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll be sure to go over each of these core aspects, but let\\u2019s start with the shipping zones.&lt;\\\/p&gt;&lt;p&gt;Our store, for example, only allows products to be shipped within the UK, so let\\u2019s apply those settings to ensure nobody places an order expecting delivery overseas.&lt;\\\/p&gt;&lt;p&gt;In the general tab first of all ensure we have the correct locations selected for our store.&lt;\\\/p&gt;&lt;p&gt;Scroll down to the General Options and set the Shipping Location to \\u2018Ship to specific countries only\\u2019. You will now see a new field where you can select the country you would like to ship to. In our instance, we\\u2019re going to set this to the United Kingdom.&lt;\\\/p&gt;&lt;p&gt;Notice that there were options available...&lt;\\\/p&gt;&lt;p&gt;You could set this to \\u2018Ship to all countries you sell to\\u2019...&lt;\\\/p&gt;&lt;p&gt;Ship to all countries\\u2026&lt;\\\/p&gt;&lt;p&gt;And you can even disable shipping as well as shipping calculations...&lt;\\\/p&gt;&lt;p&gt;Spend some time here ensuring you have explored all of the available options to make sure the configuration is correct for your store requirements.&lt;\\\/p&gt;&lt;p&gt;Once you have finished, let\\u2019s save and head to the \\u2018Shipping\\u2019 tab.&lt;\\\/p&gt;&lt;p&gt;The first thing we\\u2019re going to do is set a standard shipping charge for all orders. Before we do this however, let\\u2019s first set the Zone name and region by selecting the \\u2018Add Shipping Zone\\u2019 button.&lt;\\\/p&gt;&lt;p&gt;In the zone name we\\u2019ll enter \\u2018UK\\u2019 and under zone region we will select \\u2018United Kingdom\\u2019.&lt;\\\/p&gt;&lt;p&gt;You\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;Once these options have been set we are now ready to set our first shipping method. Let\\u2019s save our changes so far and then select the \\u2018Add shipping method\\u2019 button and now you\\u2019ll be presented with a pop-up window which asks you which shipping method you would like to create.&lt;\\\/p&gt;&lt;p&gt;WooCommerce provides three default shipping methods...&lt;\\\/p&gt;&lt;p&gt;Flat rate lets you charge a fixed rate for shipping.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Local pickup gives customers the option to bypass the shipping choices and collect their order in person.&lt;\\\/p&gt;&lt;p&gt;We\\u2019re going to choose \\u2018Flat Rate\\u2019 followed by \\u2018Add Shipping Method\\u2019.&lt;\\\/p&gt;&lt;p&gt;Select the edit link now and a new pop-up will appear.&lt;\\\/p&gt;&lt;p&gt;Here we can specify a title, whether we would like tax to be applied and a price.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll call our method \\u2018Standard UK Shipping\\u2019...&lt;\\\/p&gt;&lt;p&gt;Set the tax status to \\u2018taxable\\u2019...&lt;\\\/p&gt;&lt;p&gt;And finally we\\u2019ll set the cost to \\u00a31.99.&lt;\\\/p&gt;&lt;p&gt;Once complete, save your changes to return to the shipping zones screen.&lt;\\\/p&gt;&lt;p&gt;Now it\\u2019s time to create our second shipping method. This time we\\u2019re going to create a set of rules which allows customers to receive free shipping if they spend a certain amount within our store.&lt;\\\/p&gt;&lt;p&gt;Select \\u2018Add shipping method\\u2019.&lt;\\\/p&gt;&lt;p&gt;This time we\\u2019ll choose \\u2018Free shipping\\u2019 from the dropdown and then select \\u2018Add shipping method\\u2019. Select the edit icon located underneath the \\u2018Free shipping\\u2019 title and we\\u2019ll leave the title as \\u2018Free shipping\\u2019, then under \\u2018Free shipping requires\\u2026\\u2019 you see there are several available options.&lt;\\\/p&gt;&lt;p&gt;A valid free shipping coupon allows your customers to use a coupon during checkout to receive free shipping.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll cover how to create coupons for your store in a later lesson.&lt;\\\/p&gt;&lt;p&gt;A minimum order amount allows you to state a minimum spend before free shipping is enabled.&lt;\\\/p&gt;&lt;p&gt;And then we have an option to set an \\u2018Or\\u2019 or \\u2018And\\u2019 rule, allowing you to combine these options.&lt;\\\/p&gt;&lt;p&gt;We\\u2019re going to choose \\u2018A minimum order amount\\u2019 and then set the value to \\u00a320.00. This means that if the customer&#039;s cart totals more than \\u00a320.00, they will see the free shipping option when they checkout.&lt;\\\/p&gt;&lt;p&gt;If you have coupon codes enabled on your store it\\u2019s worth noting the final option here which allows you to apply the minimum order rule before a coupon discount is applied.&lt;\\\/p&gt;&lt;p&gt;Once all of these sections have been configured, hit save changes to return to the shipping zones screen.&lt;\\\/p&gt;&lt;p&gt;Before we move onto shipping classes we\\u2019ll first take a quick look at the shipping options.&lt;\\\/p&gt;&lt;p&gt;This section provides you with some additional options to further configure your store. The first option we see is \\u2018Calculations\\u2019. 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.&lt;\\\/p&gt;&lt;p&gt;For our store, we\\u2019re going to leave both of these options as default.&lt;\\\/p&gt;&lt;p&gt;Shipping destination controls which address is used. As standard it is set to \\u2018Default to customers billing address\\u2019 and we\\u2019ll leave it as this. You can change this if needed to \\u2018default to the customers shipping address\\u2019 and you can also force shipping to the customers billing address, meaning that the billing and shipping address must be the same.&lt;\\\/p&gt;&lt;p&gt;When finished, remember to save your changes.&lt;\\\/p&gt;&lt;p&gt;To finish the shipping configuration for our store let\\u2019s now create a shipping class.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Navigate your way to the shipping class tab and select \\u2018Add shipping class\\u2019.&lt;\\\/p&gt;&lt;p&gt;First of all give your shipping class a name, in our example we\\u2019re going to name it \\u2018Heavy Goods\\u2019.&lt;\\\/p&gt;&lt;p&gt;We can leave the slug blank, as this will automatically be created once our shipping class is saved. Finally we\\u2019ll add the description... \\u201cAdditional shipping charge for heavy items\\u201d, and select the \\u2018Save shipping classes\\u2019 button.&lt;\\\/p&gt;&lt;p&gt;Now that the new shipping class has been created we will assign it to a shipping method, and then a product.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s head back to the shipping zones area and select \\u2018UK\\u2019, followed by \\u2018Standard UK Shipping\\u2019.&lt;\\\/p&gt;&lt;p&gt;We are now presented with some additional options because we\\u2019ve added a shipping class.&lt;\\\/p&gt;&lt;p&gt;The field allows us to enter a price for our new shipping class, here we\\u2019ll enter \\u00a310.00. We\\u2019ll 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\\u2019ll leave this as per class.&lt;\\\/p&gt;&lt;p&gt;When finished, save your changes.&lt;\\\/p&gt;&lt;p&gt;Now that we have configured our shipping class we are ready to apply it to a product.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Select the product and scroll down to the \\u2018Product Data\\u2019 section.&lt;\\\/p&gt;&lt;p&gt;Here you will see the \\u2018Shipping\\u2019 tab, select this tab and under \\u2018Shipping Class\\u2019 choose your newly created shipping class.&lt;\\\/p&gt;&lt;p&gt;Remember to update your product and now let\\u2019s test it out.&lt;\\\/p&gt;&lt;p&gt;Everytime a customer adds this item to their cart the additional \\u2018Heavy Goods\\u2019 fee of \\u00a310.00 will be added to their order.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Check out the WooCommerce link in the description for more information.&lt;\\\/p&gt;&lt;p&gt;In our next lesson we will learn how to integrate Stripe &amp; PayPal into our store so that customers can make a payment.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;6f0a871&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=akmBfIEFxl4&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=9&quot;,&quot;title&quot;:&quot;Setting Up PayPal &amp; Stripe&quot;,&quot;duration&quot;:&quot;10:53&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will first learn how to enable and configure the inbuilt PayPal Standard option within WooCommerce. We\\u2019ll then install an additional plugin to enable Stripe payments on our website.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e Configure and setup PayPal Standard&lt;br \\\/&gt;\\u2714\\ufe0e Installing &amp; configure and setup Stripe&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;If you perform a quick search in the plugin repository you\\u2019ll see there are multiple 3rd party options to choose from.&lt;\\\/p&gt;&lt;p&gt;In our course we\\u2019re going to explore the inbuilt PayPal Standard option first of all and then we\\u2019ll move onto integrating the free WooCommerce Stripe plugin.&lt;\\\/p&gt;&lt;p&gt;Before we begin with configuring our PayPal settings, please first ensure you have an active PayPal Business account.&lt;\\\/p&gt;&lt;p&gt;Navigate your way to \\u2018WooCommerce &gt; Settings &gt; Payments\\u2019 and select the \\u2018Set up\\u2019 button to begin. As you can see we\\u2019re presented with several options to configure and link our PayPal account.&lt;\\\/p&gt;&lt;p&gt;You will also see these handy tooltips located next to several options, hovering your mouse over these brings up more information about the option.&lt;\\\/p&gt;&lt;p&gt;Please note that some settings below are optional, like the IPN Email Notifications and Identity Token. We\\u2019re 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\\u2019d like to cover all bases.&lt;\\\/p&gt;&lt;p&gt;First, we\\u2019ll enable PayPal Standard.&lt;\\\/p&gt;&lt;p&gt;Next, we have the option to amend the title and description which is shown on the checkout page. We\\u2019ll leave these as they are for our store.&lt;\\\/p&gt;&lt;p&gt;Now we need to enter our PayPal email address. Be sure to double check this once you\\u2019ve entered it as an incorrect email address will not allow your website to connect to PayPal successfully.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll need to sign up for a developers account.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll enable the IPN Email Notifications. This will send notifications when an Instant Payment Notification is received from PayPal indicating refunds, chargebacks and cancellations.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll leave this blank as ours doesn\\u2019t differ.&lt;\\\/p&gt;&lt;p&gt;Now we\\u2019ll enter our PayPal Identity token. This will allow payments to be verified without the need for PayPal IPN. We\\u2019ll open our PayPal account in a new tab and navigate our way to Account Settings &gt; Website Payments. Select the Update link next to the Website Preferences option.&lt;\\\/p&gt;&lt;p&gt;Enable Auto return, and then add your store\\u2019s thank you page link in the Return URL field. Once this is added, select save.&lt;\\\/p&gt;&lt;p&gt;Now enable the Payment Data Transfer and copy the identity token. Head back to your website dashboard and paste your token into the field.&lt;\\\/p&gt;&lt;p&gt;Next, you can amend the invoice prefix if required.&lt;\\\/p&gt;&lt;p&gt;You can opt to have WooCommerce send shipping details to PayPal to create shipping labels instead of billing. We\\u2019ll keep this enabled for our store.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;And finally we have the API Credentials.&lt;\\\/p&gt;&lt;p&gt;There are three fields we must populate here, they are:&lt;\\\/p&gt;&lt;p&gt;API Username&lt;br \\\/&gt;API Password&lt;br \\\/&gt;API Signature&lt;\\\/p&gt;&lt;p&gt;To find this information, head over to your PayPal account and navigate your way to Account Settings &gt; API Access &gt; Update.&lt;\\\/p&gt;&lt;p&gt;On this page scroll down until you see NVP\\\/SOAP API integration (Classic) and select Manage API Credentials.&lt;\\\/p&gt;&lt;p&gt;Ensure \\u2018Request an API Signature\\u2019 is selected and select \\u2018Agree and Submit\\u2019 to generate your API Credentials.&lt;\\\/p&gt;&lt;p&gt;On each credential, select show then copy and paste into your website dashboard.&lt;\\\/p&gt;&lt;p&gt;Once you have done this, simply save your settings and your store is now ready to accept payments with PayPal.&lt;\\\/p&gt;&lt;p&gt;The next payment processor we\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;WooCommerce provides a free plugin to allow us to connect our store with Stripe, so let\\u2019s install that first.&lt;\\\/p&gt;&lt;p&gt;Head over to Plugins &gt; 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.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll be configuring the first option here.&lt;\\\/p&gt;&lt;p&gt;Enable Stripe and then head to the settings screen.&lt;\\\/p&gt;&lt;p&gt;And just like with PayPal, we\\u2019re able to amend the title and description which appears on the checkout page.&lt;\\\/p&gt;&lt;p&gt;The Stripe plugin provides two methods of connecting your Stripe account. We can first of all select the button located in the \\u2018Stripe Account Keys\\u2019 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.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s select the \\u2018Set up or link an existing Stripe account\\u2019 button and log into our Stripe account.&lt;\\\/p&gt;&lt;p&gt;From here we are asked to select our business and connect...&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Next we must add our Webhook Endpoint to our Stripe account. Doing so ensures that we are able to receive notifications about transactions.&lt;\\\/p&gt;&lt;p&gt;First copy the Webhook Endpoint and then in a new tab log into your Stripe account.&lt;\\\/p&gt;&lt;p&gt;Navigate to Developers &gt; Webhooks and select \\u2018Add Endpoint\\u2019. Paste the endpoint into the field and under \\u2018Events to send\\u2019 select \\u2018Receive all Events\\u2019, then \\u2018Add Endpoint\\u2019.&lt;\\\/p&gt;&lt;p&gt;While we\\u2019re on the Webhooks page we can also grab our signing secret and enter it into our website dashboard.&lt;\\\/p&gt;&lt;p&gt;Under \\u2018signing secret\\u2019, select \\u2018Click to reveal\\u2019 and paste this value into the field titled \\u2018Webhook Secret\\u2019.&lt;\\\/p&gt;&lt;p&gt;Before we move on you\\u2019ll see in the WooCommerce settings page that Stripe provides a test mode option, these keys are not automatically populated so let\\u2019s add those now.&lt;\\\/p&gt;&lt;p&gt;Over in our Stripe account we need to check the toggle \\u2018View test data\\u2019. Now we can copy and paste our test publishable key &amp; test secret keys. We can also add the Webhook Endpoint to the test data, and finally the \\u2018Test Webhook Secret\\u2019.&lt;\\\/p&gt;&lt;p&gt;With test mode still enabled, let\\u2019s 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 \\u2018Test Mode is Enabled\\u2019 and even provides some helpful instructions on how to perform a test purchase.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s switch back, disable test mode and continue with our Stripe setup.&lt;\\\/p&gt;&lt;p&gt;We can set our credit card form as inline, meaning the date and CSV fields will not be separate. We\\u2019ll enable this option.&lt;\\\/p&gt;&lt;p&gt;Next you can control the information which is displayed on your customers invoice. We\\u2019ll simply enter \\u2018Bakersons\\u2019.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Stripe can also enable payments buttons from Apple Pay &amp; 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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;And finally we can enable logging of debug messages, this is helpful if you are experiencing issues with your transactions.&lt;\\\/p&gt;&lt;p&gt;Save you changes and there we have it, your store is now ready to accept payments with Stripe.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;WooCommerce provides excellent integrations with many third party payment providers and many of these plugins are expertly supported and well documented. We\\u2019ve covered two of the major payment providers but be sure to explore what other options are available for your store.&lt;\\\/p&gt;&lt;p&gt;In our next lesson we\\u2019ll take a look at customising our emails, creating coupons and managing our orders.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;742501d&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=r1vlDXgoQG8&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=10&quot;,&quot;title&quot;:&quot;Emails, Coupons &amp; Order Management&quot;,&quot;duration&quot;:&quot;09:19&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will first learn about the emails associated with a WooCommerce store. We\\u2019ll take a look at the standard emails, and then we\\u2019ll learn how to customise them. Next, we\\u2019ll investigate the WooCommerce coupon system. We\\u2019ll create a coupon code for our store and explore all of the available options. Finally, we will learn exactly what happens when a customer places an order on our store. We\\u2019ll take a look at the order screen, and learn how to manage this aspect.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e Customising your store emails&lt;br \\\/&gt;\\u2714\\ufe0e Creating coupon codes&lt;br \\\/&gt;\\u2714\\ufe0e Managing your orders&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Now that our store has been created, it\\u2019s time to dive into the management aspect of running a store.&lt;\\\/p&gt;&lt;p&gt;In this lesson, we will take a look at the emails associated with WooCommerce. We\\u2019ll also take a look at the customisation options which are available to ensure that all of our emails match our store&#039;s branding.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll then learn how to create and use coupon codes.&lt;\\\/p&gt;&lt;p&gt;And finally we\\u2019ll take a look at the process of what happens when a customer places an order.&lt;\\\/p&gt;&lt;p&gt;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 &gt; Settings &gt; Emails, you can see the list of emails which have been created.&lt;\\\/p&gt;&lt;p&gt;If you see the purple tick, it means that this email is enabled for your store.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;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 \\u2018customer\\u2019 these emails are sent to the customer who places the order.&lt;\\\/p&gt;&lt;p&gt;If we now select the \\u2018Manage\\u2019 button we can further customise the details associated with each individual email.&lt;\\\/p&gt;&lt;p&gt;As you can see we first of all have the option to enable and disable this email.&lt;\\\/p&gt;&lt;p&gt;Next, we can amend the recipient. If you need to enter multiple addresses here, do so by separating them with a comma.&lt;\\\/p&gt;&lt;p&gt;Both \\u2018Subject\\u2019 and \\u2018Email Heading\\u2019 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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;And finally you are able to amend the email type.&lt;\\\/p&gt;&lt;p&gt;Once finished, be sure to save your changes.&lt;\\\/p&gt;&lt;p&gt;If we now head back to the \\u2018Email\\u2019 tab and scroll down, you will see that we have several options to customise our email.&lt;\\\/p&gt;&lt;p&gt;We can first of all amend the \\u2018From name\\u2019 and \\u2018From address\\u2019.&lt;\\\/p&gt;&lt;p&gt;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\\u2019d say so let\\u2019s make some adjustments and make the email template fit with the style of our website.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll paste the URL for our logo into the \\u2018Header Image\\u2019 field and you can find this by visiting the media library, selecting your logo and then the \\u2018Copy URL to Clipboard\\u2019 button.&lt;\\\/p&gt;&lt;p&gt;We can now amend the \\u2018Footer text\\u2019 and just like with the email title we can use the available shortcodes if required.&lt;\\\/p&gt;&lt;p&gt;Change the base color to #6a5036, background &amp; body background color to #ffffff, and the body text to #000000.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Next up we\\u2019ll explore the inbuilt coupon options in WooCommerce.&lt;\\\/p&gt;&lt;p&gt;Creating coupons is a really useful feature built into WooCommerce which allows you to generate discount coupons for a variety of factors.&lt;\\\/p&gt;&lt;p&gt;Head over to Marketing &gt; Coupons and if this is your first time creating a coupon you will see the \\u2018Create your first coupon\\u2019 button.&lt;\\\/p&gt;&lt;p&gt;Select this button and let\\u2019s go over the configuration options which are available.&lt;\\\/p&gt;&lt;p&gt;We first see the \\u2018Coupon code\\u2019 field. We can manually type something here or use the helpful \\u2018Generate coupon code\\u2019 button.&lt;\\\/p&gt;&lt;p&gt;Next, we can enter a description, although this is an optional field.&lt;\\\/p&gt;&lt;p&gt;And then we move onto \\u2018Coupon data\\u2019, which is where we\\u2019ll define the rules for our coupon.&lt;\\\/p&gt;&lt;p&gt;Discount type allows us to choose from a percentage, fixed cart or fixed product discount. We\\u2019ll choose percentage.&lt;\\\/p&gt;&lt;p&gt;In the \\u2018Coupon amount\\u2019 field we\\u2019ll enter 10, as we would like our discount code to apply a 10% discount to the order.&lt;\\\/p&gt;&lt;p&gt;Next, we have the option to enable free shipping with the use of this coupon code. Please note that you must have a \\u2018Free Shipping Method\\u2019 configured for this option to work. To find out how to set up a free shipping method, check our dedicated section on shipping.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll leave this blank as we would like our coupon to be available indefinitely.&lt;\\\/p&gt;&lt;p&gt;Now, switch to the \\u2018Usage Restrictions&#039; tab, here we can set any restrictions associated with our coupon.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Our discount is going to be available to everybody without any restrictions so we\\u2019ll leave these all blank.&lt;\\\/p&gt;&lt;p&gt;Finally, we have the \\u2018Usage limits\\u2019 area.&lt;\\\/p&gt;&lt;p&gt;You can state how many times you\\u2019re happy for the coupon to be used before it\\u2019s void. Leaving this blank with default to \\u2018Unlimited\\u2019.&lt;\\\/p&gt;&lt;p&gt;Next, you can apply usage limits per item and last of all you can apply usage limits per user.&lt;\\\/p&gt;&lt;p&gt;Just like with many WooCommerce settings, hover your mouse over the question mark to find out more information on these configurations.&lt;\\\/p&gt;&lt;p&gt;Once you have finished configuring your coupon, select \\u2018Publish\\u2019 and your coupon is now ready for your customers to use.&lt;\\\/p&gt;&lt;p&gt;If we now head to our store we can test to see if it works.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Now that your store is configured and ready for the world to see it\\u2019s important to understand what happens when a customer places an order.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ve configured everything so far to ensure the correct emails are sent out and also made sure that those emails are matched with your branding.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;If we visit the WordPress dashboard and open the \\u2018Screen Options\\u2019 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.&lt;\\\/p&gt;&lt;p&gt;To view more information about any orders which have been placed, simply navigate to WooCommerce &gt; Orders.&lt;\\\/p&gt;&lt;p&gt;Here you\\u2019re 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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;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 \\u2018completed\\u2019 and then update the page. This will send an email to your customer informing them that their order is now complete.&lt;\\\/p&gt;&lt;p&gt;Next we can see that we have an \\u2018order actions\\u2019 dropdown. This can be helpful if you ever need to resend notifications to your customers or to regenerate the download permissions on digital products.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll only appear here in the admin panel. Or you can send a note to your customer.&lt;\\\/p&gt;&lt;p&gt;Remember to update the order once you\\u2019ve finished making your changes.&lt;\\\/p&gt;&lt;p&gt;WooCommerce makes light work of running an online store.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;2da0c75&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=GLYQm1m1v4E&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=11&quot;,&quot;title&quot;:&quot;Popups, Sales Pages &amp; Featured Products&quot;,&quot;duration&quot;:&quot;13:49&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In our final lesson we\\u2019ll learn a few basic marketing techniques which can really help push your website to the next level. First we\\u2019ll create a popup which will prompt visitors to sign up to our newsletter. Next, we will learn about the inbuilt featured products option in WooCommerce, and then we\\u2019ll learn how to display these on our pages using the Elementor editor. Finally, we\\u2019ll create a dedicated sales page for our recipe eBook.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e Creating a newsletter popup&lt;br \\\/&gt;\\u2714\\ufe0e Using featured products&lt;br \\\/&gt;\\u2714\\ufe0e Creating a sales page for a single product&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Running an online store isn\\u2019t simply a case of uploading your products once, sitting back and then hoping they sell. As a store owner you\\u2019ll need to continuously think of new ways to entice customers to purchase your products.&lt;\\\/p&gt;&lt;p&gt;In this lesson we\\u2019re going to teach you a few basic marketing techniques which you can apply to your store to help push your sales higher and higher.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll first create a popup.&lt;\\\/p&gt;&lt;p&gt;which will suggest a product to our customers who are browsing through the store. - remove&lt;\\\/p&gt;&lt;p&gt;Next, we\\u2019ll take a look at the inbuilt \\u2018Featured Products\\u2019 option. This will allow us to make specific products stand out which we are trying to push the sale on.&lt;\\\/p&gt;&lt;p&gt;Finally, we\\u2019ll create a dedicated sales page for a single product.&lt;\\\/p&gt;&lt;p&gt;So if you\\u2019re ready, let\\u2019s get started and take your store to the next level.&lt;\\\/p&gt;&lt;p&gt;The first marketing element we\\u2019re going to add to our website is a popup.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;In our example of using a popup on an online store, we\\u2019re 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.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s head over to the Popups area and create our first store popup.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll name ours \\u201cNewsletter Prompt\\u201d.&lt;\\\/p&gt;&lt;p&gt;You can of course choose a template from the library to get started if you so wish, but we\\u2019ll create ours from scratch so will dismiss the library.&lt;\\\/p&gt;&lt;p&gt;Before we add any content lets configure some general popup settings by selecting the gear icon\\u2026&lt;\\\/p&gt;&lt;p&gt;Set the width to 50VH...and leave the height as \\u2018Fit to Content\\u2019...you can amend this to \\u2018Fit to Screen\\u2019 or \\u2018Custom\\u2019 though if required.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ve leave the default position rules as we\\u2019d like our popup to show directly in the middle of the screen.&lt;\\\/p&gt;&lt;p&gt;And we\\u2019ll also leave the \\u2018Overlay\\u2019 &amp; \\u2018Close Button\\u2019 as \\u2018Show\\u2019.&lt;\\\/p&gt;&lt;p&gt;Set the animations to fade in...and fade out.&lt;\\\/p&gt;&lt;p&gt;Then in the style tab...set a background image for the popup\\u2026&lt;\\\/p&gt;&lt;p&gt;Set the position...attachment...repeat...and size\\u2026&lt;\\\/p&gt;&lt;p&gt;The overlay we\\u2019ll leave as default..&lt;\\\/p&gt;&lt;p&gt;And in the \\u2018Close Button\\u2019 tab set the color...and size of the close button (Primary 25).&lt;\\\/p&gt;&lt;p&gt;Finally in the advanced tab....add 5% padding to all sides.&lt;\\\/p&gt;&lt;p&gt;Ok, great...now let\\u2019s add some content.&lt;\\\/p&gt;&lt;p&gt;Add a new one column section\\u2026and then drop in a heading widget...amend the text...and the styles (Sign up - Center - Secondary Title - 1em Line Height).&lt;\\\/p&gt;&lt;p&gt;Duplicate the heading...amend the text\\u2026.then the styles (And save 10% on your first order - ).&lt;\\\/p&gt;&lt;p&gt;Add in our divider image.&lt;\\\/p&gt;&lt;p&gt;And now add in a contact form.&lt;\\\/p&gt;&lt;p&gt;Give the form a name (Newsletter Sign Up)&lt;\\\/p&gt;&lt;p&gt;Remove the message field...amend the input size to medium...and hide the label.&lt;\\\/p&gt;&lt;p&gt;Now amend the size of the button...and the text (Sign up).&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;Now under the button styles...set the typography (Button S Text - 1em)...background color (black)...border radius (0)...and hover color (brown).&lt;\\\/p&gt;&lt;p&gt;Switch back to the \\u2018Content\\u2019 tab and lets fine tune our form settings.&lt;\\\/p&gt;&lt;p&gt;Open \\u2018Actions after Submit\\u2019 and by default our form will automatically be added to our submission database, as well as emailed to the admin email address.&lt;\\\/p&gt;&lt;p&gt;If you select the plus icon you\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;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\\u2019ll automatically be added to your mailing list.&lt;\\\/p&gt;&lt;p&gt;For more information about integrating Elementor forms with third party services, please check out the detailed instructions in our documentation.&lt;\\\/p&gt;&lt;p&gt;In our example, we\\u2019re 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.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll also set up an automatic email which is sent to the customer providing them with their 10% discount code.&lt;\\\/p&gt;&lt;p&gt;And finally we\\u2019ll configure the popup to close, once the form has been submitted (select popup).&lt;\\\/p&gt;&lt;p&gt;There aren\\u2019t any configurations to be made with the submission, so let\\u2019s move onto the automatic email.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;Now paste this shortcode into the \\u2018To Field\\u2019. This will now dynamically populate this field with whichever email address has been entered on the front end of our website.&lt;\\\/p&gt;&lt;p&gt;Amend the title of the email\\u2026&lt;\\\/p&gt;&lt;p&gt;And then add your message\\u2026(Hey! Thanks for signing up to the Bakersons\\u2019 Newsletter. Your 10% discount is F3FSCPC4).&lt;\\\/p&gt;&lt;p&gt;Please note that you can add HTML as well as shortcodes to this message field if required for in depth personalisation of your email.&lt;\\\/p&gt;&lt;p&gt;Scrolling down, you\\u2019ll see that we can also control the from name...email address...as well as reply to...cc...and bcc if required. We\\u2019ll leave these as default for our form.&lt;\\\/p&gt;&lt;p&gt;Finally open the popup tab...and under action set this to \\u2018Close Popup\\u2019. This means that once the form has been submitted, the popup will automatically close and the customer can continue browsing through our website.&lt;\\\/p&gt;&lt;p&gt;If we now select \\u2018Publish\\u2019 we\\u2019re automatically taken to the display condition window.&lt;\\\/p&gt;&lt;p&gt;Here we can define the exact display settings for our popup.&lt;\\\/p&gt;&lt;p&gt;We would like to display our popup just once, to first time visitors.&lt;\\\/p&gt;&lt;p&gt;Select add condition...and leave it as the default \\u2018entire site\\u2019. This was the popup will show to first visitors, regardless of which page they land on first.&lt;\\\/p&gt;&lt;p&gt;Now under \\u2018Triggers\\u2019 enable \\u2018On Page Load\\u2019 and we\\u2019ll set this to 5 seconds.&lt;\\\/p&gt;&lt;p&gt;Finally switch the \\u2018Advanced Rules Tab\\u2019 and under \\u2018Show up to X times\\u2019 we\\u2019ll set this to 1, ensuring that the popup only shows the once.&lt;\\\/p&gt;&lt;p&gt;Now save and close, and your popup is ready for your store.&lt;\\\/p&gt;&lt;p&gt;If we now open our store in a new window and wait a few seconds, you\\u2019ll 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.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Now that we\\u2019ve learnt how to create a popup for our store, let\\u2019s take a look at WooCommerce\\u2019s Featured Products.&lt;\\\/p&gt;&lt;p&gt;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 \\u2018Products Widget\\u2019 just like we have here on the homepage of our website.&lt;\\\/p&gt;&lt;p&gt;There are two ways to set up a product as \\u2018featured\\u2019 in WooCommerce, and both are done on the products page, so let\\u2019s head there now.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;The second method is to select the \\u2018Quick Edit\\u2019 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\\u2019ve made any amendments.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s now choose two other products to be featured\\u2026&lt;\\\/p&gt;&lt;p&gt;OK, great. Now that we\\u2019ve selected some products to be featured, let&#039;s see how to display them on our website.&lt;\\\/p&gt;&lt;p&gt;Open up the homepage in the Elementor editor first of all...and then scroll down to this section, just below our hero image.&lt;\\\/p&gt;&lt;p&gt;Search for...and drop in the \\u2018Products Widget\\u2019.&lt;\\\/p&gt;&lt;p&gt;Don\\u2019t worry about the styles for this widget just yet, we\\u2019ll fix that soon. But for now switch over to the \\u2018Query\\u2019 tab and under \\u2018Source\\u2019 select \\u2018Featured\\u2019. And as you can see, the four products we just set as \\u2018featured\\u2019 are now showing.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ve previously styled a \\u2018Products Widget\\u2019 when we created our shop templates, so let&#039;s open that template into a new tab...right click the \\u2018Products Widget\\u2019 and select \\u2018Copy.&lt;\\\/p&gt;&lt;p&gt;Now back on the homepage, right click the \\u2018Products Widget\\u2019 and select \\u2018Paste Styles\\u2019.&lt;\\\/p&gt;&lt;p&gt;Wow, how easy was that!?&lt;\\\/p&gt;&lt;p&gt;If we now visit our home page you can see the 4 featured products now showing in a very prominent position.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;In the final part of this lesson we\\u2019re going to create a dedicated sales page which sells only one product.&lt;\\\/p&gt;&lt;p&gt;It\\u2019s 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.&lt;\\\/p&gt;&lt;p&gt;On our website we\\u2019ve created this sales page which is directly linked to a digital e-book of recipes from the bakery.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ve provided some sample recipes to entice the user in, a product description and then an \\u2018Add to cart\\u2019 button.&lt;\\\/p&gt;&lt;p&gt;And as you can see, selecting the \\u2018Add to Cart\\u2019 button takes the user straight to the cart page for ease.&lt;\\\/p&gt;&lt;p&gt;Lets jump into the Elementor editor and check out just how we added this product to our page.&lt;\\\/p&gt;&lt;p&gt;As you can see we\\u2019ve pre created this page to display our header image, text, as well as our sample recipes.&lt;\\\/p&gt;&lt;p&gt;If we keep scrolling you\\u2019ll see we have an empty column which is ready for our product to be added.&lt;\\\/p&gt;&lt;p&gt;Let&#039;s search for and drop in the \\u2018Product Widget\\u2019.&lt;\\\/p&gt;&lt;p&gt;And just like we did before when creating our featured products area, we\\u2019re going to copy the styles from a previously created product widget to save us time with the styling.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Now adjust the columns and rows to 1 as we would only like to display 1 product on this page.&lt;\\\/p&gt;&lt;p&gt;Lets now switch to the query tab...choose manual selection under source...and then search for our recipe ebook.&lt;\\\/p&gt;&lt;p&gt;OK, great...things are starting to take shape.&lt;\\\/p&gt;&lt;p&gt;Let now make some additional style adjustments\\u2026&lt;\\\/p&gt;&lt;p&gt;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).&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s now update our page and test it out.&lt;\\\/p&gt;&lt;p&gt;Fantastic, our sales page is complete and is ready for us to drive traffic to.&lt;\\\/p&gt;&lt;p&gt;Learning a few basic marketing techniques can really push your store to the next level.&lt;\\\/p&gt;&lt;p&gt;The great thing about using Elementor and WooCommerce together, is it\\u2019s extremely easy to set up and test multiple different combinations and ideas, allowing you to find the most optimal marketing techniques for your store.&lt;\\\/p&gt;&lt;p&gt;Elementor and WooCommerce really are the perfect combination.&lt;\\\/p&gt;&lt;p&gt;By using these tools together you have everything you need to create an amazing online store for any type of business.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;During this course we covered all aspects associated with building an online store with Elementor &amp; WooCommerce and you know have the knowledge and skills required to make a success of this.&lt;\\\/p&gt;&lt;p&gt;Be sure to share your shop creations with us by posting your website links in the comments.&lt;\\\/p&gt;&lt;p&gt;Thank you for watching and be sure to like and subscribe to our channel for more amazing tutorials and courses.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=GEJwAye0DrU&amp;t=3s&quot;,&quot;title&quot;:&quot;WooCommerce Menu Cart Widget&quot;,&quot;duration&quot;:&quot;04:45&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we\\u2019re going to add the menu cart widget to our website, which will help to provide a seamless shopping experience for our customers.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e Adding the menu cart widget to the header&lt;br \\\/&gt;\\u2714\\ufe0e Amending the positioning of the menu cart widget&lt;br \\\/&gt;\\u2714\\ufe0e Configuring &amp; styling the menu cart widget&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hey there, it\\u2019s Ash from Elementor.&lt;\\\/p&gt;&lt;p&gt;In this lesson we\\u2019re going to add the menu cart widget to our website, which will help to provide a seamless shopping experience for our customers.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;In this lesson...&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll first of all add the menu cart widget to our header template&lt;br \\\/&gt;We\\u2019ll then amend it\\u2019s positioning so that it fits perfectly with our other header elements&lt;br \\\/&gt;Then we\\u2019ll configure and style this widget to our exact requirements&lt;\\\/p&gt;&lt;p&gt;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.&lt;br \\\/&gt;Let\\u2019s get started by first opening the homepage in the Elementor Editor.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll add a few products to the cart, so that when we create our menu cart we\\u2019ll have some real time products to preview.&lt;\\\/p&gt;&lt;p&gt;Now select to edit the header.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll first drop in the Menu Cart Widget underneath our menu...and then amend it\\u2019s positioning so that it sits in line with our other elements.&lt;br \\\/&gt;Switch back to the content tab and let\\u2019s amend these options so that our menu cart is perfect for our requirements.&lt;\\\/p&gt;&lt;p&gt;Set your desired icon type...and items indicator.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll configure ours to hide if empty and will also disable the subtotal.&lt;\\\/p&gt;&lt;p&gt;Next, open the \\u2018Cart\\u2019 tab and we\\u2019ll also open the menu cart so that we can see our changes.&lt;\\\/p&gt;&lt;p&gt;Here we have an array of options to fully configure our menu cart. We\\u2019re going to leave most of these default values, as they work great for our requirements.&lt;\\\/p&gt;&lt;p&gt;Scroll down now until you see the \\u2018Button\\u2019 area. We\\u2019ll hide the \\u2018View Cart\\u2019 button, and move the \\u2018Checkout\\u2019 button to the bottom of the container.&lt;\\\/p&gt;&lt;p&gt;Open the \\u2018Additional Options\\u2019 tab next, and set the cart to open each time an item is added.&lt;\\\/p&gt;&lt;p&gt;And as you can see, if we scroll down and add a product, the menu cart opens and displays the newly added item.&lt;\\\/p&gt;&lt;p&gt;Now that we\\u2019ve configured our menu cart it\\u2019s time to switch over to the style tab and set the appearance.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s hide the side cart first, and then style the menu cart icon.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll set the icon color...border width\\u2026.and size.&lt;\\\/p&gt;&lt;p&gt;Now reopen the side cart again, and open the cart tab to set these styles.&lt;\\\/p&gt;&lt;p&gt;Set the padding to 50px on all sides.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll set the size and color for the close cart icon.&lt;\\\/p&gt;&lt;p&gt;The size and color for the remove item icon.&lt;\\\/p&gt;&lt;p&gt;And the color...typography...and width for the subtotal.&lt;\\\/p&gt;&lt;p&gt;Now open the products tab.&lt;\\\/p&gt;&lt;p&gt;Set your color for the product title.&lt;\\\/p&gt;&lt;p&gt;Color and typography for the product price.&lt;\\\/p&gt;&lt;p&gt;And styles for the button normal state...as well as the button hover state.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s now save the changes to our header and check this out on the front end of our website.&lt;\\\/p&gt;&lt;p&gt;As you can see, when we add products to our cart, the side cart automatically opens and is populated with our newly added products.&lt;\\\/p&gt;&lt;p&gt;We can remove items if we so wish, and also head to the checkout page to complete our order.&lt;br \\\/&gt;Make good use of the menu cart widget to ensure your customers receive a flawless and user friendly experience when browning your store.&lt;\\\/p&gt;&lt;p&gt;Thank you for watching, be sure to comment below with any questions, and don\\u2019t forget to subscribe to our channel for more amazing courses and tutorials.&lt;\\\/p&gt;&quot;,&quot;_id&quot;:&quot;ecad9cc&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=t7WVz9ECSDI&amp;t=4s&quot;,&quot;title&quot;:&quot;Using WooCommerce Dynamic Tags&quot;,&quot;duration&quot;:&quot;07:13&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we\\u2019re going to learn how to use WooCommerce Dynamic Tags on your website.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e Creating and configuring a popup&lt;br \\\/&gt;\\u2714\\ufe0e Populating a popup with widgets which display dynamic data from WooCommerce&lt;br \\\/&gt;\\u2714\\ufe0e Setting the display conditions for the popup&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hey there, it\\u2019s Ash from Elementor.&lt;\\\/p&gt;&lt;p&gt;In this lesson I\\u2019m going to teach you how to use WooCommerce Dynamic Tags on your website.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll be building this popup which will be populated using dynamic data, all pulled straight from our WooCommerce products.&lt;\\\/p&gt;&lt;p&gt;To achieve this we\\u2019ll undertake the following:&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll first create and configure our popup&lt;br \\\/&gt;Then we\\u2019ll populate it using various widgets, columns and sections. Many of which will display data using dynamic tags.&lt;br \\\/&gt;And finally we\\u2019ll set our display conditions, so that the popup shows when a user tries to leave the website&lt;\\\/p&gt;&lt;p&gt;Elementor makes displaying dynamic data extremely straightforward, if you need to familiarise yourself with this feature, you\\u2019ll find a link in the description below to our dedicated tutorial.&lt;br \\\/&gt;We\\u2019ll begin the WordPress dashboard.&lt;\\\/p&gt;&lt;p&gt;Then head over to Templates &gt; Popups, and add a new pop-up.&lt;\\\/p&gt;&lt;p&gt;Give your pop-up a name, and then select \\u2018Create Template\\u2019.&lt;\\\/p&gt;&lt;p&gt;Dismiss the library...&lt;br \\\/&gt;...and then select the gear icon, located in the bottom left corner.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll set the width to 70vw\\u2026&lt;\\\/p&gt;&lt;p&gt;And entrance and exit animations to fade-in and fade-out.&lt;br \\\/&gt;Now add a new two column section.&lt;\\\/p&gt;&lt;p&gt;Set it to full-width and then amend the padding on the first column.&lt;\\\/p&gt;&lt;p&gt;Drop in a heading widget...amend the text...alignment....and typography.&lt;br \\\/&gt;We\\u2019ll add in a divider image.&lt;br \\\/&gt;Next we\\u2019ll drop in another heading widget, and this time instead of manually amending the text, we\\u2019ll set it using dynamic content.&lt;\\\/p&gt;&lt;p&gt;Select the dynamic tags icon, and scroll down until you see \\u2018Product Title\\u2019.&lt;\\\/p&gt;&lt;p&gt;Open the dynamic options by selecting the wrench icon, select \\u2018All\\u2019 and then search for your product.&lt;\\\/p&gt;&lt;p&gt;Now set the alignment...color...and padding.&lt;br \\\/&gt;Add in another heading widget and again, select the dynamics tags icon and this time choose \\u2018Product Price\\u2019. Select the wrench icon and search for your product.&lt;\\\/p&gt;&lt;p&gt;By default, you will see both the normal and sale price. We can amend to show just the sale price but using the \\u2018Format Dropdown\\u2019.&lt;\\\/p&gt;&lt;p&gt;If we now open the \\u2018Advanced\\u2019 tab you\\u2019ll see we can enter text to display before and after our dynamic value, as well as fallback text.&lt;\\\/p&gt;&lt;p&gt;In the after field, enter a space followed by \\u201c\\\/ per kg\\u201d.&lt;\\\/p&gt;&lt;p&gt;Once you\\u2019ve done this, set your alignment...and typography.&lt;br \\\/&gt;Now search for and drop in the \\u2018Custom Add to Cart\\u2019 widget.&lt;\\\/p&gt;&lt;p&gt;Search for your product\\u2026Amend the text\\u2026Alignment\\u2026Remove the icon\\u2026&lt;\\\/p&gt;&lt;p&gt;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.&lt;br \\\/&gt;To continue styling our popup, we\\u2019re going to set the background image of the second column to automatically display the product image.&lt;\\\/p&gt;&lt;p&gt;To do this, select the column...then go to style...background...and choose classic.&lt;\\\/p&gt;&lt;p&gt;Select the dynamic tags icon, choose product image and then search for your product.&lt;\\\/p&gt;&lt;p&gt;Set the position...and size.&lt;\\\/p&gt;&lt;p&gt;OK, that\\u2019s looking great. Now let\\u2019s check our design for tablet and mobile devices as well.&lt;br \\\/&gt;Open responsive mode and then switch to tablet first of all.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll set each column to take up 100% of the available width first of all, which will stack them on top of one another.&lt;\\\/p&gt;&lt;p&gt;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\\u2019s do this for both tablet and mobile devices.&lt;\\\/p&gt;&lt;p&gt;Now drop a spacer widget into the column and set it\\u2019s height.&lt;\\\/p&gt;&lt;p&gt;Latestly, amend the padding on the second column.&lt;\\\/p&gt;&lt;p&gt;Switch to mobile view next...and make any necessary amendments.&lt;br \\\/&gt;Once finished, close responsive mode and now let\\u2019s style the close button.&lt;\\\/p&gt;&lt;p&gt;Select the gear icon and head to style &gt; close button.&lt;\\\/p&gt;&lt;p&gt;Set the normal color\\u2026.hover color...and size.&lt;br \\\/&gt;Now that we\\u2019ve finished creating and styling our popup, it\\u2019s time to publish and set it\\u2019s display conditions.&lt;\\\/p&gt;&lt;p&gt;Select the \\u2018Publish\\u2019 button, then choose \\u2018Add Condition\\u2019.&lt;\\\/p&gt;&lt;p&gt;By default, it will show across the entire website, and this is what we\\u2019ll leave it as.&lt;\\\/p&gt;&lt;p&gt;Next, select \\u2018Triggers\\u2019 and activate \\u2018On Page Exit Intent\\u2019. This ensures the popup appears when a user is about to leave the page....hopefully enticing them into purchasing a product before they go.&lt;\\\/p&gt;&lt;p&gt;And finally to ensure that our popup isn\\u2019t too intrusive, we\\u2019ll set advanced rule to only display once.&lt;\\\/p&gt;&lt;p&gt;When finished, save and close, and now your popup is ready.&lt;\\\/p&gt;&lt;p&gt;If we now visit our website and act as if we\\u2019re about to leave, you can see the popup fades in and displays our offer.&lt;br \\\/&gt;Outro&lt;br \\\/&gt;Utilizing popups on your store can be really beneficial in both promoting products and engaging with your customers.&lt;\\\/p&gt;&lt;p&gt;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.&lt;\\\/p&gt;&lt;p&gt;Thank you for watching, be sure to comment below with any questions, and don\\u2019t forget to subscribe to our channel for more amazing courses and tutorials.&lt;\\\/p&gt;&quot;,&quot;_id&quot;:&quot;6917c0c&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;}],&quot;inner_tab_title_1&quot;:&quot;Overview&quot;,&quot;inner_tab_title_2&quot;:&quot;Transcript&quot;,&quot;inner_tab_is_content_collapsible&quot;:&quot;collapsible&quot;,&quot;inner_tab_collapsible_height&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;139&quot;,&quot;sizes&quot;:[]},&quot;autoplay_next&quot;:&quot;yes&quot;,&quot;show_watched_indication&quot;:&quot;yes&quot;,&quot;inner_tab_collapsible_height_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;inner_tab_collapsible_height_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"video-playlist.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div class=\"e-tabs\" role=\"region\" aria-labelledby=\"e-playlist-64506387\">\n\t\t\t<div class=\"e-tabs-main-area\">\n\t\t\t\t<div class=\"e-tabs-wrapper\">\n\t\t\t\t\t<div class=\"e-tabs-header\">\n\t\t\t\t\t\t<h2 class=\"e-tabs-title\" id=\"e-playlist-64506387\">Building an online store with WooCommerce<\/h2>\n\t\t\t\t\t\t<div class=\"e-tabs-header-right-side\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tabs-videos-count\">13 Videos<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-tabs-toggle-videos-display-button rotate-down e-font-icon-svg e-eicon-caret-down\" viewBox=\"0 0 571.4 571.4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M571 393Q571 407 561 418L311 668Q300 679 286 679T261 668L11 418Q0 407 0 393T11 368 36 357H536Q550 357 561 368T571 393Z\"><\/path><\/svg>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"e-tabs-items-wrapper\">\n\t\t\t\t\t\t<div class=\"e-tabs-items\" role=\"tablist\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-1681\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"e-tab-content-1681\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Building an online store with WooCommerce<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">1:28<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-1682\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1682\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Important First Steps<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">3:45<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-1683\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"3\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1683\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Install &amp; Configure WooCommerce<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">14:07<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-1684\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"4\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1684\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Adding Products &amp; Categories<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">13:37<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-1685\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"5\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1685\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">WooCommerce Templates Part 1<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">14:20<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-1686\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"6\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1686\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">WooCommerce Templates Part 2<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">8:39<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-1687\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"7\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1687\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">WooCommerce Pages Explained<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">16:41<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-1688\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"8\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1688\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Configuring the Shipping Options<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">8:44<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-1689\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"9\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1689\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Setting Up PayPal &amp; Stripe<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">10:53<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-16810\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"10\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-16810\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Emails, Coupons &amp; Order Management<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">09:19<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-16811\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"11\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-16811\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Popups, Sales Pages &amp; Featured Products<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">13:49<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-16812\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"12\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-16812\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">WooCommerce Menu Cart Widget<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">04:45<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-title-16813\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"13\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-16813\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Using WooCommerce Dynamic Tags<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">07:13<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"shadow shadow-top\" aria-hidden=\"true\"><\/div>\n\t\t\t\t\t\t<div class=\"shadow shadow-bottom\" aria-hidden=\"true\"><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"e-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1681\" class=\"e-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1681\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=uR9YmvkwtIk&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=1\" data-video-type=\"youtube\" data-video-title=\"Building an online store with WooCommerce\" data-video-duration=\"1:28\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1682\" class=\"e-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1682\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=1czN1ARBP4U&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=2\" data-video-type=\"youtube\" data-video-title=\"Important First Steps\" data-video-duration=\"3:45\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1683\" class=\"e-tab-content elementor-clearfix\" data-tab=\"3\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1683\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=R0n_3s0wlYA&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=3\" data-video-type=\"youtube\" data-video-title=\"Install &amp; Configure WooCommerce\" data-video-duration=\"14:07\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1684\" class=\"e-tab-content elementor-clearfix\" data-tab=\"4\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1684\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=0FI5qK2vZ-o&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=4\" data-video-type=\"youtube\" data-video-title=\"Adding Products &amp; Categories\" data-video-duration=\"13:37\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1685\" class=\"e-tab-content elementor-clearfix\" data-tab=\"5\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1685\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=MT5vQGZEGVA&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=5\" data-video-type=\"youtube\" data-video-title=\"WooCommerce Templates Part 1\" data-video-duration=\"14:20\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1686\" class=\"e-tab-content elementor-clearfix\" data-tab=\"6\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1686\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=BJWOFkdugjM&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=6\" data-video-type=\"youtube\" data-video-title=\"WooCommerce Templates Part 2\" data-video-duration=\"8:39\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1687\" class=\"e-tab-content elementor-clearfix\" data-tab=\"7\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1687\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/X9q4yiaV2F8\" data-video-type=\"youtube\" data-video-title=\"WooCommerce Pages Explained\" data-video-duration=\"16:41\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1688\" class=\"e-tab-content elementor-clearfix\" data-tab=\"8\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1688\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=JXpFcqjIads&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=8\" data-video-type=\"youtube\" data-video-title=\"Configuring the Shipping Options\" data-video-duration=\"8:44\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1689\" class=\"e-tab-content elementor-clearfix\" data-tab=\"9\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1689\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=akmBfIEFxl4&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=9\" data-video-type=\"youtube\" data-video-title=\"Setting Up PayPal &amp; Stripe\" data-video-duration=\"10:53\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-16810\" class=\"e-tab-content elementor-clearfix\" data-tab=\"10\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-16810\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=r1vlDXgoQG8&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=10\" data-video-type=\"youtube\" data-video-title=\"Emails, Coupons &amp; Order Management\" data-video-duration=\"09:19\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-16811\" class=\"e-tab-content elementor-clearfix\" data-tab=\"11\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-16811\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=GLYQm1m1v4E&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=11\" data-video-type=\"youtube\" data-video-title=\"Popups, Sales Pages &amp; Featured Products\" data-video-duration=\"13:49\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-16812\" class=\"e-tab-content elementor-clearfix\" data-tab=\"12\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-16812\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=GEJwAye0DrU&amp;t=3s\" data-video-type=\"youtube\" data-video-title=\"WooCommerce Menu Cart Widget\" data-video-duration=\"04:45\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-16813\" class=\"e-tab-content elementor-clearfix\" data-tab=\"13\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-16813\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=t7WVz9ECSDI&amp;t=4s\" data-video-type=\"youtube\" data-video-title=\"Using WooCommerce Dynamic Tags\" data-video-duration=\"07:13\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"e-tabs-inner-tabs\" >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1681\" class=\"e-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1681\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=uR9YmvkwtIk&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=1\" data-video-type=\"youtube\" data-video-title=\"Building an online store with WooCommerce\" data-video-duration=\"1:28\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>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.<\/p><p>In this course we will create this store for Bakersons which is a fictitious local bakery which sells delicious baked goods to their customers.<\/p><p>In this course we\u2019ll cover:<br \/>\u2714\ufe0e How to install, set-up and configure WooCommerce<br \/>\u2714\ufe0e How to create products and services to sell on your store<br \/>\u2714\ufe0e How to build your store templates using the Elementor theme builder<br \/>\u2714\ufe0e How to configure various shipping options<br \/>\u2714\ufe0e How to connect PayPal &amp; Stripe to your store<br \/>\u2714\ufe0e How to customise your store emails as well as creating coupon codes and managing your orders once your store is live<br \/>\u2714\ufe0e Additional marketing options, like creating pop-ups, setting featured products and creating sales pages<\/p><p>Be sure to jump to any of these sections if you\u2019re looking for assistance in a specific area.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Hey, it\u2019s Ash from Elementor.<\/p><p>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.<\/p><p>In this course we will create this store for Bakersons which is a fictitious local bakery which sells delicious baked goods to their customers.<\/p><p>We\u2019ll cover:<\/p><ol><li>How to install, set-up and configure WooCommerce<\/li><li>How to create products and services to sell on your store<\/li><li>How to build your store templates using the Elementor theme builder<\/li><li>Additional marketing options, like creating pop-ups, setting featured products and creating sales pages<\/li><li>How to configure various shipping options<\/li><li>How to connect PayPal &amp; Stripe to your store<\/li><li>How to customise your store emails as well as creating coupon codes and managing your orders once your store is live<\/li><\/ol><p>Be sure to jump to any of these sections if you\u2019re looking for assistance in a specific area and don\u2019t forget to save this course for future reference.<\/p><p>Let\u2019s get started and learn how to build an online store with Elementor &amp; WooCommerce.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1682\" class=\"e-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1682\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=1czN1ARBP4U&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=2\" data-video-type=\"youtube\" data-video-title=\"Important First Steps\" data-video-duration=\"3:45\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In this lesson we&#8217;ll learn about the important first steps which must be undertaken before creating and launching an online store.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e Web Hosting Requirements when running an online store<br \/>\u2714\ufe0e The importance of an active SSL Certificate<br \/>\u2714\ufe0e Benefits of using a Security Plugin<br \/>\u2714\ufe0e How to install the Hello Elementor Theme<br \/>\u2714\ufe0e How to install Elementor &amp; Elementor Pro<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Before we install our theme and the necessary plugins, let\u2019s first explore some important aspects involved with running an online store.<\/p><p>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.<\/p><p>Ensure that your web hosting is suitable enough to handle this and keep a close on the resources you\u2019re using to ensure that your customers are receiving a great experience when visiting your store.<\/p><p>To find out more about choosing a suitable web host, check out the dedicated lesson in our performance course.<\/p><p>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.<\/p><p>Many web hosts provide these for free, but if yours doesn\u2019t there are many options available, both free and premium. Consult your web host for more information about installing an SSL certificate.<\/p><p>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.<\/p><p>Using a security plugin can be very beneficial and with a quick search in the WordPress repository you\u2019ll 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.<\/p><p>Finally it is a good idea to enable Captacha on your website. Google provides an excellent free service here called reCaptacha.<\/p><p>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.<\/p><p>Using the free plugin \u2018Simple Google reCaptcha\u2019 will easily allow you to add reCaptacha to all aspects of your website, including WooCommerce.<\/p><p>Moving on, this course will cover all aspects of creating an online store with Elementor &amp; WooCommerce, however to ensure you are able to follow along with confidence we recommend that you have at least basic familiarity with Elementor &amp; Elementor Pro. This includes using sections, columns, widgets and basic knowledge of the theme builder.<\/p><p>If you need to learn more about using Elementor please refer to the links in the description.<\/p><p>We\u2019ll be using the free lightweight Hello Elementor theme on our store.<\/p><p>To install this, head over to the themes areas and select the \u2018Add New\u2019 button.<\/p><p>Switch to the popular tab then install and activate the theme.<\/p><p>As you can now see we are prompted to install Elementor.<\/p><p>Select the \u2018Install Elementor\u2019 button\u2026<\/p><p>And activate\u2026<\/p><p>Next, we\u2019ll install Elementor Pro.<\/p><p>Log into your Elementor Pro account and download the latest version of the plugin.<\/p><p>Back in the plugins area let\u2019s now upload the plugin&#8230;<\/p><p>Activate\u2026<\/p><p>And connect to our Elementor account.<\/p><p>Building and running an online store can be a daunting task, but with the right preparation and planning you\u2019ll lessen the risk of running into problems throughout the project.<\/p><p>In our next lesson we\u2019re going to go through the entire WooCommerce installation process, configure many of the settings for our store and also set up our taxes.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1683\" class=\"e-tab-content elementor-clearfix\" data-tab=\"3\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1683\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=R0n_3s0wlYA&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=3\" data-video-type=\"youtube\" data-video-title=\"Install &amp; Configure WooCommerce\" data-video-duration=\"14:07\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In this lesson we will cover how to install, activate and set up WooCommerce. We\u2019ll walk you through the setup process step by step whilst exploring the pages which are associated with WooCommerce. Finally we will learn how to configure the tax settings as well as adding a privacy policy.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e How to install and activate WooCommerce<br \/>\u2714\ufe0e General WooCommerce setup and configuration<br \/>\u2714\ufe0e Understanding WooCommerce pages<br \/>\u2714\ufe0e WooCommerce general settings<br \/>\u2714\ufe0e Tax configurations<br \/>\u2714\ufe0e Adding a privacy policy<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Now that we have a good understanding of what is required when owning an online store and have undertaken some important first steps, let\u2019s head back into the WordPress dashboard and explore the WooCommerce plugin.<\/p><p>To get started with WooCommerce we must first install their plugin.<\/p><p>Let\u2019s head to the plugins area and select \u2018add new\u2019.<\/p><p>Type \u201cWooCommerce\u201d into the search field and once the results have loaded you should see the WooCommerce plugin as the first result.<\/p><p>Select the \u2018Install Now\u2019 button and wait a few moments for the plugin to install.<\/p><p>Once complete you can then activate the plugin.<\/p><p>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.<\/p><p>If you would prefer to manually set up your store, you can select the \u2018Skip\u2019 option located at the bottom of the page. All of these details can be entered manually at a later stage if required.<\/p><p>The first option you\u2019ll see enables you to input your store address. Once you have entered your address select continue.<\/p><p>You will now be asked if you would like to share tracking data, we\u2019ll select \u2018No Thanks\u2019, but this decision is entirely up to you.<\/p><p>Next, choose the appropriate industry and continue.<\/p><p>The next screen will allow you to specify the types of products you are going to sell. In our store we plan on selling \u2018physical\u2019 &amp; \u2018downloadable\u2019 products, so these are the two options we\u2019ll select. You\u2019ll see that WooCommerce offers several other premium product types, you can select the info icon to find out more about these.<\/p><p>In the next area we can enter some data about our products and whether we currently sell elsewhere. We\u2019ll select 1-10 products in the first field and \u2018Yes, in person at physical stores &amp; events\u2019 in the second. Under \u201cWhat\u2019s your current annual revenue\u201d, we\u2019ll set the appropriate amount.<\/p><p>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.<\/p><p>We\u2019ll uncheck the recommended features for now, but please note these can all be added at a later stage if required.<\/p><p>The final step in our set-up is to tell WooCommerce which theme we would like to use. Our website currently uses the \u2018Hello Elementor\u2019 theme and we plan to continue doing so, so this is what we\u2019ll select.<\/p><p>WooCommerce will now ask if you would like to install the JetPack plugin. We\u2019re going to select \u2018No thanks\u2019.<\/p><p>Ok, the initial store set-up is now complete and as you can see we are taken to the WooCommerce home screen.<\/p><p>We will revisit the store settings later in the course to further configure other aspects of the store like shipping, taxes &amp; payment providers.<\/p><p>Let&#8217;s close the welcome pop-up window and head over to the pages section to better understand the pages associated with WooCommerce.<\/p><p>As you can see WooCommerce has automatically created several pages for your new store.<\/p><p>The first three pages, \u2018Cart\u2019, \u2018Checkout\u2019, and \u2018My Account\u2019 can all be edited here using the Elementor editor.<\/p><p>The \u2018Cart\u2019 page will allow your customers to view, amend and review the products they\u2019ve added for purchase.<\/p><p>The \u2018Checkout\u2019 page is where your customer will enter their billing, shipping and payment information.<\/p><p>And finally the \u2018My Account\u2019 page is where you customers can view their order details, amend their account settings like billing information or update their password.<\/p><p>The fourth page which WooCommerce has automatically created is \u2018Shop\u2019. This page will display your product archive and can be edited using the Elementor Theme Builder which we explore later in the course.<\/p><p>Now that we have acquainted ourselves with the pages associated with WooCommerce we can take a further look at the store settings.<\/p><p>Head to WooCommerce &gt; Settings.<\/p><p>The settings area contains several tabs which allow you to manage many aspects of your store. Later in our course we\u2019ll cover the payment, shipping &amp; email sections.<\/p><p>For now, ensure you have the \u2018General\u2019 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.<\/p><p>In this area we can also configure the\u2026<\/p><p>Selling location\u2026<\/p><p>Shipping location\u2026<\/p><p>&amp; default customer location.<\/p><p>We will revisit these options when we configure our shipping options.<\/p><p>We are also able to specify whether or not we wish to enable taxes and the use of coupons.<\/p><p>Finally, at the bottom we can amend the currency options if required.<\/p><p>Remember to save your changes before navigating away from this tab.<\/p><p>Next, we\u2019ll switch over to the Products tab where you can see there are three sub areas\u2026<\/p><p>General\u2026<\/p><p>Inventory\u2026<\/p><p>And downloadable products&#8230;<\/p><p>First, let\u2019s take a look at the general area.<\/p><p>By default WooCommerce has already selected our page titled \u2018Shop\u2019 to be the default shop page. If you would like to change this page, you can make the amendment here.<\/p><p>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\u2019t require the page to reload for an item to be added to the cart.<\/p><p>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.<\/p><p>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.<\/p><p>If you would like to change the measurements units used within your store, you can do so here.<\/p><p>And finally you\u2019ll 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.<\/p><p>We\u2019re going to leave these all as default for our store, but please note any of these configurations can be amended at any time.<\/p><p>The second subsection we have is to manage the inventory for our store. Switch over the \u2018Inventory\u2019 tab.<\/p><p>By default you can see that stock management is enabled, however if your store doesn\u2019t 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.<\/p><p>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.<\/p><p>The third and final subsection we see here is for Downloadable Products.<\/p><p>Here you are able to amend the download method, access restrictions and filename configuration.<\/p><p>Now we have finished configuring our products we\u2019re ready to move onto the \u2018Tax\u2019 settings.<\/p><p>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\u2019ll be making sure your store is compliant with your local authorities.<\/p><p>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.<\/p><p>Now switch to the tax tab and we\u2019ll go over each of these options so that you have a better understanding of how to set up tax on your store.<\/p><p>The first option here asks you if you would like to enter prices inclusive or exclusive of tax. We\u2019ll set this to yes as we plan to enter our prices including tax.<\/p><p>\u2018Calculate tax based on\u2019 allows you to specify the location which is used to calculate your tax. For our store, we\u2019ll set this as \u2018Shop base address\u2019 as we would like the local tax rules to be applied to all purchases.<\/p><p>\u2018Shipping tax class\u2019 we leave as default as we would like the tax to be based on the cart items themselves.<\/p><p>\u2018Rounding\u2019 simply displays the tax which has been added to the order in one clear to see amount, rather than per line. We\u2019ll leave this on.<\/p><p>The next section allows you to create additional custom tax classes. As you can see there are already two default classes created, reduced rate &amp; zero rate. Our store doesn\u2019t 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.<\/p><p>Let\u2019s quickly remove our example tax class as we do not require it for our store.<\/p><p>Next, we can state if we would like our prices to display including or excluding tax. We\u2019ll set this to \u2018including\u2019, and we\u2019ll do the same for the next option which controls the pricing display on the cart and checkout pages.<\/p><p>If you would like to display a suffix to your prices, you can enter that here. For example you could add \u2018Inc VAT\u2019. We\u2019ll leave this blank for our store.<\/p><p>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\u2019ll set this to \u2018As a single total\u2019.<\/p><p>Now that we have configured the general settings for our tax we are ready to move onto setting the rates for each option.<\/p><p>Select \u2018Standard rates\u2019 and as you can see we\u2019re 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.<\/p><p>We\u2019ll leave all of these as default as we would like to apply a global tax rate in our store.<\/p><p>Under tax rate we\u2019ll enter 20%.<\/p><p>Tax name allows you to amend the name of this tax option, we\u2019ll enter 20% in the field so it\u2019s clear which tax rate this is.<\/p><p>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.<\/p><p>Once you have finished, save your changes and switch to \u2018reduced rate\u2019.<\/p><p>As you can see we are presented with the same tax rate table. We\u2019ll keep most of the same settings here, except we\u2019ll set our reduced tax rate as 5%.<\/p><p>Finally, we\u2019ll switch to the \u2018zero rate\u2019 tax option and as you can see this has already been set to 0% so we can leave this as it is.<\/p><p>Our tax rates are now completely configured and when it comes to creating our products we\u2019ll explore the options on how to apply these tax rates to the products in our store.<\/p><p>Let\u2019s move onto configuring the \u2018Accounts &amp; Privacy\u2019 settings.<\/p><p>Switch to the \u2018Accounts &amp; Privacy\u2019 tab.<\/p><p>Upon installing WooCommerce there are several default account &amp; privacy options configured. If these do not suit your requirements, they can all be changed here.<\/p><p>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\u2019ll enable this option.<\/p><p>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.<br \/>The next areas allow you to configure several aspects with regards to personal data and privacy. It\u2019s a good idea to consult your company&#8217;s data and privacy policies before setting these options.<\/p><p>You can amend the text shown when referencing your privacy policy on the registration and checkout pages.<\/p><p>Please note you must set your privacy policy in the general WordPress settings for this to work on your store.<\/p><p>To do this, simply create your Privacy page\u2026<\/p><p>&#8230;then in Settings &gt; Privacy, set your new page like so.<\/p><p>You also have the option to amend how long your store retains personal data. Again, it\u2019s best to consult your company&#8217;s privacy policy before configuring this section.<\/p><p>For our store, we will leave these as default.<\/p><p>2i. Settings &#8211; Advanced<\/p><p>The last section we\u2019ll explore for now is the advanced tab.<\/p><p>Here you\u2019ll see that WooCommerce has automatically selected the newly created pages for \u2018Cart\u2019, \u2018Checkout\u2019, &amp; the \u2018My Account\u2019 page. Next, you should specify where your terms and conditions are located as WooCommerce automatically inserts a link within the checkout page.<\/p><p>Checking the \u2018Force secure checkout\u2019 button is good practice to ensure a secure connection between your store and your customers. Please note this does require a valid SSL certificate.<\/p><p>And finally if you need to amend the endpoints associated with the checkout and account pages, you can do so here.<\/p><p>Once finished, save your changes.<br \/>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.<\/p><p>In our next lesson we\u2019re going to learn how to create products and categories.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1684\" class=\"e-tab-content elementor-clearfix\" data-tab=\"4\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1684\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=0FI5qK2vZ-o&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=4\" data-video-type=\"youtube\" data-video-title=\"Adding Products &amp; Categories\" data-video-duration=\"13:37\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In this lesson we will learn how to create simple, downloadable and variable products in WooCommerce. We\u2019ll then explore how and why to create categories, tags and attributes.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e Adding simple, downloadable and variable products<br \/>\u2714\ufe0e Creating categories, tags &amp; attributes<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Now that we\u2019ve learnt how to install WooCommerce and have configured parts of our store, it\u2019s time to add in some products.<\/p><p>Let\u2019s head back into the WordPress dashboard to see how this works.<br \/>Ok, so now that you\u2019ve installed &amp; configured WooCommerce, it\u2019s time to begin adding in your products. Go to Products &gt; Add New to add in your first product.<\/p><p>Start with something simple that doesn\u2019t have any extra options. For example, for an apparel shop, you might start with a hat that only comes in one color and size. \u2026 For the bakery, I\u2019ll start with a simple, yet classic French Baguette.<\/p><p>Note that when you add your first product, tooltips may pop up. You can go ahead and dismiss them. Don\u2019t worry, I\u2019ll walk you through the whole process.<\/p><p>First, add in the Product Name.<br \/>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.<\/p><p>Next scroll down past the product data to the product short description. We\u2019ll 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.<br \/>Scroll back up to the Product categories. Product Categories help customers navigate to relevant products, while they shop your site.<br \/>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.<\/p><p>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.<\/p><p>Below the Categories section, is the Tags section. Product tags are keywords that show up in your website\u2019s search and are generally more specific than categories. The same tag may fall within different categories.<\/p><p>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\u2019ll add the wholemeal and gluten-free tags, so that searchers can find all the products with either of these tags at one time.<\/p><p>Let\u2019s 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.<br \/>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.<\/p><p>Now it\u2019s time to add the Product data.<br \/>Our first product is a basic product, with no extra options, so under Product Data, leave it on the default of Simple Product.<\/p><p>Later in the course, we\u2019ll discuss downloadable products as well as more complex products.<\/p><p>If you need to use a different currency, you can set that up in the store settings. We\u2019ll cover that later in the course, as well.<\/p><p>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.<\/p><p>Next we are presented with the tax options. Please note this section will only appear if you have enabled and configured your tax options.<\/p><p>We can first of all set the tax status and then the tax class.<\/p><p>Click the Inventory Tab. You can enter an SKU or \u201csku\u201d 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.<br \/>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.<br \/>If you want to limit a product to one per order, check \u201csold individually.\u201d<\/p><p>Let\u2019s skip on down to the Advanced Tab. We\u2019ll 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.<\/p><p>You can add a value for menu order, if you\u2019d like this product to show up before the default order. Look this up<br \/>Last is the option to Enable reviews.<\/p><p>I highly recommend leaving it enabled to allow your products to gain social proof.<\/p><p>Now let\u2019s 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 &#8211; get specifics for this.<\/p><p>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.<br \/>Now let\u2019s 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.<\/p><p>For the baguette, I\u2019ll use a few different angles, as well as images showing a closeup and the texture. All my images are the same dimensions, for consistency&#8230;<\/p><p>Hold down Command or Control to select more than one image. Once you\u2019ve selected the images, go through them one by one, and update the Alt text and Title. Then click Add to Gallery<br \/>Once again, click Upload Files. The selected gallery images preview here. If you\u2019d like to change the display order, you can drag them like this. To remove any image, just click the X.<br \/>Ok great, we\u2019ve now added in all the product data, so click Publish at the top of the page, and command or control click View Product.<\/p><p>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.<\/p><p>We\u2019ll 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.<br \/>Next I\u2019ll walk you through creating a digital product, as well as a variable product.<\/p><p>Great, now that we\u2019ve added the rest of the products, let\u2019s go ahead and create a downloadable product.<\/p><p>Open any product you\u2019d like to make downloadable. I\u2019ll 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.<\/p><p>Click Add File, Upload your file, and click Insert File URL. Go ahead and name the file. If you\u2019d 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.<\/p><p>Click Update, and that\u2019s all there is to creating a downloadable product.<\/p><p>Next we\u2019ll take a look at Variable Products.<\/p><p>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\u2019ll choose these Gourmet Donuts, since they come in several flavors and dietary options.<\/p><p>Scroll down to Product data, and select Variable Product. You\u2019ll notice that the pricing information disappears, and the Variations tab now appears.<\/p><p>But before we can set up Variations, we\u2019ll 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\u2019ll use \u201cFlavor,\u201d&#8230;then add each variation value, separated by the pipe symbol. In this case, I\u2019ll enter three delicious flavor options. Select Used for variations and click Save Attributes.<\/p><p>Now go back to Variations. Click Go next to Add Variation. Next to Any Flavor I\u2019ll 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.<\/p><p>Let\u2019s preview our changes. And you can see that now there\u2019s an option to choose the donut flavor, and the image and price remain constant for each option.<\/p><p>If you\u2019d like for different content to appear, depending on the variation, such as specific images or pricing, you\u2019ll need to set up each variation up separately. To do this, go back to the product&#8230;Variations<br \/>I\u2019ll click Any Flavour, and change it to the first variation from the dropdown. Now add the image and description for this variation.<\/p><p>If you\u2019d like to update the content for each variation, you can select Create variations from all attributes, and you\u2019ll 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.<\/p><p>Now I\u2019ll add an image&#8230;.and price. I&#8217;ll set a different price for this flavor variation. Add in any other relevant information below. Now repeat for any remaining variations.<br \/>Let\u2019s 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.<\/p><p>In the event that no image was added to a variation, it will default to the main product image.<\/p><p>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\u2019s set them now, and while we\u2019re at it, see how to create a Global Attribute, for options you will need again with other products. In this case, I\u2019ll add an option for Dietary Options, because I want to offer this option on some of the other bakery items.<\/p><p>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&#8230; add in a variation&#8230;and click to Add new. Do these for each variation.<br \/>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\u2019t want to use all the variations for this product, just X them out. Click Save Attributes.<br \/>Now go over to Variations, and you\u2019ll see the new attribute has been added to each variation.<\/p><p>Now Update and Preview.<\/p><p>A second option has been added to the Gourmet Doughnuts. Customers can now choose both the Flavor and Dietary Option.<\/p><p>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.<\/p><p>Next up, we\u2019ll review the Theme Builder as it relates to WooCommerce, and design our shop pages. Keep watching to learn how!<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1685\" class=\"e-tab-content elementor-clearfix\" data-tab=\"5\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1685\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=MT5vQGZEGVA&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=5\" data-video-type=\"youtube\" data-video-title=\"WooCommerce Templates Part 1\" data-video-duration=\"14:20\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In part 1 of this lesson we will learn how to create the single product template for our WooCommerce store using the Elementor Theme Builder.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e How to create the single product template<br \/>\u2714\ufe0e How to set the display conditions<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Ok, so now that we\u2019ve added in all our products, it\u2019s time to get down to business and start styling our shop templates!<\/p><p>We\u2019ll use Elementor\u2019s Theme Builder to create, design, and save our shop templates.<\/p><p>From the Dashboard, navigate to Templates &gt; Theme Builder &gt; Try it Now.<\/p><p>The Theme Builder provides an easy to use interface for managing the templates associated with your website.<\/p><p>As you can see we\u2019ve already created several templates for our website including the header, footer, 404 page &amp; blog templates.<\/p><p>If you\u2019re unsure how to set up these templates, check out our dedicated tutorials on the channel.<\/p><p>At first glance, you\u2019ll 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\u2019ll see more information, as well as management and editing options for that template.<\/p><p>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.<\/p><p>Please note that the Single Product and Products Archive template options will only show once you\u2019ve installed the WooCommerce plugin.<\/p><p>We\u2019ll begin with the Single Product template.<\/p><p>Before we begin creating it, let\u2019s take a quick look at the finished Product Page, to get a better idea of what we\u2019ll be building.<\/p><p>The Product page consists of several elements. On the left are product image thumbnails<\/p><p>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.<\/p><p>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.<\/p><p>If we scroll down a little further we will see the full description, as well as any reviews which have been left.<\/p><p>And finally, we have a section displaying related products.<\/p><p>Let\u2019s head back to the Theme Builder, and add a new single product template.<\/p><p>This brings us directly into the Elementor Library, where you\u2019ll find the option to use an Elementor block or page template, as well as the ability to insert your own saved template.<\/p><p>We\u2019re going to create our Single Product page from scratch, so go ahead and dismiss the Library.<\/p><p>The first thing you\u2019ll 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.<\/p><p>Click the Plus icon to add a section, and select the first two-column layout.<\/p><p>Let&#8217;s start by adding in all the widgets we\u2019ll need for this section.<\/p><p>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.<\/p><p>In the widget panel, select and drag the Product Images widget into the first column.<\/p><p>For the second column drag in the breadcrumbs widget\u2026<\/p><p>the Product Title widget\u2026<\/p><p>then the Product Rating widget\u2026notice how this widget is currently grayed out. This is because the current product displayed in the editor doesn\u2019t have any ratings yet. We\u2019ll fix this soon so we\u2019re able to preview this widget&#8230;<\/p><p>next, the Short Description Widget\u2026<\/p><p>After that, the Products price widget\u2026<\/p><p>and last but not least the Add to cart widget.<\/p><p>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.<\/p><p>Begin typing in the name of the product you\u2019d like to preview\u2026<\/p><p>Select it\u2026<\/p><p>Then select \u2018Apply &amp; Preview\u2019&#8230;<\/p><p>You see now the \u2018product ratings\u2019 widget is showing correctly as this product has a couple of reviews&#8230;<\/p><p>OK, great, the first section is already starting to take shape. Now let\u2019s go through each widget and update them with the right content and styling.<\/p><p>Select the Product Images widget.<\/p><p>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\u2019s quickly add one to our \u2018French Baguette\u2019 so we can see this in the editor.<\/p><p>In a new tab open the \u2018All Products\u2019 screen and scroll down to \u2018French Baguette\u2019. 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.<\/p><p>Select \u2018Quick Edit\u2019 and you\u2019ll be presented with a whole host of options for your product including the price fields.<\/p><p>Let\u2019s add \u00a33.00 in the \u2018Sales Field\u2019 and then update our product.<\/p><p>Now back in the editor, save your template as a draft and refresh the page.<\/p><p>As you can see the style badge is now showing.<\/p><p>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&#8230;color&#8230;and border radius.<\/p><p>Add space between the top and bottom images by dragging the space slider&#8230;or typing in a value.<\/p><p>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.<\/p><p>Go ahead and add some spacing to the thumbnails.<\/p><p>Great, let\u2019s move on to the breadcrumbs next.<\/p><p>Select the text color&#8230;<\/p><p>Then select the link color\u2026<\/p><p>Next, set the Typography\u2026<\/p><p>The last option is for the alignment.<\/p><p>We\u2019ll leave it on the default left alignment.<\/p><p>Now select the Product title.<\/p><p>This widget is automatically set to dynamically pull in the name of the product.<\/p><p>Let\u2019s leave the other default content settings, and move over to the Style tab.<\/p><p>Set your text color\u2026<\/p><p>And typography&#8230;<\/p><p>You can also apply a text shadow and blend mode if required.<\/p><p>Next we\u2019ll style the \u2018Product Rating Widget\u2019.<\/p><p>We can apply styles to the star\u2026<\/p><p>Empty star\u2026<\/p><p>Link\u2026<\/p><p>As well as amend the typography\u2026<\/p><p>Change the star size\u2026<\/p><p>The space between the stars and text\u2026<\/p><p>And the alignment of the entire widget.<\/p><p>Select the \u2018Short Description\u2019 widget next.<\/p><p>Set your alignment\u2026<\/p><p>Text color\u2026<\/p><p>And typography.<\/p><p>Now let&#8217;s set our standard and sale price styles.<\/p><p>We\u2019ll set our alignment\u2026<\/p><p>Color\u2026<\/p><p>Typography\u2026<\/p><p>And now the sale styles\u2026<\/p><p>\u2018Stacked\u2019 allows you to control if the sale price is displayed below or to the side of the main price\u2026<\/p><p>And finally we\u2019ll add some space between the two values.<\/p><p>The final widget in this immediate section is the add to cart button and quantity field.<\/p><p>First let\u2019s style the button<\/p><p>Let\u2019s set our alignment to the left\u2026<\/p><p>Typography using our global styles\u2026<\/p><p>Border type as solid, with 2px on all sides\u2026<\/p><p>We\u2019ll see the border radius to 0px for nice neat corners\u2026<\/p><p>And then our padding\u2026<\/p><p>Now let\u2019s set our colors for both the normal &amp; hover states.<\/p><p>That\u2019s the styling for our button finished, let\u2019s switch to the quantity tab next\u2026<\/p><p>We can first add spacing between the quantity field and button\u2026<\/p><p>Then the typography\u2026<\/p><p>Set the border to match our button\u2026<\/p><p>And then our normal &amp; focus colors&#8230;<\/p><p>The final set of styles is for the variations. This particular product doesn\u2019t have any variations, so let\u2019s switch the product preview so we can see our changes.<\/p><p>(&#8230;search doughnuts\u2026.)<\/p><p>We can amend the width of this section\u2026<\/p><p>The spacing between the variations and button\u2026<\/p><p>Set your colors &amp; typography for the label\u2026<\/p><p>And then the same for the select field&#8230;<\/p><p>Before we move onto the next widget, let\u2019s apply some styles to this section to fit in with the rest of our website.<\/p><p>Select the section\u2026<\/p><p>And then set a background image in the style tab\u2026<\/p><p>Add some margin to the top &amp; bottom\u2026<\/p><p>And some padding\u2026<\/p><p>Now select the column which holds the product data and add some padding&#8230;<\/p><p>OK, that looks great.<\/p><p>Let\u2019s now add the product data tabs\u2026<\/p><p>Add a new section\u2026<\/p><p>Then drop in the product data tabs widget\u2026<\/p><p>We can set the colors for the tabs first of all\u2026<\/p><p>We\u2019re 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.<\/p><p>Next we\u2019ll set the typography\u2026<\/p><p>And if required you can amend the border radius\u2026<\/p><p>Now switch to the \u2018Panel\u2019 tab\u2026<\/p><p>Here we are able to amend the styles for the contents of our tabs\u2026<\/p><p>Set colors &amp; typography for the content itself\u2026<\/p><p>And then the heading\u2026<\/p><p>Finally you can set a border width, radius and box shadow if required.<\/p><p>The last widget we\u2019ll add to our product template is the \u2018Related Products\u2019 widget.<\/p><p>This widget is great to use as it will display additional products to your website users which are relevant to what they\u2019re currently looking at.<\/p><p>Create another section\u2026and add some padding&#8230;<\/p><p>And drop in the \u2018Related Products\u2019 widget\u2026<\/p><p>We can first of all amend the content by setting the\u2026<\/p><p>Products per page\u2026<\/p><p>Columns\u2026<\/p><p>How they\u2019re ordered\u2026<\/p><p>And whether we would like them to be ascending or descending\u2026<\/p><p>Now switch to the style tab where you can see we have a whole host of styling options available.<\/p><p>We\u2019ll set the column &amp; row gaps first\u2026<\/p><p>And then the alignment\u2026<\/p><p>We can add a border to our images if required\u2026<\/p><p>And amend the spacing between the image and title\u2026<\/p><p>The next few sections will allow us to control the colors, typography &amp; spacing for the\u2026<\/p><p>Title\u2026<\/p><p>Rating&#8230;.<\/p><p>Price\u2026<\/p><p>&amp; Regular price\u2026<\/p><p>We can then style the button. Let\u2019s amend this so it matches the rest of our buttons\u2026<\/p><p>The final option here is style the \u2018View Cart\u2019 link. To preview this, select \u2018Add to Cart\u2019 and then make your amendments.<\/p><p>Switch to the heading tab now\u2026<\/p><p>You can choose whether to show or hide this element\u2026<\/p><p>Set the color\u2026<\/p><p>Font\u2026<\/p><p>Alignment\u2026<\/p><p>And spacing.<\/p><p>Up next is the styling options for the box which holds all of the previous elements.<\/p><p>If I add a border you can see exactly what I mean\u2026<\/p><p>Here we can add a border radius..<\/p><p>Amend the padding\u2026<\/p><p>And set the styles for both the normal &amp; hover states\u2026<\/p><p>The final option here is to amend the \u2018Sale Flash\u2019.<\/p><p>You can of course toggle this option on or off.<\/p><p>Set the text &amp; background colors\u2026<\/p><p>As well as the typography\u2026<\/p><p>We can then change the border radius&#8230;width &amp; height.<\/p><p>Finally we can choose to display the sales badge on the right or left of the box and also the distance.<\/p><p>Before we save and preview our new template, let\u2019s 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.<\/p><p>We\u2019ll call ours \u2018Single Product Template\u2019.<\/p><p>Before we publish our template, we have one last step.<\/p><p>To the right of the \u2018Publish\u2019 button you\u2019ll see a small arrow. Selecting this will allow you to navigate to the \u2018Display Settings\u2019.<\/p><p>Here we can set where we would like our template to display.<\/p><p>Select \u2018Add Condition\u2019&#8230;<\/p><p>And you can see Elementor does a great job of automatically selecting \u2018Products\u2019 as our chosen location.<\/p><p>By selecting the dropdown arrow you can see we are able to set specific instructions on where we would like to display this template.<\/p><p>For example, we may only want this template to display for products in our \u2018Recipe\u2019 category.<\/p><p>We can also add multiple rules here if required, and can also set these rules to exclude specific products and categories.<\/p><p>In our store, we simply need one template for all products so that\u2019s what we\u2019ll select here.<\/p><p>Now go ahead and publish your template.<\/p><p>OK, fantastic! As you can see our single product template is now complete and looks great.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1686\" class=\"e-tab-content elementor-clearfix\" data-tab=\"6\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1686\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=BJWOFkdugjM&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=6\" data-video-type=\"youtube\" data-video-title=\"WooCommerce Templates Part 2\" data-video-duration=\"8:39\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In part 2 of this lesson we will learn how to create the shop &amp; product category templates as well as our search results template for our WooCommerce store using the Elementor Theme Builder.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e How to create a shop template<br \/>\u2714\ufe0e Creating a product category template<br \/>\u2714\ufe0e Building the search results template<br \/>\u2714\ufe0e The various display conditions associated with these templates<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In part 1 of this lesson we learnt about the templates which make up a WooCommerce store. Now we\u2019ll explore how to create our archive and search templates.<\/p><p>Our store will use two Product Archive templates.<\/p><p>The first will be displayed when somebody visits our \u2018Shop\u2019 page which will show the various categories which we set up earlier on.<\/p><p>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.<\/p><p>Let\u2019s head back to the theme builder now and add a new \u2018Product Archive Template\u2019.<\/p><p>The first thing we\u2019ll do is add in this header section which we\u2019ve previously saved as a template. It contains our page title, a short description and will provide consistency across all of our template files.<\/p><p>Now, add in a new section and give it some padding.<\/p><p>In the widgets panel, find and drop in the \u2018Product Categories\u2019 widget. This widget will automatically display any categories which we\u2019ve set up for our store.<\/p><p>Several default configurations have already been applied. Let\u2019s make some changes so that this shows exactly how we\u2019d like it to.<\/p><p>Set the columns to \u20183\u2019.<\/p><p>And the category count to \u20183\u2019.<\/p><p>Now switch to the \u2018Query\u2019 tab.<\/p><p>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.<\/p><p>We\u2019ll choose \u2018manual\u2019 and then select the categories we would like to display on our shop page.<\/p><p>Note how each category has its own image. This is because we set them earlier on when creating our categories.<\/p><p>If any categories are empty, we can choose to hide them here.<\/p><p>And finally we can amend the order by name, slug, description or count and also to be descending or ascending.<\/p><p>Now switch over to the style tab.<\/p><p>You can first of all amend the column and row gaps\u2026<\/p><p>And then the alignment\u2026<\/p><p>Add a border type\u2026<\/p><p>Width\u2026<\/p><p>Color\u2026<\/p><p>Radius\u2026<\/p><p>And spacing, if required.<\/p><p>And then style the color and typography for both the title and count.<\/p><p>Before we publish this template, let\u2019s rename it just like we did with our single product template.<\/p><p>Let\u2019s now publish our template and set the display conditions.<\/p><p>Select \u2018publish\u2019&#8230;<\/p><p>Then \u2018add condition\u2019&#8230;<\/p><p>Now in the dropdown select \u2018shop page\u2019 to ensure this template is shown every time somebody visits the main shop page on your website.<\/p><p>Finally select \u2018save &amp; close\u2019 and now let\u2019s visit the website to ensure this is working correctly.<\/p><p>Now let\u2019s create the template which is shown when somebody selects one of the categories on our shop page.<\/p><p>Again, back in the theme builder add another \u2018product archive\u2019 template.<\/p><p>Just like before we\u2019re 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 &amp; description.<\/p><p>Select the title and you can see we\u2019ve selected \u2018Products Terms\u2019 in the dynamic field and \u2018Product Category\u2019.<\/p><p>Similar to the title, we\u2019ve set this to dynamically pull in the archive description.<\/p><p>All of these values were set earlier on when we created our categories.<\/p><p>Now add in a new section\u2026<\/p><p>Apply some padding\u2026<\/p><p>And then drop in the \u2018Products\u2019 widget.<\/p><p>First set your columns\u2026<\/p><p>And rows\u2026<\/p><p>Enabling pagination opens up some additional options\u2026<\/p><p>Allow order will add a drop down field\u2026<\/p><p>And \u2018show result count\u2019 adds the number of results to the widget.<\/p><p>Switching to the query tab now, we are able to specify what content is shown in this widget.<\/p><p>Because we\u2019re going to use this template to display products of a certain category, we are going to need to select \u2018Current Query\u2019 to obtain the desired results.<\/p><p>This widget can be used elsewhere however and you\u2019ll notice that we can also set it to display\u2026<\/p><p>Latest products, products on sale, featured products &amp; also a manual selection.<\/p><p>Switch to the style tab now and let\u2019s explore what options we have.<\/p><p>First we can set our styles for the products themselves\u2026<\/p><p>Set your gap distances\u2026<\/p><p>And alignment\u2026<\/p><p>Now add a border if required\u2026<\/p><p>And spacing&#8230;<\/p><p>Now scroll down and set your styles &amp; spacing for the title\u2026<\/p><p>Price\u2026<\/p><p>And Regular Price\u2026<\/p><p>Now let\u2019s apply our \u2018Normal\u2019 &amp; \u2018Hover\u2019 styles so that our \u2018Add to Cart\u2019 buttons match the rest of our website\u2026<\/p><p>And finally the \u2018View Cart\u2019 styles\u2026<\/p><p>Now open the box tab\u2026<\/p><p>The default settings work great for us, but if you need to you can add a border\u2026<\/p><p>Border radius\u2026<\/p><p>Padding\u2026<\/p><p>As well as shadow, background colors and border colors for both normal &amp; hover states.<\/p><p>Finally we can set the styles for our sales flash\u2026<\/p><p>Before we rename and publish this template, let\u2019s add in the testimonial block template we previously created to fill the page out.<\/p><p>Now rename the template\u2026<\/p><p>Select publish\u2026<\/p><p>Add condition\u2026<\/p><p>Select \u2018Product Categories\u2019&#8230;and leave it on \u2018All\u2019 to ensure this layout appears on all product categories.<\/p><p>OK, great. Let\u2019s now visit the website and test all of the templates we\u2019ve made so far.<\/p><p>We\u2019ll start on the homepage and select \u2018Shop\u2019&#8230;<\/p><p>Now select one of the categories\u2026<\/p><p>Finally choose one of the products\u2026<\/p><p>As you can see, all of the templates are working great on the live website. Let\u2019s move onto our final template which is for the search results.<\/p><p>First add a new \u2018search\u2019 template in the theme builder\u2026<\/p><p>Again, we have a pre-made hero section to add here, so let\u2019s drop this in\u2026<\/p><p>The title is set to use dynamic content and will automatically display the search term entered by the user.<\/p><p>To add your own search term, select the gear icon\u2026<\/p><p>Preview settings\u2026<\/p><p>Enter your search term and click \u2018Apply &amp; Preview\u2019.<\/p><p>Now add a new section\u2026<\/p><p>And add some padding\u2026<\/p><p>Drop in the \u2018Archive Posts\u2019 widget and instantly we can see the search results appear.<\/p><p>Now let\u2019s make some adjustments so it appears exactly how we\u2019d like it to\u2026<\/p><p>You can also amend the pagination configuration &amp; \u2018Nothing Found\u2019 message if required.<\/p><p>Now let\u2019s style the search results\u2026<\/p><p>Set your column&#8230;and row gap distance\u2026<\/p><p>And then your alignment.<\/p><p>Add a border radius if required\u2026<\/p><p>And spacing\u2026<\/p><p>You can also apply a CSS filter to both the normal &amp; hover states.<\/p><p>Under content we can set our colors, typography &amp; spacing for the title &amp; excerpt.<\/p><p>And finally apply your styles for the pagination\u2026<\/p><p>And \u2018Nothing Found Message\u2019.<\/p><p>This concludes the content and styling options, let\u2019s now rename our template\u2026<\/p><p>And publish\u2026<\/p><p>Add condition\u2026<\/p><p>Select \u2018Search Results\u2019 from the dropdown\u2026<\/p><p>And save.<\/p><p>And there we have it.<\/p><p>When somebody performs a search on our website, they will be directed to the search template which looks great.<\/p><p>Using Elementor\u2019s theme builder makes it easy to both create and manage the template files associated with your website.<\/p><p>Make the most of this amazing feature and wow your website visitors with entirely branded content to keep them engaged on your website.<\/p><p>In our next lesson we\u2019ll take a look at the page associated with running a WooCommerce store.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1687\" class=\"e-tab-content elementor-clearfix\" data-tab=\"7\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1687\" tabindex=\"0\" data-video-url=\"https:\/\/youtu.be\/X9q4yiaV2F8\" data-video-type=\"youtube\" data-video-title=\"WooCommerce Pages Explained\" data-video-duration=\"16:41\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In this lesson we will learn about the pages associated with running a WooCommerce store.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e The cart page<br \/>\u2714\ufe0e The checkout page<br \/>\u2714\ufe0e The my account page<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>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.<\/p><p>If we navigate to our website pages, you will see that WooCommerce has created four pages called \u2018Cart, Checkout, My Account &amp; Shop\u2019.<\/p><p>Here at Elementor we\u2019ve been working hard on three new widgets which will allow for full customisation of the Cart, Checkout &amp; My Account pages. Once released we\u2019ll update this video with full instructions on how you can implement them into your store.<\/p><p>We\u2019ve already explored the Shop section in our previous lesson, so let\u2019s focus on the cart, checkout and my account pages.<\/p><p>The first page we\u2019ll investigate is the cart page.<\/p><p>This is the page which customers can view once they\u2019ve 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.<\/p><p>If you select the title of the page, we are taken to the default WordPress editing screen.<\/p><p>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.<\/p><p>Lets now select \u2018Edit with Elementor\u2019 and add in some other elements to the page.<\/p><p>The shortcode is carried across into the Elementor editor and you should now see the cart within the editor.<\/p><p>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.<\/p><p>As you can see the default Elementor layout is showing the page name. Let\u2019s remove this by selecting the gear icon in the bottom left hand corner and toggling the hide title option.<\/p><p>Next, we\u2019ll amend the padding around the cart area so that the spacing aligns with the rest of our website.<\/p><p>The final step is to add in a hero section which contains our page title. We\u2019ve saved our hero section as a template, so we\u2019ll simply drop this into position and then amend the title.<\/p><p>Let\u2019s now preview our cart page to see what it looks like.<\/p><p>OK, great. Let\u2019s save this page and move onto the \u2018Checkout\u2019 page.<\/p><p>The checkout page is the final step in the process of a customer buying a product from you.<\/p><p>They will first of all see the fields they are required to fill in, like their name, contact information and billing address.<\/p><p>Customers can also amend the shipping options here if required and select their chosen payment method.<\/p><p>Once the transaction has successfully been completed, this same page will also display the order confirmation.<\/p><p>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.<\/p><p>We\u2019ll first remove the page title\u2026<\/p><p>Amend the padding around the shortcode\u2026<\/p><p>And then add in\u2026<\/p><p>And amend the text in the header section\u2026<\/p><p>Let\u2019s now check this on the front end of our website.<\/p><p>The last WooCommerce page we\u2019re going to take a look at is the my account page.<\/p><p>Let\u2019s head to All Pages and now let\u2019s select \u2018My Account\u2019.<\/p><p>Just like before we can see that WooCommerce has automatically added a shortcode. This shortcode will display the my account area.<\/p><p>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 &amp; password.<\/p><p>Let\u2019s again select \u2018Edit with Elementor\u2019 to customise our account page to fit in with the style of our website.<\/p><p>Work your way through the same steps which we followed when adjusting the cart and checkout pages&#8230;<\/p><p>And then check everything on the front end of your website.<\/p><p>OK, that looks great!<\/p><p>WooCommerce does a great job of automatically creating these essential pages for your store.<\/p><p>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.<\/p><p>In our next lesson we learn how to configure the shipping options for your store.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1688\" class=\"e-tab-content elementor-clearfix\" data-tab=\"8\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1688\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=JXpFcqjIads&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=8\" data-video-type=\"youtube\" data-video-title=\"Configuring the Shipping Options\" data-video-duration=\"8:44\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In this lesson we will learn how to use the default WooCommerce shipping options. We\u2019ll first learn what shipping zones, methods, options &amp; classes are, followed by creating and applying these to our store.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e How to set up shipping zones, methods, options &amp; classes<br \/>\u2714\ufe0e Setting up flat rate &amp; free shipping<br \/>\u2714\ufe0e Assigning shipping classes to a product<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Understanding how to configure the WooCommerce shipping options can be overwhelming, but I\u2019ll walk you through this step by step so you know how to set up your shipping zones, methods, options &amp; classes.<\/p><p>To correctly set up our shipping options we must first understand the core concepts of the available options within WooCommerce.<\/p><p>Firstly, we have shipping zones. Shipping zones are geographic locations where a certain set of shipping methods and their rates apply.<\/p><p>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\u2019ll cover both of these shortly.<\/p><p>Finally, we have shipping classes. Shipping classes allow us to create product specific charges, for example we\u2019re going to create an additional shipping charge to be applied if a product is classed as \u2018Heavy Goods\u2019. This will add the appropriate fee to the customers order ensuring they are paying for the correct shipping costs.<\/p><p>We\u2019ll be sure to go over each of these core aspects, but let\u2019s start with the shipping zones.<\/p><p>Our store, for example, only allows products to be shipped within the UK, so let\u2019s apply those settings to ensure nobody places an order expecting delivery overseas.<\/p><p>In the general tab first of all ensure we have the correct locations selected for our store.<\/p><p>Scroll down to the General Options and set the Shipping Location to \u2018Ship to specific countries only\u2019. You will now see a new field where you can select the country you would like to ship to. In our instance, we\u2019re going to set this to the United Kingdom.<\/p><p>Notice that there were options available&#8230;<\/p><p>You could set this to \u2018Ship to all countries you sell to\u2019&#8230;<\/p><p>Ship to all countries\u2026<\/p><p>And you can even disable shipping as well as shipping calculations&#8230;<\/p><p>Spend some time here ensuring you have explored all of the available options to make sure the configuration is correct for your store requirements.<\/p><p>Once you have finished, let\u2019s save and head to the \u2018Shipping\u2019 tab.<\/p><p>The first thing we\u2019re going to do is set a standard shipping charge for all orders. Before we do this however, let\u2019s first set the Zone name and region by selecting the \u2018Add Shipping Zone\u2019 button.<\/p><p>In the zone name we\u2019ll enter \u2018UK\u2019 and under zone region we will select \u2018United Kingdom\u2019.<\/p><p>You\u2019ll 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.<\/p><p>Once these options have been set we are now ready to set our first shipping method. Let\u2019s save our changes so far and then select the \u2018Add shipping method\u2019 button and now you\u2019ll be presented with a pop-up window which asks you which shipping method you would like to create.<\/p><p>WooCommerce provides three default shipping methods&#8230;<\/p><p>Flat rate lets you charge a fixed rate for shipping.<\/p><p>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.<\/p><p>Local pickup gives customers the option to bypass the shipping choices and collect their order in person.<\/p><p>We\u2019re going to choose \u2018Flat Rate\u2019 followed by \u2018Add Shipping Method\u2019.<\/p><p>Select the edit link now and a new pop-up will appear.<\/p><p>Here we can specify a title, whether we would like tax to be applied and a price.<\/p><p>We\u2019ll call our method \u2018Standard UK Shipping\u2019&#8230;<\/p><p>Set the tax status to \u2018taxable\u2019&#8230;<\/p><p>And finally we\u2019ll set the cost to \u00a31.99.<\/p><p>Once complete, save your changes to return to the shipping zones screen.<\/p><p>Now it\u2019s time to create our second shipping method. This time we\u2019re going to create a set of rules which allows customers to receive free shipping if they spend a certain amount within our store.<\/p><p>Select \u2018Add shipping method\u2019.<\/p><p>This time we\u2019ll choose \u2018Free shipping\u2019 from the dropdown and then select \u2018Add shipping method\u2019. Select the edit icon located underneath the \u2018Free shipping\u2019 title and we\u2019ll leave the title as \u2018Free shipping\u2019, then under \u2018Free shipping requires\u2026\u2019 you see there are several available options.<\/p><p>A valid free shipping coupon allows your customers to use a coupon during checkout to receive free shipping.<\/p><p>We\u2019ll cover how to create coupons for your store in a later lesson.<\/p><p>A minimum order amount allows you to state a minimum spend before free shipping is enabled.<\/p><p>And then we have an option to set an \u2018Or\u2019 or \u2018And\u2019 rule, allowing you to combine these options.<\/p><p>We\u2019re going to choose \u2018A minimum order amount\u2019 and then set the value to \u00a320.00. This means that if the customer&#8217;s cart totals more than \u00a320.00, they will see the free shipping option when they checkout.<\/p><p>If you have coupon codes enabled on your store it\u2019s worth noting the final option here which allows you to apply the minimum order rule before a coupon discount is applied.<\/p><p>Once all of these sections have been configured, hit save changes to return to the shipping zones screen.<\/p><p>Before we move onto shipping classes we\u2019ll first take a quick look at the shipping options.<\/p><p>This section provides you with some additional options to further configure your store. The first option we see is \u2018Calculations\u2019. 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.<\/p><p>For our store, we\u2019re going to leave both of these options as default.<\/p><p>Shipping destination controls which address is used. As standard it is set to \u2018Default to customers billing address\u2019 and we\u2019ll leave it as this. You can change this if needed to \u2018default to the customers shipping address\u2019 and you can also force shipping to the customers billing address, meaning that the billing and shipping address must be the same.<\/p><p>When finished, remember to save your changes.<\/p><p>To finish the shipping configuration for our store let\u2019s now create a shipping class.<\/p><p>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.<\/p><p>Navigate your way to the shipping class tab and select \u2018Add shipping class\u2019.<\/p><p>First of all give your shipping class a name, in our example we\u2019re going to name it \u2018Heavy Goods\u2019.<\/p><p>We can leave the slug blank, as this will automatically be created once our shipping class is saved. Finally we\u2019ll add the description&#8230; \u201cAdditional shipping charge for heavy items\u201d, and select the \u2018Save shipping classes\u2019 button.<\/p><p>Now that the new shipping class has been created we will assign it to a shipping method, and then a product.<\/p><p>Let\u2019s head back to the shipping zones area and select \u2018UK\u2019, followed by \u2018Standard UK Shipping\u2019.<\/p><p>We are now presented with some additional options because we\u2019ve added a shipping class.<\/p><p>The field allows us to enter a price for our new shipping class, here we\u2019ll enter \u00a310.00. We\u2019ll 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\u2019ll leave this as per class.<\/p><p>When finished, save your changes.<\/p><p>Now that we have configured our shipping class we are ready to apply it to a product.<\/p><p>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.<\/p><p>Select the product and scroll down to the \u2018Product Data\u2019 section.<\/p><p>Here you will see the \u2018Shipping\u2019 tab, select this tab and under \u2018Shipping Class\u2019 choose your newly created shipping class.<\/p><p>Remember to update your product and now let\u2019s test it out.<\/p><p>Everytime a customer adds this item to their cart the additional \u2018Heavy Goods\u2019 fee of \u00a310.00 will be added to their order.<\/p><p>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.<\/p><p>Check out the WooCommerce link in the description for more information.<\/p><p>In our next lesson we will learn how to integrate Stripe &amp; PayPal into our store so that customers can make a payment.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1689\" class=\"e-tab-content elementor-clearfix\" data-tab=\"9\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1689\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=akmBfIEFxl4&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=9\" data-video-type=\"youtube\" data-video-title=\"Setting Up PayPal &amp; Stripe\" data-video-duration=\"10:53\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In this lesson we will first learn how to enable and configure the inbuilt PayPal Standard option within WooCommerce. We\u2019ll then install an additional plugin to enable Stripe payments on our website.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e Configure and setup PayPal Standard<br \/>\u2714\ufe0e Installing &amp; configure and setup Stripe<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>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.<\/p><p>If you perform a quick search in the plugin repository you\u2019ll see there are multiple 3rd party options to choose from.<\/p><p>In our course we\u2019re going to explore the inbuilt PayPal Standard option first of all and then we\u2019ll move onto integrating the free WooCommerce Stripe plugin.<\/p><p>Before we begin with configuring our PayPal settings, please first ensure you have an active PayPal Business account.<\/p><p>Navigate your way to \u2018WooCommerce &gt; Settings &gt; Payments\u2019 and select the \u2018Set up\u2019 button to begin. As you can see we\u2019re presented with several options to configure and link our PayPal account.<\/p><p>You will also see these handy tooltips located next to several options, hovering your mouse over these brings up more information about the option.<\/p><p>Please note that some settings below are optional, like the IPN Email Notifications and Identity Token. We\u2019re 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\u2019d like to cover all bases.<\/p><p>First, we\u2019ll enable PayPal Standard.<\/p><p>Next, we have the option to amend the title and description which is shown on the checkout page. We\u2019ll leave these as they are for our store.<\/p><p>Now we need to enter our PayPal email address. Be sure to double check this once you\u2019ve entered it as an incorrect email address will not allow your website to connect to PayPal successfully.<\/p><p>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\u2019ll need to sign up for a developers account.<\/p><p>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.<\/p><p>We\u2019ll enable the IPN Email Notifications. This will send notifications when an Instant Payment Notification is received from PayPal indicating refunds, chargebacks and cancellations.<\/p><p>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\u2019ll leave this blank as ours doesn\u2019t differ.<\/p><p>Now we\u2019ll enter our PayPal Identity token. This will allow payments to be verified without the need for PayPal IPN. We\u2019ll open our PayPal account in a new tab and navigate our way to Account Settings &gt; Website Payments. Select the Update link next to the Website Preferences option.<\/p><p>Enable Auto return, and then add your store\u2019s thank you page link in the Return URL field. Once this is added, select save.<\/p><p>Now enable the Payment Data Transfer and copy the identity token. Head back to your website dashboard and paste your token into the field.<\/p><p>Next, you can amend the invoice prefix if required.<\/p><p>You can opt to have WooCommerce send shipping details to PayPal to create shipping labels instead of billing. We\u2019ll keep this enabled for our store.<\/p><p>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.<\/p><p>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.<\/p><p>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.<\/p><p>And finally we have the API Credentials.<\/p><p>There are three fields we must populate here, they are:<\/p><p>API Username<br \/>API Password<br \/>API Signature<\/p><p>To find this information, head over to your PayPal account and navigate your way to Account Settings &gt; API Access &gt; Update.<\/p><p>On this page scroll down until you see NVP\/SOAP API integration (Classic) and select Manage API Credentials.<\/p><p>Ensure \u2018Request an API Signature\u2019 is selected and select \u2018Agree and Submit\u2019 to generate your API Credentials.<\/p><p>On each credential, select show then copy and paste into your website dashboard.<\/p><p>Once you have done this, simply save your settings and your store is now ready to accept payments with PayPal.<\/p><p>The next payment processor we\u2019ll 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.<\/p><p>WooCommerce provides a free plugin to allow us to connect our store with Stripe, so let\u2019s install that first.<\/p><p>Head over to Plugins &gt; 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.<\/p><p>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\u2019ll be configuring the first option here.<\/p><p>Enable Stripe and then head to the settings screen.<\/p><p>And just like with PayPal, we\u2019re able to amend the title and description which appears on the checkout page.<\/p><p>The Stripe plugin provides two methods of connecting your Stripe account. We can first of all select the button located in the \u2018Stripe Account Keys\u2019 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.<\/p><p>Let\u2019s select the \u2018Set up or link an existing Stripe account\u2019 button and log into our Stripe account.<\/p><p>From here we are asked to select our business and connect&#8230;<\/p><p>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.<\/p><p>Next we must add our Webhook Endpoint to our Stripe account. Doing so ensures that we are able to receive notifications about transactions.<\/p><p>First copy the Webhook Endpoint and then in a new tab log into your Stripe account.<\/p><p>Navigate to Developers &gt; Webhooks and select \u2018Add Endpoint\u2019. Paste the endpoint into the field and under \u2018Events to send\u2019 select \u2018Receive all Events\u2019, then \u2018Add Endpoint\u2019.<\/p><p>While we\u2019re on the Webhooks page we can also grab our signing secret and enter it into our website dashboard.<\/p><p>Under \u2018signing secret\u2019, select \u2018Click to reveal\u2019 and paste this value into the field titled \u2018Webhook Secret\u2019.<\/p><p>Before we move on you\u2019ll see in the WooCommerce settings page that Stripe provides a test mode option, these keys are not automatically populated so let\u2019s add those now.<\/p><p>Over in our Stripe account we need to check the toggle \u2018View test data\u2019. Now we can copy and paste our test publishable key &amp; test secret keys. We can also add the Webhook Endpoint to the test data, and finally the \u2018Test Webhook Secret\u2019.<\/p><p>With test mode still enabled, let\u2019s 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 \u2018Test Mode is Enabled\u2019 and even provides some helpful instructions on how to perform a test purchase.<\/p><p>Let\u2019s switch back, disable test mode and continue with our Stripe setup.<\/p><p>We can set our credit card form as inline, meaning the date and CSV fields will not be separate. We\u2019ll enable this option.<\/p><p>Next you can control the information which is displayed on your customers invoice. We\u2019ll simply enter \u2018Bakersons\u2019.<\/p><p>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.<\/p><p>Stripe can also enable payments buttons from Apple Pay &amp; 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.<\/p><p>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.<\/p><p>And finally we can enable logging of debug messages, this is helpful if you are experiencing issues with your transactions.<\/p><p>Save you changes and there we have it, your store is now ready to accept payments with Stripe.<\/p><p>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.<\/p><p>WooCommerce provides excellent integrations with many third party payment providers and many of these plugins are expertly supported and well documented. We\u2019ve covered two of the major payment providers but be sure to explore what other options are available for your store.<\/p><p>In our next lesson we\u2019ll take a look at customising our emails, creating coupons and managing our orders.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-16810\" class=\"e-tab-content elementor-clearfix\" data-tab=\"10\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-16810\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=r1vlDXgoQG8&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=10\" data-video-type=\"youtube\" data-video-title=\"Emails, Coupons &amp; Order Management\" data-video-duration=\"09:19\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In this lesson we will first learn about the emails associated with a WooCommerce store. We\u2019ll take a look at the standard emails, and then we\u2019ll learn how to customise them. Next, we\u2019ll investigate the WooCommerce coupon system. We\u2019ll create a coupon code for our store and explore all of the available options. Finally, we will learn exactly what happens when a customer places an order on our store. We\u2019ll take a look at the order screen, and learn how to manage this aspect.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e Customising your store emails<br \/>\u2714\ufe0e Creating coupon codes<br \/>\u2714\ufe0e Managing your orders<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Now that our store has been created, it\u2019s time to dive into the management aspect of running a store.<\/p><p>In this lesson, we will take a look at the emails associated with WooCommerce. We\u2019ll also take a look at the customisation options which are available to ensure that all of our emails match our store&#8217;s branding.<\/p><p>We\u2019ll then learn how to create and use coupon codes.<\/p><p>And finally we\u2019ll take a look at the process of what happens when a customer places an order.<\/p><p>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 &gt; Settings &gt; Emails, you can see the list of emails which have been created.<\/p><p>If you see the purple tick, it means that this email is enabled for your store.<\/p><p>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.<\/p><p>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 \u2018customer\u2019 these emails are sent to the customer who places the order.<\/p><p>If we now select the \u2018Manage\u2019 button we can further customise the details associated with each individual email.<\/p><p>As you can see we first of all have the option to enable and disable this email.<\/p><p>Next, we can amend the recipient. If you need to enter multiple addresses here, do so by separating them with a comma.<\/p><p>Both \u2018Subject\u2019 and \u2018Email Heading\u2019 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.<\/p><p>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.<\/p><p>And finally you are able to amend the email type.<\/p><p>Once finished, be sure to save your changes.<\/p><p>If we now head back to the \u2018Email\u2019 tab and scroll down, you will see that we have several options to customise our email.<\/p><p>We can first of all amend the \u2018From name\u2019 and \u2018From address\u2019.<\/p><p>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\u2019d say so let\u2019s make some adjustments and make the email template fit with the style of our website.<\/p><p>We\u2019ll paste the URL for our logo into the \u2018Header Image\u2019 field and you can find this by visiting the media library, selecting your logo and then the \u2018Copy URL to Clipboard\u2019 button.<\/p><p>We can now amend the \u2018Footer text\u2019 and just like with the email title we can use the available shortcodes if required.<\/p><p>Change the base color to #6a5036, background &amp; body background color to #ffffff, and the body text to #000000.<\/p><p>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.<\/p><p>Next up we\u2019ll explore the inbuilt coupon options in WooCommerce.<\/p><p>Creating coupons is a really useful feature built into WooCommerce which allows you to generate discount coupons for a variety of factors.<\/p><p>Head over to Marketing &gt; Coupons and if this is your first time creating a coupon you will see the \u2018Create your first coupon\u2019 button.<\/p><p>Select this button and let\u2019s go over the configuration options which are available.<\/p><p>We first see the \u2018Coupon code\u2019 field. We can manually type something here or use the helpful \u2018Generate coupon code\u2019 button.<\/p><p>Next, we can enter a description, although this is an optional field.<\/p><p>And then we move onto \u2018Coupon data\u2019, which is where we\u2019ll define the rules for our coupon.<\/p><p>Discount type allows us to choose from a percentage, fixed cart or fixed product discount. We\u2019ll choose percentage.<\/p><p>In the \u2018Coupon amount\u2019 field we\u2019ll enter 10, as we would like our discount code to apply a 10% discount to the order.<\/p><p>Next, we have the option to enable free shipping with the use of this coupon code. Please note that you must have a \u2018Free Shipping Method\u2019 configured for this option to work. To find out how to set up a free shipping method, check our dedicated section on shipping.<\/p><p>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\u2019ll leave this blank as we would like our coupon to be available indefinitely.<\/p><p>Now, switch to the \u2018Usage Restrictions&#8217; tab, here we can set any restrictions associated with our coupon.<\/p><p>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.<\/p><p>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.<\/p><p>Our discount is going to be available to everybody without any restrictions so we\u2019ll leave these all blank.<\/p><p>Finally, we have the \u2018Usage limits\u2019 area.<\/p><p>You can state how many times you\u2019re happy for the coupon to be used before it\u2019s void. Leaving this blank with default to \u2018Unlimited\u2019.<\/p><p>Next, you can apply usage limits per item and last of all you can apply usage limits per user.<\/p><p>Just like with many WooCommerce settings, hover your mouse over the question mark to find out more information on these configurations.<\/p><p>Once you have finished configuring your coupon, select \u2018Publish\u2019 and your coupon is now ready for your customers to use.<\/p><p>If we now head to our store we can test to see if it works.<\/p><p>Add a product to the cart and proceed to the cart page&#8230;and enter your discount code&#8230;and there you go, you can see the discount of 10% is being applied to our order.<\/p><p>Now that your store is configured and ready for the world to see it\u2019s important to understand what happens when a customer places an order.<\/p><p>We\u2019ve configured everything so far to ensure the correct emails are sent out and also made sure that those emails are matched with your branding.<\/p><p>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.<\/p><p>If we visit the WordPress dashboard and open the \u2018Screen Options\u2019 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.<\/p><p>To view more information about any orders which have been placed, simply navigate to WooCommerce &gt; Orders.<\/p><p>Here you\u2019re 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.<\/p><p>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.<\/p><p>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.<\/p><p>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 \u2018completed\u2019 and then update the page. This will send an email to your customer informing them that their order is now complete.<\/p><p>Next we can see that we have an \u2018order actions\u2019 dropdown. This can be helpful if you ever need to resend notifications to your customers or to regenerate the download permissions on digital products.<\/p><p>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\u2019ll only appear here in the admin panel. Or you can send a note to your customer.<\/p><p>Remember to update the order once you\u2019ve finished making your changes.<\/p><p>WooCommerce makes light work of running an online store.<\/p><p>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.<\/p><p>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.<\/p><p>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.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-16811\" class=\"e-tab-content elementor-clearfix\" data-tab=\"11\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-16811\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=GLYQm1m1v4E&amp;list=PLZyp9H25CboHOS8GVqMPy91LCF2BAPypT&amp;index=11\" data-video-type=\"youtube\" data-video-title=\"Popups, Sales Pages &amp; Featured Products\" data-video-duration=\"13:49\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In our final lesson we\u2019ll learn a few basic marketing techniques which can really help push your website to the next level. First we\u2019ll create a popup which will prompt visitors to sign up to our newsletter. Next, we will learn about the inbuilt featured products option in WooCommerce, and then we\u2019ll learn how to display these on our pages using the Elementor editor. Finally, we\u2019ll create a dedicated sales page for our recipe eBook.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e Creating a newsletter popup<br \/>\u2714\ufe0e Using featured products<br \/>\u2714\ufe0e Creating a sales page for a single product<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Running an online store isn\u2019t simply a case of uploading your products once, sitting back and then hoping they sell. As a store owner you\u2019ll need to continuously think of new ways to entice customers to purchase your products.<\/p><p>In this lesson we\u2019re going to teach you a few basic marketing techniques which you can apply to your store to help push your sales higher and higher.<\/p><p>We\u2019ll first create a popup.<\/p><p>which will suggest a product to our customers who are browsing through the store. &#8211; remove<\/p><p>Next, we\u2019ll take a look at the inbuilt \u2018Featured Products\u2019 option. This will allow us to make specific products stand out which we are trying to push the sale on.<\/p><p>Finally, we\u2019ll create a dedicated sales page for a single product.<\/p><p>So if you\u2019re ready, let\u2019s get started and take your store to the next level.<\/p><p>The first marketing element we\u2019re going to add to our website is a popup.<\/p><p>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.<\/p><p>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.<\/p><p>In our example of using a popup on an online store, we\u2019re 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.<\/p><p>Let\u2019s head over to the Popups area and create our first store popup.<\/p><p>We\u2019ll name ours \u201cNewsletter Prompt\u201d.<\/p><p>You can of course choose a template from the library to get started if you so wish, but we\u2019ll create ours from scratch so will dismiss the library.<\/p><p>Before we add any content lets configure some general popup settings by selecting the gear icon\u2026<\/p><p>Set the width to 50VH&#8230;and leave the height as \u2018Fit to Content\u2019&#8230;you can amend this to \u2018Fit to Screen\u2019 or \u2018Custom\u2019 though if required.<\/p><p>We\u2019ve leave the default position rules as we\u2019d like our popup to show directly in the middle of the screen.<\/p><p>And we\u2019ll also leave the \u2018Overlay\u2019 &amp; \u2018Close Button\u2019 as \u2018Show\u2019.<\/p><p>Set the animations to fade in&#8230;and fade out.<\/p><p>Then in the style tab&#8230;set a background image for the popup\u2026<\/p><p>Set the position&#8230;attachment&#8230;repeat&#8230;and size\u2026<\/p><p>The overlay we\u2019ll leave as default..<\/p><p>And in the \u2018Close Button\u2019 tab set the color&#8230;and size of the close button (Primary 25).<\/p><p>Finally in the advanced tab&#8230;.add 5% padding to all sides.<\/p><p>Ok, great&#8230;now let\u2019s add some content.<\/p><p>Add a new one column section\u2026and then drop in a heading widget&#8230;amend the text&#8230;and the styles (Sign up &#8211; Center &#8211; Secondary Title &#8211; 1em Line Height).<\/p><p>Duplicate the heading&#8230;amend the text\u2026.then the styles (And save 10% on your first order &#8211; ).<\/p><p>Add in our divider image.<\/p><p>And now add in a contact form.<\/p><p>Give the form a name (Newsletter Sign Up)<\/p><p>Remove the message field&#8230;amend the input size to medium&#8230;and hide the label.<\/p><p>Now amend the size of the button&#8230;and the text (Sign up).<\/p><p>We\u2019ll 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&#8230;background color to white&#8230;border width to 0&#8230;and border radius to 0.<\/p><p>Now under the button styles&#8230;set the typography (Button S Text &#8211; 1em)&#8230;background color (black)&#8230;border radius (0)&#8230;and hover color (brown).<\/p><p>Switch back to the \u2018Content\u2019 tab and lets fine tune our form settings.<\/p><p>Open \u2018Actions after Submit\u2019 and by default our form will automatically be added to our submission database, as well as emailed to the admin email address.<\/p><p>If you select the plus icon you\u2019ll 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.<\/p><p>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\u2019ll automatically be added to your mailing list.<\/p><p>For more information about integrating Elementor forms with third party services, please check out the detailed instructions in our documentation.<\/p><p>In our example, we\u2019re 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.<\/p><p>We\u2019ll also set up an automatic email which is sent to the customer providing them with their 10% discount code.<\/p><p>And finally we\u2019ll configure the popup to close, once the form has been submitted (select popup).<\/p><p>There aren\u2019t any configurations to be made with the submission, so let\u2019s move onto the automatic email.<\/p><p>We\u2019ll 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&#8230;then select email&#8230;advanced&#8230;and copy the shortcode.<\/p><p>Now paste this shortcode into the \u2018To Field\u2019. This will now dynamically populate this field with whichever email address has been entered on the front end of our website.<\/p><p>Amend the title of the email\u2026<\/p><p>And then add your message\u2026(Hey! Thanks for signing up to the Bakersons\u2019 Newsletter. Your 10% discount is F3FSCPC4).<\/p><p>Please note that you can add HTML as well as shortcodes to this message field if required for in depth personalisation of your email.<\/p><p>Scrolling down, you\u2019ll see that we can also control the from name&#8230;email address&#8230;as well as reply to&#8230;cc&#8230;and bcc if required. We\u2019ll leave these as default for our form.<\/p><p>Finally open the popup tab&#8230;and under action set this to \u2018Close Popup\u2019. This means that once the form has been submitted, the popup will automatically close and the customer can continue browsing through our website.<\/p><p>If we now select \u2018Publish\u2019 we\u2019re automatically taken to the display condition window.<\/p><p>Here we can define the exact display settings for our popup.<\/p><p>We would like to display our popup just once, to first time visitors.<\/p><p>Select add condition&#8230;and leave it as the default \u2018entire site\u2019. This was the popup will show to first visitors, regardless of which page they land on first.<\/p><p>Now under \u2018Triggers\u2019 enable \u2018On Page Load\u2019 and we\u2019ll set this to 5 seconds.<\/p><p>Finally switch the \u2018Advanced Rules Tab\u2019 and under \u2018Show up to X times\u2019 we\u2019ll set this to 1, ensuring that the popup only shows the once.<\/p><p>Now save and close, and your popup is ready for your store.<\/p><p>If we now open our store in a new window and wait a few seconds, you\u2019ll see that the popup shows&#8230;we can fill in the form&#8230;and once we select sign up&#8230;the popup disappears and we are free to continue browsing.<\/p><p>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.<\/p><p>Now that we\u2019ve learnt how to create a popup for our store, let\u2019s take a look at WooCommerce\u2019s Featured Products.<\/p><p>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 \u2018Products Widget\u2019 just like we have here on the homepage of our website.<\/p><p>There are two ways to set up a product as \u2018featured\u2019 in WooCommerce, and both are done on the products page, so let\u2019s head there now.<\/p><p>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.<\/p><p>The second method is to select the \u2018Quick Edit\u2019 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\u2019ve made any amendments.<\/p><p>Let\u2019s now choose two other products to be featured\u2026<\/p><p>OK, great. Now that we\u2019ve selected some products to be featured, let&#8217;s see how to display them on our website.<\/p><p>Open up the homepage in the Elementor editor first of all&#8230;and then scroll down to this section, just below our hero image.<\/p><p>Search for&#8230;and drop in the \u2018Products Widget\u2019.<\/p><p>Don\u2019t worry about the styles for this widget just yet, we\u2019ll fix that soon. But for now switch over to the \u2018Query\u2019 tab and under \u2018Source\u2019 select \u2018Featured\u2019. And as you can see, the four products we just set as \u2018featured\u2019 are now showing.<\/p><p>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.<\/p><p>We\u2019ve previously styled a \u2018Products Widget\u2019 when we created our shop templates, so let&#8217;s open that template into a new tab&#8230;right click the \u2018Products Widget\u2019 and select \u2018Copy.<\/p><p>Now back on the homepage, right click the \u2018Products Widget\u2019 and select \u2018Paste Styles\u2019.<\/p><p>Wow, how easy was that!?<\/p><p>If we now visit our home page you can see the 4 featured products now showing in a very prominent position.<\/p><p>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.<\/p><p>In the final part of this lesson we\u2019re going to create a dedicated sales page which sells only one product.<\/p><p>It\u2019s 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.<\/p><p>On our website we\u2019ve created this sales page which is directly linked to a digital e-book of recipes from the bakery.<\/p><p>We\u2019ve provided some sample recipes to entice the user in, a product description and then an \u2018Add to cart\u2019 button.<\/p><p>And as you can see, selecting the \u2018Add to Cart\u2019 button takes the user straight to the cart page for ease.<\/p><p>Lets jump into the Elementor editor and check out just how we added this product to our page.<\/p><p>As you can see we\u2019ve pre created this page to display our header image, text, as well as our sample recipes.<\/p><p>If we keep scrolling you\u2019ll see we have an empty column which is ready for our product to be added.<\/p><p>Let&#8217;s search for and drop in the \u2018Product Widget\u2019.<\/p><p>And just like we did before when creating our featured products area, we\u2019re going to copy the styles from a previously created product widget to save us time with the styling.<\/p><p>Open up any template or page which is currently using this widget&#8230;copy the widget&#8230;and paste the style onto the product widget on our sales page.<\/p><p>Now adjust the columns and rows to 1 as we would only like to display 1 product on this page.<\/p><p>Lets now switch to the query tab&#8230;choose manual selection under source&#8230;and then search for our recipe ebook.<\/p><p>OK, great&#8230;things are starting to take shape.<\/p><p>Let now make some additional style adjustments\u2026<\/p><p>Switch to style and add to 75px padding to the box area&#8230;change the background to white&#8230;and then apply a box shadow (25% 10 5 15 0).<\/p><p>Let\u2019s now update our page and test it out.<\/p><p>Fantastic, our sales page is complete and is ready for us to drive traffic to.<\/p><p>Learning a few basic marketing techniques can really push your store to the next level.<\/p><p>The great thing about using Elementor and WooCommerce together, is it\u2019s extremely easy to set up and test multiple different combinations and ideas, allowing you to find the most optimal marketing techniques for your store.<\/p><p>Elementor and WooCommerce really are the perfect combination.<\/p><p>By using these tools together you have everything you need to create an amazing online store for any type of business.<\/p><p>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.<\/p><p>During this course we covered all aspects associated with building an online store with Elementor &amp; WooCommerce and you know have the knowledge and skills required to make a success of this.<\/p><p>Be sure to share your shop creations with us by posting your website links in the comments.<\/p><p>Thank you for watching and be sure to like and subscribe to our channel for more amazing tutorials and courses.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-16812\" class=\"e-tab-content elementor-clearfix\" data-tab=\"12\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-16812\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=GEJwAye0DrU&amp;t=3s\" data-video-type=\"youtube\" data-video-title=\"WooCommerce Menu Cart Widget\" data-video-duration=\"04:45\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In this lesson we\u2019re going to add the menu cart widget to our website, which will help to provide a seamless shopping experience for our customers.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e Adding the menu cart widget to the header<br \/>\u2714\ufe0e Amending the positioning of the menu cart widget<br \/>\u2714\ufe0e Configuring &amp; styling the menu cart widget<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Hey there, it\u2019s Ash from Elementor.<\/p><p>In this lesson we\u2019re going to add the menu cart widget to our website, which will help to provide a seamless shopping experience for our customers.<\/p><p>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.<\/p><p>In this lesson&#8230;<\/p><p>We\u2019ll first of all add the menu cart widget to our header template<br \/>We\u2019ll then amend it\u2019s positioning so that it fits perfectly with our other header elements<br \/>Then we\u2019ll configure and style this widget to our exact requirements<\/p><p>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.<br \/>Let\u2019s get started by first opening the homepage in the Elementor Editor.<\/p><p>We\u2019ll add a few products to the cart, so that when we create our menu cart we\u2019ll have some real time products to preview.<\/p><p>Now select to edit the header.<\/p><p>We\u2019ll first drop in the Menu Cart Widget underneath our menu&#8230;and then amend it\u2019s positioning so that it sits in line with our other elements.<br \/>Switch back to the content tab and let\u2019s amend these options so that our menu cart is perfect for our requirements.<\/p><p>Set your desired icon type&#8230;and items indicator.<\/p><p>We\u2019ll configure ours to hide if empty and will also disable the subtotal.<\/p><p>Next, open the \u2018Cart\u2019 tab and we\u2019ll also open the menu cart so that we can see our changes.<\/p><p>Here we have an array of options to fully configure our menu cart. We\u2019re going to leave most of these default values, as they work great for our requirements.<\/p><p>Scroll down now until you see the \u2018Button\u2019 area. We\u2019ll hide the \u2018View Cart\u2019 button, and move the \u2018Checkout\u2019 button to the bottom of the container.<\/p><p>Open the \u2018Additional Options\u2019 tab next, and set the cart to open each time an item is added.<\/p><p>And as you can see, if we scroll down and add a product, the menu cart opens and displays the newly added item.<\/p><p>Now that we\u2019ve configured our menu cart it\u2019s time to switch over to the style tab and set the appearance.<\/p><p>Let\u2019s hide the side cart first, and then style the menu cart icon.<\/p><p>We\u2019ll set the icon color&#8230;border width\u2026.and size.<\/p><p>Now reopen the side cart again, and open the cart tab to set these styles.<\/p><p>Set the padding to 50px on all sides.<\/p><p>We\u2019ll set the size and color for the close cart icon.<\/p><p>The size and color for the remove item icon.<\/p><p>And the color&#8230;typography&#8230;and width for the subtotal.<\/p><p>Now open the products tab.<\/p><p>Set your color for the product title.<\/p><p>Color and typography for the product price.<\/p><p>And styles for the button normal state&#8230;as well as the button hover state.<\/p><p>Let\u2019s now save the changes to our header and check this out on the front end of our website.<\/p><p>As you can see, when we add products to our cart, the side cart automatically opens and is populated with our newly added products.<\/p><p>We can remove items if we so wish, and also head to the checkout page to complete our order.<br \/>Make good use of the menu cart widget to ensure your customers receive a flawless and user friendly experience when browning your store.<\/p><p>Thank you for watching, be sure to comment below with any questions, and don\u2019t forget to subscribe to our channel for more amazing courses and tutorials.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-16813\" class=\"e-tab-content elementor-clearfix\" data-tab=\"13\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-16813\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=t7WVz9ECSDI&amp;t=4s\" data-video-type=\"youtube\" data-video-title=\"Using WooCommerce Dynamic Tags\" data-video-duration=\"07:13\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>In this lesson we\u2019re going to learn how to use WooCommerce Dynamic Tags on your website.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e Creating and configuring a popup<br \/>\u2714\ufe0e Populating a popup with widgets which display dynamic data from WooCommerce<br \/>\u2714\ufe0e Setting the display conditions for the popup<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Hey there, it\u2019s Ash from Elementor.<\/p><p>In this lesson I\u2019m going to teach you how to use WooCommerce Dynamic Tags on your website.<\/p><p>We\u2019ll be building this popup which will be populated using dynamic data, all pulled straight from our WooCommerce products.<\/p><p>To achieve this we\u2019ll undertake the following:<\/p><p>We\u2019ll first create and configure our popup<br \/>Then we\u2019ll populate it using various widgets, columns and sections. Many of which will display data using dynamic tags.<br \/>And finally we\u2019ll set our display conditions, so that the popup shows when a user tries to leave the website<\/p><p>Elementor makes displaying dynamic data extremely straightforward, if you need to familiarise yourself with this feature, you\u2019ll find a link in the description below to our dedicated tutorial.<br \/>We\u2019ll begin the WordPress dashboard.<\/p><p>Then head over to Templates &gt; Popups, and add a new pop-up.<\/p><p>Give your pop-up a name, and then select \u2018Create Template\u2019.<\/p><p>Dismiss the library&#8230;<br \/>&#8230;and then select the gear icon, located in the bottom left corner.<\/p><p>We\u2019ll set the width to 70vw\u2026<\/p><p>And entrance and exit animations to fade-in and fade-out.<br \/>Now add a new two column section.<\/p><p>Set it to full-width and then amend the padding on the first column.<\/p><p>Drop in a heading widget&#8230;amend the text&#8230;alignment&#8230;.and typography.<br \/>We\u2019ll add in a divider image.<br \/>Next we\u2019ll drop in another heading widget, and this time instead of manually amending the text, we\u2019ll set it using dynamic content.<\/p><p>Select the dynamic tags icon, and scroll down until you see \u2018Product Title\u2019.<\/p><p>Open the dynamic options by selecting the wrench icon, select \u2018All\u2019 and then search for your product.<\/p><p>Now set the alignment&#8230;color&#8230;and padding.<br \/>Add in another heading widget and again, select the dynamics tags icon and this time choose \u2018Product Price\u2019. Select the wrench icon and search for your product.<\/p><p>By default, you will see both the normal and sale price. We can amend to show just the sale price but using the \u2018Format Dropdown\u2019.<\/p><p>If we now open the \u2018Advanced\u2019 tab you\u2019ll see we can enter text to display before and after our dynamic value, as well as fallback text.<\/p><p>In the after field, enter a space followed by \u201c\/ per kg\u201d.<\/p><p>Once you\u2019ve done this, set your alignment&#8230;and typography.<br \/>Now search for and drop in the \u2018Custom Add to Cart\u2019 widget.<\/p><p>Search for your product\u2026Amend the text\u2026Alignment\u2026Remove the icon\u2026<\/p><p>And then in the style tab adjust the typography&#8230;normal colors&#8230;add a border&#8230;border width&#8230;border color&#8230;border radius&#8230;then set the hover colors for the button.<br \/>To continue styling our popup, we\u2019re going to set the background image of the second column to automatically display the product image.<\/p><p>To do this, select the column&#8230;then go to style&#8230;background&#8230;and choose classic.<\/p><p>Select the dynamic tags icon, choose product image and then search for your product.<\/p><p>Set the position&#8230;and size.<\/p><p>OK, that\u2019s looking great. Now let\u2019s check our design for tablet and mobile devices as well.<br \/>Open responsive mode and then switch to tablet first of all.<\/p><p>We\u2019ll set each column to take up 100% of the available width first of all, which will stack them on top of one another.<\/p><p>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\u2019s do this for both tablet and mobile devices.<\/p><p>Now drop a spacer widget into the column and set it\u2019s height.<\/p><p>Latestly, amend the padding on the second column.<\/p><p>Switch to mobile view next&#8230;and make any necessary amendments.<br \/>Once finished, close responsive mode and now let\u2019s style the close button.<\/p><p>Select the gear icon and head to style &gt; close button.<\/p><p>Set the normal color\u2026.hover color&#8230;and size.<br \/>Now that we\u2019ve finished creating and styling our popup, it\u2019s time to publish and set it\u2019s display conditions.<\/p><p>Select the \u2018Publish\u2019 button, then choose \u2018Add Condition\u2019.<\/p><p>By default, it will show across the entire website, and this is what we\u2019ll leave it as.<\/p><p>Next, select \u2018Triggers\u2019 and activate \u2018On Page Exit Intent\u2019. This ensures the popup appears when a user is about to leave the page&#8230;.hopefully enticing them into purchasing a product before they go.<\/p><p>And finally to ensure that our popup isn\u2019t too intrusive, we\u2019ll set advanced rule to only display once.<\/p><p>When finished, save and close, and now your popup is ready.<\/p><p>If we now visit our website and act as if we\u2019re about to leave, you can see the popup fades in and displays our offer.<br \/>Outro<br \/>Utilizing popups on your store can be really beneficial in both promoting products and engaging with your customers.<\/p><p>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.<\/p><p>Thank you for watching, be sure to comment below with any questions, and don\u2019t forget to subscribe to our channel for more amazing courses and tutorials.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Building an online store with WooCommerce 13 Videos Building an online store with WooCommerce 1:28 Important First Steps 3:45 Install &amp; Configure WooCommerce 14:07 Adding Products &amp; Categories 13:37 WooCommerce Templates Part 1 14:20 WooCommerce Templates Part 2 8:39 WooCommerce Pages Explained 16:41 Configuring the Shipping Options 8:44 Setting Up PayPal &amp; Stripe 10:53 Emails, [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":5626,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[10,25],"tags":[39],"class_list":["post-5625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations","category-woocommerce","tag-courses"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Building an online store with WooCommerce - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building an online store with WooCommerce - Academy\" \/>\n<meta property=\"og:description\" content=\"Building an online store with WooCommerce 13 Videos Building an online store with WooCommerce 1:28 Important First Steps 3:45 Install &amp; Configure WooCommerce 14:07 Adding Products &amp; Categories 13:37 WooCommerce Templates Part 1 14:20 WooCommerce Templates Part 2 8:39 WooCommerce Pages Explained 16:41 Configuring the Shipping Options 8:44 Setting Up PayPal &amp; Stripe 10:53 Emails, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-29T10:03:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T09:55:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/WC-Intro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ashley Whitehair\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashley Whitehair\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"81 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building an online store with WooCommerce - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/","og_locale":"en_US","og_type":"article","og_title":"Building an online store with WooCommerce - Academy","og_description":"Building an online store with WooCommerce 13 Videos Building an online store with WooCommerce 1:28 Important First Steps 3:45 Install &amp; Configure WooCommerce 14:07 Adding Products &amp; Categories 13:37 WooCommerce Templates Part 1 14:20 WooCommerce Templates Part 2 8:39 WooCommerce Pages Explained 16:41 Configuring the Shipping Options 8:44 Setting Up PayPal &amp; Stripe 10:53 Emails, [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/","og_site_name":"Academy","article_published_time":"2021-07-29T10:03:02+00:00","article_modified_time":"2023-02-21T09:55:12+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/WC-Intro.jpg","type":"image\/jpeg"}],"author":"Ashley Whitehair","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ashley Whitehair","Est. reading time":"81 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/"},"author":{"name":"Ashley Whitehair","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8"},"headline":"Building an online store with WooCommerce","datePublished":"2021-07-29T10:03:02+00:00","dateModified":"2023-02-21T09:55:12+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/"},"wordCount":18875,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/WC-Intro.jpg","keywords":["Courses"],"articleSection":["Integrations","WooCommerce"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/","url":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/","name":"Building an online store with WooCommerce - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/WC-Intro.jpg","datePublished":"2021-07-29T10:03:02+00:00","dateModified":"2023-02-21T09:55:12+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/WC-Intro.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/WC-Intro.jpg","width":1920,"height":1080,"caption":"Building an online store with WooCommerce"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/building-an-online-store-with-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Integrations","item":"https:\/\/elementor.com\/academy\/integrations\/"},{"@type":"ListItem","position":4,"name":"Building an online store with WooCommerce"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8","name":"Ashley Whitehair","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","caption":"Ashley Whitehair"},"description":"Ashley is an Elementor Specialist with a keen eye for design and a passion for creating user-friendly and effective websites. When he is not creating websites and educational material, he enjoys CrossFit, mountain biking, reading, and exploring the world.","url":"https:\/\/elementor.com\/academy\/author\/user-60190f8d0e66e\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/5625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=5625"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/5625\/revisions"}],"predecessor-version":[{"id":9614,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/5625\/revisions\/9614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/5626"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=5625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=5625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=5625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}