{"id":38018,"date":"2020-04-28T09:19:32","date_gmt":"2020-04-28T09:19:32","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=38018"},"modified":"2025-12-04T07:33:11","modified_gmt":"2025-12-04T05:33:11","slug":"wordpress-site-into-an-online-store","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/","title":{"rendered":"Monday Masterclass: How to Transform Any WordPress Site Into an Online Store With Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"38018\" class=\"elementor elementor-38018\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0f3c3f7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0f3c3f7\" 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-0c18f0a\" data-id=\"0c18f0a\" data-element_type=\"column\">\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-e6094bc elementor-widget elementor-widget-text-editor\" data-id=\"e6094bc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There was no doubt that the current crisis would heavily affect the global economy. But with the sudden surge of online business, we would expect small and medium businesses (SMBs) to be doing quite nicely.&nbsp;<\/p>\n<p>Unfortunately, there is no shortage of SMB owners and web creators who are still intimidated by the notion of creating an <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/online-store\/\"   title=\"online store\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5084\">online store<\/a>. Perhaps they remember it as the complex process that it was over a decade ago.<\/p>\n<p>By showing <a href=\"https:\/\/elementor.com\/resources\/how-to\/build-ecommerce-website\/\">how we can build a fully functioning online store<\/a>, in 5 simple steps, that will include defining products, setting up WooCommerce, and shipping classifications, we are hoping to change this.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13b6f48 elementor-widget elementor-widget-heading\" data-id=\"13b6f48\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/shopify-to-woocommerce\/\">Learn how to migrate your online store from Shopify to WooCommerce with this step-by-step guide!<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f4fe6a7 elementor-widget elementor-widget-heading\" data-id=\"f4fe6a7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What We\u2019ll Need for This Masterclass<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e142930 elementor-widget elementor-widget-text-editor\" data-id=\"e142930\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To create our online store we will need the following items:<\/p>\n<ul>\n<li>A basic functioning <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-wordpress\/\"   title=\"WordPress website\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"4709\">WordPress website<\/a>.<\/li><li>Product\/s<\/li>\n<li><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\"   title=\"Elementor\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"917\">Elementor<\/a> web builder (installed)<\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce<\/a>, the preferred ecommerce plugin for WordPress<\/li>\n<li>An account with a payment gateway\/s (online payment services, e.g. <a href=\"https:\/\/stripe.com\/\" target=\"_blank\" rel=\"noopener\">Stripe<\/a>, or <a href=\"https:\/\/www.paypal.com\/\" target=\"_blank\" rel=\"noopener\">Paypal<\/a>)&nbsp;<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbddacc elementor-widget elementor-widget-heading\" data-id=\"cbddacc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Our Test Case\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68cee35 elementor-widget elementor-widget-text-editor\" data-id=\"68cee35\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Our test case will be a small business, a brick-and-mortar sports equipment store, \u201cSimon\u2019s Sporting Goods\u201d. Till now they\u2019ve only needed their website for basic information about the store and special offers.\u00a0<\/p><p>But with local health regulations forcing the store to remain closed, they have no choice but to start selling products online.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ed206f elementor-widget elementor-widget-image\" data-id=\"3ed206f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/01.Before-version-standard-wordpress-elementor-site-r4q6yfvz6uvmditdb89l7nhg6ntery4tcc9m7t1lao.png\" title=\"01.Before-version-standard-wordpress-elementor-site\" alt=\"01.Before-version-standard-wordpress-elementor-site\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Our test case website, currently only used to provide information about the store<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b32cc34 elementor-widget elementor-widget-text-editor\" data-id=\"b32cc34\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Because we want to grab our customers attention from the get-go we\u2019ve come up with a great product to launch on our new online store, a \u201cHome Fitness Package\u201d that will include:<\/p><ul><li>A skipping rope<\/li><li>A pair of wights<\/li><li>A roll-up mattress\u00a0<\/li><li>A pair of resistance training straps<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a709be3 elementor-widget elementor-widget-heading\" data-id=\"a709be3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Converting Our Website to an Online Store<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d305ec elementor-widget elementor-widget-text-editor\" data-id=\"0d305ec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Before we begin the build, whether we\u2019re professional or not, it\u2019s considered good practice to first put our site in <a href=\"https:\/\/elementor.com\/blog\/wordpress-maintenance-mode\/\" target=\"_blank\" rel=\"noopener\">Maintenance Mode<\/a>.\u00a0<\/p><p>In the WordPress <strong>dashboard<\/strong>, we\u2019ll just go to the <strong>Elementor <\/strong>tab, and select <strong>Tools<\/strong>, and there we\u2019ll select the <strong>Maintenance Mode <\/strong>tab.\u00a0<\/p><p>In the mode drop-down menu, we\u2019ll select the <strong>Coming Soon <\/strong>mode, as it serves our purpose much better.\u00a0<\/p><p>Of course we could also use the dropdown menu here to upload a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/all-categories\/\"   title=\"Alle categorie\u00ebn\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26031\">template<\/a>, or create a customized design for a template in Elementor (by clicking on the link labeled <strong>create one<\/strong>). We could also prepare this in advance by creating a \u201cComing Soon\u201d page, and saving it as a template, as we did here.<\/p><p><a href=\"https:\/\/elementor.com\/blog\/10-best-resources-for-elementor-templates\/\">If you are looking for the top free WordPress Template resources, check out this article.<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3114be9 elementor-widget elementor-widget-image\" data-id=\"3114be9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/02.Coming-soon-maintenance-mode-elementor-wordpress-website-r4q70lwky3uf55o1nnzmglsphn4vitqjb2ex1rtsqu.png\" title=\"02.Coming-soon-maintenance-mode-elementor-wordpress-website\" alt=\"02.Coming-soon-maintenance-mode-elementor-wordpress-website\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Our Coming Soon template created in Elementror for use in the Maintenance Mode<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1890c0b elementor-widget elementor-widget-text-editor\" data-id=\"1890c0b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Once we\u2019re done, we\u2019ll click on save and get to work on the build itself.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8123895 elementor-widget elementor-widget-heading\" data-id=\"8123895\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step #1: Download and Install WooCommerce\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf84fca elementor-widget elementor-widget-text-editor\" data-id=\"cf84fca\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We install <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/woocommerce-builder\/\"   title=\"WooCommerce\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"1586\">WooCommerce<\/a> the same way that we install any other plugin.<\/p><p>On the WordPress <strong>dashboard<\/strong>, we&#8217;ll go to the <strong>Plugins <\/strong>tab, and click on <strong>Add New<\/strong>. <br \/>We&#8217;ll use the search box to search for WooCommerce, and having found it, we&#8217;ll click <strong>Install<\/strong>, It may take a minute to install, and once that&#8217;s done we&#8217;ll click on <strong>Activate<\/strong>.\u00a0<\/p><p>With the plugin activated, the WooCommerce Setup Wizard should appear.\u00a0<\/p><p>If it doesn&#8217;t, we&#8217;ll click on the <strong>WooCommerce <\/strong>tab (that has appeared on our dashboard), select <strong>Settings<\/strong>, and in the settings section, in the top right-hand corner, we&#8217;ll click on <strong>Help<\/strong>.\u00a0<\/p><p>In the expanded Help section, locate the <strong>Setup Wizard<\/strong> on the far left, then again on the Setup Wizard button that will appear in the same section.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59d921e elementor-widget elementor-widget-heading\" data-id=\"59d921e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step #2: Setting up WooCommerce Using the Setup Wizard\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e8f00a elementor-widget elementor-widget-text-editor\" data-id=\"7e8f00a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The guys behind WooCommerce have done a great job of making the setup process user friendly.\u00a0<\/p><p>On the Setup Wizard\u2019s first page we\u2019ll input our store details. At the bottom of this page, you\u2019ll notice that there is a drop-down menu with options to sell digital or downloadable products in our store. As we\u2019re only selling physical products, we\u2019ll select the appropriate option, then click on the <strong>Let\u2019s Go<\/strong> button to continue on to the next page.<\/p><p>At this point we may see a WooCommerce popup asking us if we agree to their use of User Tracking. Click <strong>Continue<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-043f3e3 elementor-widget elementor-widget-heading\" data-id=\"043f3e3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Payment Gateways\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6362f80 elementor-widget elementor-widget-text-editor\" data-id=\"6362f80\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the Payment settings, we\u2019ll select our Payment Gateways. These are online payment services with great reputations for online transaction security.<\/p><p>We can link any of these gateways to our accounts, using our email address.\u00a0<\/p><p>There are lots of options, and each gateway has its Pros &amp; Cons.<\/p><p>If you can use Stripe, then I would definitely add that as an option. It takes a little longer to set up but they provide good service for low fees.\u00a0<\/p><p>If not, PayPal is great too. The fees are a little higher but it\u2019s quick and easy to set up, and customers can use it whether they have an account or not.<\/p><p>As you can see, there are some other options below for offline payments but we strongly suggest using the online payment gateways because we\u2019ll save a lot of time and effort on security, and even the design.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-702ff6f elementor-widget elementor-widget-image\" data-id=\"702ff6f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/03.WooCommerce-Setup-wizard-elementor-wordpress-r4q6yhrnkiy70qqn092ucn0ddfk57cca0lkl6cysde.png\" title=\"03.WooCommerce-Setup-wizard-elementor-wordpress\" alt=\"03.WooCommerce-Setup-wizard-elementor-wordpress\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Setting up the Payments page using The WooCommerce Setup Wizard<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb212d5 elementor-widget elementor-widget-text-editor\" data-id=\"cb212d5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>With the payment options set up, we\u2019ll move on to the Shipping page, where we\u2019ll select the weight and measurement units that will be simplest for our customers to use.\u00a0<\/p><p>The next few pages are for recommended plugins that you could use if you wish.<\/p><p>We\u2019ll deselect them because we already have the option to link things like our <a href=\"https:\/\/elementor.com\/widgets\/facebook-widgets\/\" target=\"_blank\" rel=\"noopener\">Facebook <\/a>and <a href=\"https:\/\/elementor.com\/blog\/the-tools-we-love-mailchimp\/\" target=\"_blank\" rel=\"noopener\">MailChimp<\/a> account to our site via Elementor, so for us, this is redundant.<\/p><p>We also don\u2019t really need JetPack either, so we can skip this too, which takes us to the wizard\u2019s final page.<\/p><p>And with that, we\u2019ve completed the primary setup for WooCommerce.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b43691e elementor-widget elementor-widget-heading\" data-id=\"b43691e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step #3: Create or Add Our First Product<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ee25ce elementor-widget elementor-widget-text-editor\" data-id=\"0ee25ce\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>With the wizard\u2019s final page still open, we\u2019ll click on the <strong>Create a Product<\/strong> button which will take us back to the <strong>Products <\/strong>tab (just below the <strong>WooCommerce <\/strong>tab) on the WordPress <strong>Dashboard<\/strong>.\u00a0<\/p><p>This is where we\u2019ll be able to add, remove, and edit all of our products.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3067a3 elementor-widget elementor-widget-image\" data-id=\"f3067a3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/04.Add-new-product-woocommerce-elementor-r4q73m00s1ye8bb14gppxcipsyc340no1xfr8ldicy.png\" title=\"04.Add-new-product-woocommerce-elementor\" alt=\"04.Add-new-product-woocommerce-elementor\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">The WooCommerce Add New Product section on the WordPress dashboard<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2d3a96 elementor-widget elementor-widget-text-editor\" data-id=\"a2d3a96\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Going into the <strong>Add New Product<\/strong> section, we\u2019ll fill in all of the necessary details of our product:<\/p><ul><li>Product name &#8211; we suggest you make this a catchy name<\/li><li>Description &#8211; This is where we\u2019ll add an informative description of the product<\/li><\/ul><p>The bottom half of this section is where we\u2019ll fill in the following <strong>Product Data<\/strong>:\u00a0<\/p><ul><li>Type of product &#8211; our test case is an example of a Simple Product (not virtual or downloadable)<\/li><li>Price\u00a0<\/li><li>Short description &#8211; a brief blurb about the product<\/li><\/ul><p>The panel on the right of this section is where we\u2019ll add our <strong>Product Image<\/strong>. This will be our products featured image. Should we want to add more images, we can do so in the main description box.\u00a0<\/p><p>Above the Product Image box, we have the option to add tags to our product, and assign categories.<\/p><p>And with that, all that\u2019s left to do is review our product\u2019s info before clicking <strong>Publish<\/strong>.<\/p><p>Surprising as it may seem, but we\u2019ve actually completed the hard part.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f06ee34 elementor-widget elementor-widget-heading\" data-id=\"f06ee34\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step #4: Add Our Product to the Page \n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccf5e53 elementor-widget elementor-widget-text-editor\" data-id=\"ccf5e53\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This is the fun part of the process, where we showcase our product and tweak our website\u2019s design to better suit its new purpose as an online store.\u00a0<\/p><p>To do this, we\u2019ll open our website\u2019s main page (you could also create a whole new page dedicated to the products of your store) in Elementor.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15d8899 elementor-widget elementor-widget-image\" data-id=\"15d8899\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/05.redesign-online-store-wordpress-elementor-r4q773ye7uqtg282oz5q7gqhel39rgjp78utjo6r76.png\" title=\"05.redesign-online-store-wordpress-elementor\" alt=\"05.redesign-online-store-wordpress-elementor\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Our test case website after a quick redesign to suit its new purpose as an online store<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a53d7f4 elementor-widget elementor-widget-text-editor\" data-id=\"a53d7f4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you can see, we\u2019ve made a few small changes already. Such as removing the old special offers and adding an announcement that the physical store will be closed due to the health and safety regulations of the current situation.<\/p><p>The easiest way to add a product to our page is by going to the <strong><a href=\"https:\/\/elementor.com\/widgets\/\">Widget Library<\/a><\/strong> in the <strong>Editor<\/strong> panel and searching for the WooCommerce <strong>Products<\/strong> widget.\u00a0<\/p><p>We\u2019ll drag and drop it into the section where we want it to appear. Notice that the widget automatically displays our product, but this is because we currently have only one product listed in our store.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff4a226 elementor-widget elementor-widget-image\" data-id=\"ff4a226\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/06.Displaying-product-widget-using-elementor-r4q72iist0gcoowdizne0mhcurqo4qaxwi1d2z01ma.png\" title=\"06.Displaying-product-widget-using-elementor\" alt=\"06.Displaying-product-widget-using-elementor\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Displaying a product using the Woocommerce Products widget<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52554c3 elementor-widget elementor-widget-text-editor\" data-id=\"52554c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If we have more than one product, having positioned the <strong>Products <\/strong>widget in place (with the widget selected), on the edit panel (left side), in the <strong>Content Tab<\/strong>, we\u2019ll go to the <strong>Query <\/strong>section. We\u2019ll select our source as <strong>Manual Selection; then<\/strong>, we\u2019ll use the <strong>Search &amp; Select<\/strong> for exactly that, and locate the product that we want to sell here.\u00a0<\/p><p>We can then go into the <strong>Style <\/strong>tab and customize the widget to suit the rest of our page\u2019s design. With that done, we\u2019ll click on <strong>Publish <\/strong>or <strong>Save Draft<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a5086f elementor-widget elementor-widget-heading\" data-id=\"4a5086f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Using Elementor to Create a Fully Customizable Product Display\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5618cba elementor-widget elementor-widget-text-editor\" data-id=\"5618cba\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you\u2019re a more experienced user, you might want to try the more customizable alternative solution.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b31fcd9 elementor-widget elementor-widget-image\" data-id=\"b31fcd9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"720\" height=\"389\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=389\/blog\/wp-content\/uploads\/2020\/04\/07.woocommerce-products-widget-limited.png\" class=\"attachment-large size-large wp-image-38038\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/04\/07.woocommerce-products-widget-limited.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/07.woocommerce-products-widget-limited-300x162.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Designing a product display using basic Elementor widgets<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9bb0340 elementor-widget elementor-widget-text-editor\" data-id=\"9bb0340\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The product display in the image above was created using some basic <strong>Heading <\/strong>and <strong>Text <\/strong>widgets, a simple <strong>Image Box,\u00a0<\/strong>and an <strong>Icon List <\/strong>widget. Finally, we added a <strong>Customizable Add to Cart <\/strong>widget, also from the widget library.<\/p><p>I would strongly suggest that you at least try the latter method as it will offer you unmatchable flexibility to make your design truly eye-catching and unique.<\/p><p>Once we\u2019re happy with the way our product or products look on our page, we could move on to our <strong>Cart <\/strong>and <strong>Checkout <\/strong>pages.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56ae1cf elementor-widget elementor-widget-heading\" data-id=\"56ae1cf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Tweaking the Design of the Cart &amp; Checkout Pages<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c09462 elementor-widget elementor-widget-image\" data-id=\"2c09462\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/08.Cart-Checkout-plain-woocommerce-standard-r4q75khx0mmwf2gmot6qmcqacuom5bfjbmd68cgzea.png\" title=\"08.Cart-Checkout-plain-woocommerce-standard\" alt=\"08.Cart-Checkout-plain-woocommerce-standard\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Standard design of WooCommerce\u2019s Cart and Checkout pages<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15e106a elementor-widget elementor-widget-text-editor\" data-id=\"15e106a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>These two pages were automatically created when we installed WooCommerce, and being WooCommerce pages, there isn\u2019t too much that we can customize.<\/p><p>So to make these pages look better, we created two separate headers in the Elementor <a href=\"https:\/\/elementor.com\/blog\/why-use-theme-builder\/\">Theme builder<\/a>. In the conditions, we assigned each header to only appear on the cart or checkout pages, respectively.\u00a0<\/p><p>The safest and simplest way to keep the design of these pages consistent with the rest of our site is by defining our website\u2019s default fonts accordingly in the new <a href=\"https:\/\/elementor.com\/blog\/introducing-theme-style\/\" target=\"_blank\" rel=\"noopener\">Theme Style <\/a>feature. This is because these are the settings that WooCommerce will turn to, to know how to present these pages.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d3e8ae elementor-widget elementor-widget-image\" data-id=\"7d3e8ae\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"389\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=389\/blog\/wp-content\/uploads\/2020\/04\/09.Cart-page-design-theme-builder-elementor.png\" class=\"attachment-large size-large wp-image-38040\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/04\/09.Cart-page-design-theme-builder-elementor.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/09.Cart-page-design-theme-builder-elementor-300x162.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Cart page after some simple tweaking (using Theme Builder and Theme Style)<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f8224f3 elementor-widget elementor-widget-heading\" data-id=\"f8224f3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">The Thank You Message \n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5f057b elementor-widget elementor-widget-text-editor\" data-id=\"f5f057b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you know, it has become customary to display a Thank You massage once the customer has completed their online purchase.\u00a0<\/p><p>WooCommerce includes a generic Thank You message that comes with its standard confirmation email and I feel that this is sufficient for this type of store.\u00a0<\/p><p>Should we ever want our Thank You message to appear a little more upscale, we could always use the <strong><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/theme-builder\/\"   title=\"Theme Builder\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"1416\">Theme Builder<\/a><\/strong> to create a popup with a Thank You message, designing it exactly the way we want to, and create a condition to have it appear after leaving the <strong>Checkout page<\/strong>.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8cf81fd elementor-widget elementor-widget-image\" data-id=\"8cf81fd\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/10.thank-you-popup-elementor-theme-builder-wordpress-r4q74mnq6lckt3ts6ek64l9oyzbeg7p76yvoydv5ma.png\" title=\"10.thank-you-popup-elementor-theme-builder-wordpress\" alt=\"10.thank-you-popup-elementor-theme-builder-wordpress\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">An example of fully customizable Thank You popup created using the Theme Builder<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa667dc elementor-widget elementor-widget-text-editor\" data-id=\"fa667dc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Alternatively, you could invest in a WooCommerce addon that will provide your site with a customizable Thank You page or popup, but these do cost extra.<\/p><p>With our site\u2019s design and build done, we can move on to the final step.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b0ff1b8 elementor-widget elementor-widget-heading\" data-id=\"b0ff1b8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step #5: Main WooCommerce Setup and Definitions\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-191c70a elementor-widget elementor-widget-text-editor\" data-id=\"191c70a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Most of the default settings should be good for the vast majority of the online stores.\u00a0<\/p><p>These settings can be found under the <strong>Settings <\/strong>section in the <strong>WooCommerce <\/strong>tab on the <strong>WordPress <\/strong>dashboard.<\/p><p>Here, in the <strong>General <\/strong>settings we can edit things like:<\/p><ul><li>Store address<\/li><li>General options.<\/li><li>Currency Options<\/li><\/ul><p>In the <strong>Products\u2019 <\/strong>settings, in the<strong> Add to Cart Behaviour <\/strong>subsection, we\u2019ll find a helpful option that redirects customers to the Cart page after successful addition or selection of a product. Something that we\u2019ll select here as right now we only have the one product.<\/p><p>The<strong> Shop Page<\/strong> subsection is where we define our store page. Right now, we\u2019re showcasing our product on our homepage, but we could just as easily create another page and use this option to link our site to that page.<\/p><p>The <strong>Products <\/strong>settings is also where we can also edit and define <strong>Measurements<\/strong>, <strong>Reviews, <\/strong><strong style=\"font-size: 1.0625rem;letter-spacing: 0px\">Inventory<\/strong><span style=\"font-size: 1.0625rem;letter-spacing: 0px\">, and so on.<\/span><\/p><p>I wouldn\u2019t play around with the default settings in the rest of these tabs, definitely not those in the <strong>Taxes <\/strong>Tab.<\/p><p>However, I would like to spend a few moments in the shipping section because, after all, it is an important part of an online retail business.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-051b6e1 elementor-widget elementor-widget-heading\" data-id=\"051b6e1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Setting up Shipping\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-792f238 elementor-widget elementor-widget-text-editor\" data-id=\"792f238\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Yes, there are plenty of efficient plugins and addons that could provide you with shipping calculators, even ones that are service-specific, and calculate shipping via FedEx or the USPS. And yes, some are free, but most do cost money.<\/p><p>However, right now, we\u2019re trying to save money, or least avoid extra costs, and, if possible, also avoid adding anything to our platform that could slow down our site or create conflictions.<\/p><p>As it happens, we can do this, right here, safely and securely, and with no extra cost.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9bb35f elementor-widget elementor-widget-heading\" data-id=\"b9bb35f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Top Tip: Research Packaging and Shipping Costs Thoroughly \n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfcc549 elementor-widget elementor-widget-text-editor\" data-id=\"cfcc549\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I would strongly suggest that you research the price of shipping and delivery to the areas that you want to do business with. Find what it will cost you to package and ship each product according to its weight. You might want to ship via registered mail, or you might want to add an Express Postal service \u2014 research here is important. Charge too little, and you\u2019ll lose money. Charge too much, and you\u2019ll lose customers.<\/p><p>The way that this system works is based on <strong>Shipping zones<\/strong> and <strong>Shipping classes<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1fc1c60 elementor-widget elementor-widget-heading\" data-id=\"1fc1c60\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Setting Up Your Shipping Classes for WooCommerce\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cdd2bc8 elementor-widget elementor-widget-text-editor\" data-id=\"cdd2bc8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The product that I\u2019m currently selling includes a couple of dumbbells or weights. But I may decide to sell some of the athletic clothing too, and in terms of shipping costs, these are two different categories or Shipping Classes.<\/p><p>Which is why we should begin by defining our Shipping Classes.<\/p><p>For this demonstration, we\u2019ll just define two simple classes.<\/p><p>In the <strong>Shipping <\/strong>Tab, we\u2019ll click on <strong>Shipping Classes<\/strong>.<\/p><p>Once we\u2019re in the <strong>Shipping Classes <\/strong>section, we\u2019ll click on <strong>Add a Class<\/strong>.\u00a0<\/p><p>We\u2019ll then define this class by naming it \u201cHeavy Items.\u201d<\/p><p>(The slug line isn\u2019t that important, and WooCommerce can fill it automatically anyway.) <br \/>In the definition box, we\u2019ll add a brief explanation (e.g., \u201cItems weighing over 2KG\u201d) for ourselves, our employees or coworkers.\u00a0<\/p><p>Next, we\u2019ll create a separate class the same way. This time we\u2019ll name it \u201cLight Items\u201d and define it as \u201cItems weighing less than 2KG\u201d.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30e4b18 elementor-widget elementor-widget-image\" data-id=\"30e4b18\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/11.shippin-classes-woocommerce-settings-elementor-r4q72dtluu9x2n37afm965o1vudu28sa7urxol7088.png\" title=\"11.shippin-classes-woocommerce-settings-elementor\" alt=\"11.shippin-classes-woocommerce-settings-elementor\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Shipping Class Settings in WooCommerce<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2400a05 elementor-widget elementor-widget-text-editor\" data-id=\"2400a05\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It\u2019s at this point that we must remember that the system also needs to know which of our products are \u201cHeavy\u201d or \u201cLight\u201d items.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0a447c elementor-widget elementor-widget-heading\" data-id=\"f0a447c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Defining Shipping Classes Per Product\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3761abc elementor-widget elementor-widget-text-editor\" data-id=\"3761abc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Going back to the WordPress <strong>dashboard<\/strong>, we\u2019ll enter the <strong>Products <\/strong>Tab, and locating our specific product on the list of products, will click on the <strong>Edit<\/strong> option just beneath it.<\/p><p>This will open up the <strong>Edit Product<\/strong> section, where we\u2019ll scroll down to the <strong>Product Data <\/strong>area and select the <strong>Shipping <\/strong>tab.\u00a0<\/p><p><br \/>This is another of those places where we can keep it simple. There really is no need to define the product&#8217;s weights and sizes. Instead, we\u2019ll just select the appropriate <strong>Shipping Class <\/strong>for this specific product in the dropdown menu.\u00a0<\/p><p>With that done, we\u2019ll click on <strong>Update <\/strong>(on the left panel), and return to the WooCommerce <strong>Settings<\/strong>, and back to the <strong>Shipping <\/strong>tab.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ff9580 elementor-widget elementor-widget-heading\" data-id=\"8ff9580\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Setting Up Your Shipping Zones and Methods for WooCommerce\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a7ca9b6 elementor-widget elementor-widget-text-editor\" data-id=\"a7ca9b6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As we know, besides weight, the other important variable that dictates our shipping costs is location. And that is what we are going to do now in the <strong>Shipping Zones<\/strong> section.<\/p><p>Here we\u2019ll click on <strong>Add Shipping Zone<\/strong> and name this zone \u201cDomestic.\u201d Next, we\u2019ll select the appropriate region for our test case (UK). If possible, you can also select regions according to postcodes or zip codes.<\/p><p>Next, we\u2019ll add a Shipping Method.<\/p><p>As I\u2019m mostly interested in local business, and because I would personally like to make my life much simpler, we\u2019ll click on <strong>Add Shipping Method<\/strong> and select the option for <strong>Free Shipping<\/strong>.<\/p><p>I have already calculated the cost of post and packaging, rounded up that number, and added to the final advertised price. In fact, it\u2019s the base price of the product I am selling.\u00a0<\/p><p>Now, this is all well and good, but what if we\u2019re interested in expanding to western Europe, for example, and we don\u2019t want to offer free shipping.<\/p><p>We can always just add another Zone, name it Europe, and enter all of the countries we want to sell to. Next, we\u2019ll <strong>Add A Shipping Method<\/strong>, and this time we\u2019ll select <strong>Flat Rate<\/strong>.\u00a0<\/p><p>I realize that the term \u201cflat rate\u201d might seem confusing to some of you right now, but it\u2019s just a temporary definition.<\/p><p>As you know, if we ever want to make any changes to our shipping preferences, or indeed almost everything on the WordPress platform, we can always come back here and click on the <strong>Edit <\/strong>option that appears under each category in each section.\u00a0<\/p><p>By clicking on <strong>Edit<\/strong>, beneath the shipping method that we just created, we\u2019ll open a dialog box where we\u2019ll define this shipping method more specifically.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39b0ffe elementor-widget elementor-widget-image\" data-id=\"39b0ffe\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/12.Shipping-method-settings-woocommerce-r4q75gqk9ahr4mm3ark8cdofzb75aj0lz3r8b8mjtg.png\" title=\"12.Shipping-method-settings-woocommerce\" alt=\"12.Shipping-method-settings-woocommerce\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Shipping Method settings in WooCommerce<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db45662 elementor-widget elementor-widget-text-editor\" data-id=\"db45662\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The first thing that we\u2019ll do is change the name in the <strong>Method Title<\/strong> from \u201cFlat Rate\u201d to \u201cEurope (regular shipping).\u201d We\u2019ll leave the <strong>Tax<\/strong> option alone.<\/p><p>Notice that we have the <strong>Cost <\/strong>option for adding a general shipping cost to this Shipping Zone.<\/p><p>However, we can define our shipping method according to the shipping classes we\u2019ve already set up.<\/p><p>For example, I can define the shipping costs so that a European customer will pay 30 dollars shipping for a heavy item, like the Home fitness package; or 10 dollars shipping if they order a light item, like a pair of sweatpants.<\/p><p>The default calculation type should suit almost all of our needs, so we recommend leaving it as is.\u00a0<\/p><p>As always, we\u2019ll click <strong>save changes<\/strong>, before we forget.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aa91dde elementor-widget elementor-widget-image\" data-id=\"aa91dde\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"389\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=389\/blog\/wp-content\/uploads\/2020\/04\/13.shipping-zone-settings-woocommerce-elementor.png\" class=\"attachment-large size-large wp-image-38044\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/04\/13.shipping-zone-settings-woocommerce-elementor.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/13.shipping-zone-settings-woocommerce-elementor-300x162.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Shipping Zone Settings in WooCommerce<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee2e4a0 elementor-widget elementor-widget-text-editor\" data-id=\"ee2e4a0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Many of us would also like to offer our customers Expedited shipping, and we can do this simply, in the very same way.\u00a0<\/p><p>We\u2019ll add an additional shipping method to our \u201cEurope\u201d shipping zone, by adding a new method, selecting <strong>Flat Rate<\/strong>, then clicking on <strong>Edit<\/strong>.\u00a0<\/p><p>Once in the dialogue box, we\u2019ll change the <strong>Method Title<\/strong> to \u201cEurope (Express)\u201d and enter the costs of this method according to shipping class (Heavy\/Light).\u00a0<\/p><p>And of course, we\u2019ll click on <strong>Save Changes<\/strong>.<\/p><p>While you\u2019re in the <strong>Shipping <\/strong>settings, you may also want to check out the <strong>Shipping Options<\/strong> where there are some helpful options that are self-explanatory.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8fb0c8a elementor-widget elementor-widget-heading\" data-id=\"8fb0c8a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Just a few more WooCommerce Settings\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b017828 elementor-widget elementor-widget-text-editor\" data-id=\"b017828\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the <strong>Payments <\/strong>tab, we might want to rewrite the default description for the PayPal payment option. This is in case we don\u2019t have a separate Credit Card option; we\u2019ll want to be sure that our customers know that they can also click on PayPal to pay via credit card.<\/p><p>To do this, we\u2019ll go into the <strong>Payment <\/strong>tab, and next to the <strong>PayPal <\/strong>option, we\u2019ll click on <strong>Manage <\/strong>to access the details we want to edit, in our case, the PayPal <strong>description<\/strong>.<\/p><p>Notice that there is a <strong>PayPal Standard<\/strong> option as well as a <strong>Paypal Checkout <\/strong>option. I prefer using the later as it includes a checkout stage and makes things easier.<\/p><p>Back in the <strong>Settings<\/strong>, we\u2019ll skip the <strong>Accounts <\/strong>settings, because we\u2019ll be running our transactions the same as we would in the physical store, where we didn\u2019t use accounts. Perhaps, our online store will grow, which would be fantastic, but also an entirely different type of online store.<\/p><p>The last thing that we should consider is in the <strong>Advanced <\/strong>tab, where we can make sure that all the pages are linked correctly.<\/p><p>But more importantly, we might want to create a page for Terms &amp; Conditions that are specific to our online business, and this is where we would like it to our site.<\/p><p>Last but not least, we\u2019ll want to save all of our changes, and we are practically finished.\u00a0<\/p><p>I say practically because we shouldn\u2019t be launching anything without testing it first.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1fd2998 elementor-widget elementor-widget-heading\" data-id=\"1fd2998\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Testing Our Online Store\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-444a63d elementor-widget elementor-widget-text-editor\" data-id=\"444a63d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Before we conduct our tests, we\u2019ll first go to the Product Edit page on the WordPress dashboard and temporarily change the price of the product, from $99.90 to 99 cents.\u00a0<\/p><p>This is so that when we run test after test, we\u2019re not transferring 100 dollars each time.\u00a0<\/p><p>If you do this, it is extremely important to remember to change the price back to what it should be, once you\u2019re done with the testing.<\/p><p>To test that everything in our store is in order, we\u2019ll go to our site (in preview mode), and there, we\u2019ll click on the product&#8217;s <strong>Add to Cart<\/strong> button.<\/p><p>This will take us to the <strong>Cart<\/strong> page. From here will click to go to the <strong>Checkout <\/strong>page.\u00a0<\/p><p>We\u2019ll fill in our details, and proceed through the process as if we were customers.<\/p><p>For this demonstration, I used a Paypal account, as it\u2019s probably what we\u2019re all most familiar with.\u00a0<\/p><p>With everything running smoothly, so far, once we\u2019ve completed our test purchase, we\u2019ll go back to the WordPress <strong>Dashboard <\/strong>and in the <strong>WooCommerce <\/strong>Tab.<\/p><p>There we can already see that our order has registered, and if we go to the <strong>Orders <\/strong>section and click on our order, we can see that our test order has registered correctly.\u00a0<\/p><p>Of course, we should also check our email account to make sure that we received our order confirmation correctly.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46d14e8 elementor-widget elementor-widget-image\" data-id=\"46d14e8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/14.Thank-You-Email-confirmation-woocomerce-r4q71wwiftmr9nrs18ayx9xr6wp87ox45j171lw3xw.png\" title=\"14.Thank-You-Email-confirmation-woocomerce\" alt=\"14.Thank-You-Email-confirmation-woocomerce\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Email confirmation and Thank You message for our test order<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b802693 elementor-widget elementor-widget-heading\" data-id=\"b802693\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Summary<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc249c0 elementor-widget elementor-widget-text-editor\" data-id=\"dc249c0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This week we looked at how we can take a standard website for a small business and transform it into something as complex as an online store \u2014 but \u2014 in the simplest way possible.\u00a0<\/p><p>It\u2019s no secret that our main reason for doing this is to help the small businesses and self-employed professionals in our community to get ahead, rather than lose out as we all see our way through this crisis as best we can.\u00a0<\/p><p>If you have any tips and advice that could help other users with designing and setting up their first online store, please add them in the comments below.<\/p><p>Should you have any criticisms, we are equally interested in your thoughts.<\/p><p>After all, our goal is to be the best at helping others excel at their craft.<\/p>\t\t\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>This week we turn a WordPress site into an online store with customizable product display, and an efficient system for shipping and registering orders, all done in 5 simple steps.<\/p>\n","protected":false},"author":162405,"featured_media":38019,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44,37,77],"tags":[79,173],"marketing_persona":[47,51],"marketing_intent":[49],"class_list":["post-38018","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-masterclass","category-woocommerce","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Turn Any WordPress Site Into an Online Store With Elementor<\/title>\n<meta name=\"description\" content=\"Turn any WordPress site into an online store with customizable product display, plus an efficient system for shipping and registering orders, all done in 5 simple steps.\" \/>\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\/blog\/wordpress-site-into-an-online-store\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Turn Any WordPress Site Into an Online Store With Elementor\" \/>\n<meta property=\"og:description\" content=\"Turn any WordPress site into an online store with customizable product display, plus an efficient system for shipping and registering orders, all done in 5 simple steps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-28T09:19:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T05:33:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/1200x628-cover-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Simon Shocket\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simon Shocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/\"},\"author\":{\"name\":\"Simon Shocket\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6\"},\"headline\":\"Monday Masterclass: How to Transform Any WordPress Site Into an Online Store With Elementor\",\"datePublished\":\"2020-04-28T09:19:32+00:00\",\"dateModified\":\"2025-12-04T05:33:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/\"},\"wordCount\":3890,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/1200x628-cover-1.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Elementor\",\"Monday Masterclass\",\"WooCommerce\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/\",\"url\":\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/\",\"name\":\"Turn Any WordPress Site Into an Online Store With Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/1200x628-cover-1.png\",\"datePublished\":\"2020-04-28T09:19:32+00:00\",\"dateModified\":\"2025-12-04T05:33:11+00:00\",\"description\":\"Turn any WordPress site into an online store with customizable product display, plus an efficient system for shipping and registering orders, all done in 5 simple steps.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/1200x628-cover-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/1200x628-cover-1.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Monday Masterclass\",\"item\":\"https:\/\/elementor.com\/blog\/category\/masterclass\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Monday Masterclass: How to Transform Any WordPress Site Into an Online Store With Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6\",\"name\":\"Simon Shocket\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g\",\"caption\":\"Simon Shocket\"},\"description\":\"With a background in graphic design and animation, Simon began his writing career in the entertainment industry, followed by a fruitful career in advertising, before moving into hi-tech journalism. Simon also performs with several bands and musical productions. After all, he was born in Manchester, UK, and that\u2019s a lot to live up to.\",\"sameAs\":[\"http:\/\/simon.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/simon-shocket\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Turn Any WordPress Site Into an Online Store With Elementor","description":"Turn any WordPress site into an online store with customizable product display, plus an efficient system for shipping and registering orders, all done in 5 simple steps.","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\/blog\/wordpress-site-into-an-online-store\/","og_locale":"en_US","og_type":"article","og_title":"Turn Any WordPress Site Into an Online Store With Elementor","og_description":"Turn any WordPress site into an online store with customizable product display, plus an efficient system for shipping and registering orders, all done in 5 simple steps.","og_url":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2020-04-28T09:19:32+00:00","article_modified_time":"2025-12-04T05:33:11+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/1200x628-cover-1.png","type":"image\/png"}],"author":"Simon Shocket","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Simon Shocket","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/"},"author":{"name":"Simon Shocket","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6"},"headline":"Monday Masterclass: How to Transform Any WordPress Site Into an Online Store With Elementor","datePublished":"2020-04-28T09:19:32+00:00","dateModified":"2025-12-04T05:33:11+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/"},"wordCount":3890,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/1200x628-cover-1.png","keywords":["Build","Video"],"articleSection":["Elementor","Monday Masterclass","WooCommerce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/","url":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/","name":"Turn Any WordPress Site Into an Online Store With Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/1200x628-cover-1.png","datePublished":"2020-04-28T09:19:32+00:00","dateModified":"2025-12-04T05:33:11+00:00","description":"Turn any WordPress site into an online store with customizable product display, plus an efficient system for shipping and registering orders, all done in 5 simple steps.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/1200x628-cover-1.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/1200x628-cover-1.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/wordpress-site-into-an-online-store\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Monday Masterclass","item":"https:\/\/elementor.com\/blog\/category\/masterclass\/"},{"@type":"ListItem","position":3,"name":"Monday Masterclass: How to Transform Any WordPress Site Into an Online Store With Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6","name":"Simon Shocket","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g","caption":"Simon Shocket"},"description":"With a background in graphic design and animation, Simon began his writing career in the entertainment industry, followed by a fruitful career in advertising, before moving into hi-tech journalism. Simon also performs with several bands and musical productions. After all, he was born in Manchester, UK, and that\u2019s a lot to live up to.","sameAs":["http:\/\/simon.com"],"url":"https:\/\/elementor.com\/blog\/author\/simon-shocket\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/38018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/162405"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=38018"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/38018\/revisions"}],"predecessor-version":[{"id":146547,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/38018\/revisions\/146547"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/38019"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=38018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=38018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=38018"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=38018"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=38018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}