{"id":1311,"date":"2020-09-16T10:00:00","date_gmt":"2020-09-16T08:00:00","guid":{"rendered":"https:\/\/interwebsa.com\/blog\/?p=1311"},"modified":"2020-09-16T10:00:00","modified_gmt":"2020-09-16T08:00:00","slug":"how-to-use-woocommerce-to-set-up-an-online-shop-in-wordpress","status":"publish","type":"post","link":"https:\/\/interwebdev.co.za\/index.php\/2020\/09\/16\/how-to-use-woocommerce-to-set-up-an-online-shop-in-wordpress\/","title":{"rendered":"How to Use WooCommerce to Set Up an Online Shop in WordPress"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In this tutorial, we\u2019ll show you (step-by-step) how to set up an online store using WooCommerce and WordPress where you can sell both physical and digital products\/services.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WooCommerce is a free plugin that is simple and straightforward. In a sentence, WooCommerce is the best way to turn your WordPress website into a fully functional e-commerce store.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>It\u2019s free<\/strong>&nbsp;and open-source \u2013 just like WordPress.<\/li><li>It\u2019s the&nbsp;<strong>most popular e-commerce<\/strong>&nbsp;plugin for WordPress out there.<\/li><li>You can&nbsp;<strong>set it up and configure it by yourself<\/strong>.<\/li><li>The&nbsp;<strong>setup is fast<\/strong>. Usually, it\u2019s just a matter of an hour.<\/li><li><strong>It works with any design\/theme<\/strong>&nbsp;you currently have on your WordPress site \u2013 you don\u2019t need to ditch your current website design.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">We could continue with the list above, but instead, let us just say that WooCommerce simply gives you all you could ever need for building a high-quality e-commerce store with WordPress.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What Can You Sell With WordPress + WooCommerce?<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Digital products (e.g. software, downloads, e-books),<\/li><li>Physical products,<\/li><li>Services,<\/li><li>Bookings (e.g. for appointments, or anything else that can be booked),<\/li><li>Subscriptions,<\/li><li>Other people\u2019s products \u2013 as an affiliate,<\/li><li>Customizations (e.g. additional customizations on top of your product listings), and more.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In other words \u2013 you can&nbsp;make money with your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We would even risk saying that WooCommerce allows you to sell&nbsp;<em>anything<\/em>&nbsp;that can have a price tag assigned to it. On top of that, anyone can use it (if you\u2019ve already managed to get a WordPress site launched, you will also be able to handle WooCommerce).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Build an Online Store With WordPress and WooCommerce<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Note: The goal of this part of the guide is to show you the simplest method of building a functional e-commerce store on WordPress so that you can get your store online as soon as possible. That is why we\u2019re going to focus on just the essential things and skip the more advanced aspects.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">STEP 1. First, Get a Domain Name and Web Hosting<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In order to create an&nbsp;online store&nbsp;or any other type of website, you\u2019re going to need two things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Domain name<\/strong>&nbsp;is your store\u2019s unique address on the web. Something like&nbsp;<code>YOURSTORE.com<\/code><\/li><li><strong>Web Hosting<\/strong>&nbsp;is basically a remote computer that stores your website and then serves it to whoever wants to visit it. (<a href=\"https:\/\/interwebsa.com\/blog\/shared-hosting\/how-to-host-a-website-a-complete-guide-for-beginners\/\">more detailed explanation<\/a>)<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Full disclosure<\/strong>: We earn a commission whenever you end up purchasing Bluehost. This helps us to run WebsiteSetup as a business. Thanks for your support.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are hundreds of different hosting\/domain providers, we usually get both from Bluehost.com. They offer affordable web hosting (including a free domain name for a year) and reliability. They\u2019re also one of the few recommended (official) hosting providers by WordPress.org. Cost? Starting from $2.75\/mo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>To begin with, you just need to&nbsp;<a href=\"https:\/\/interwebsa.com\" target=\"_blank\" rel=\"noreferrer noopener\">go to InterWebSA.com<\/a><\/strong>, and click the \u201cget started\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/websitesetup.org\/go\/bluehost\/store2\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/06\/hosting-1024x502.png\" alt=\"\" class=\"wp-image-277\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This will take you to a page where you can select a hosting plan for your store. You can get started with the cheapest option, labeled \u201cTeeny Tiny\u201d:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\" id=\"attachment_4043\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/Ad11fg-1024x1024.png\" alt=\"\" class=\"wp-image-1332\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The next step is all about picking a domain name for your new online store.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/06\/tld.jpg\" alt=\"\" class=\"wp-image-279\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This requires some brainstorming. In general, you want your domain name to be&nbsp;<em>unique<\/em>,&nbsp;<em>easy to remember,<\/em>&nbsp;and&nbsp;<em>catchy<\/em>. If you already have a business entity set up for your store, you should perhaps go with that as your domain name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you make&nbsp;<a href=\"https:\/\/interwebsa.com\/blog\/domains\/register-a-domain-with-interweb-sa\/\">your domain choice<\/a>, you can finalize the setup and pay the initial hosting fee.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Great! You\u2019ve just got yourself a domain name and a hosting plan to go along with it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">STEP 2. Install WordPress (FREE)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The next step officially marks the start of your adventure with WordPress \u2013 you\u2019re going to install WordPress on your hosting account.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This might sound difficult, but it\u2019s actually not. All you have to do is to go to your Bluehost user panel (InterWeb SA will send you a link in the confirmation email) \u2013 usually available at&nbsp;<em><strong>https:\/\/interwebsa.com\/clientarea.php<\/strong><\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once there, scroll down until you see an icon labeled \u201cInstall WordPress\u201d:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/softaculous-install-WordPress-1024x708-1.png\" alt=\"\" class=\"wp-image-421\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Click on it and follow the on-screen instructions. You will be taken through the whole process step-by-step, there\u2019s nothing to worry about!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>If you need more hands-on info on&nbsp;picking a domain and installing a clean copy of WordPress, please go ahead and&nbsp;<a href=\"https:\/\/interwebsa.com\/blog\/guides\/how-to-install-wordpress-2\/\">visit this guide<\/a>&nbsp;(scroll to steps 2).<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At this point, you should have a blank WordPress website installed.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>You can see it by going to your main domain name (e.g.,&nbsp;<code>YOURSTORE.com<\/code>)<\/li><li>You can log in to the admin panel by going to&nbsp;<code>YOURSTORE.com\/wp-admin<\/code><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now it\u2019s time to turn that blank WordPress website into a fully functional e-commerce store using the excellent WooCommerce plugin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">STEP 3. Install WooCommerce Plugin (FREE)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Like with&nbsp;all WordPress plugins, the fun starts by&nbsp;navigating to your&nbsp;<em>WordPress Dashboard \/ Plugins \/ Add New<\/em>. Once there, type \u201cwoocommerce\u201d in the search field. You\u2019ll see WooCommerce as the first search result:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-install-1-1024x480-1024x480-1.jpg\" alt=\"\" class=\"wp-image-1331\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Just click the \u201cInstall Now\u201d button next to the plugin.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After a couple of seconds, the text on the button will change to \u201cActivate.\u201d Go ahead and click it.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-activate.jpg\" alt=\"\" class=\"wp-image-1330\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">At this stage, you\u2019ll see WooCommerce\u2019s on-screen launch\/setup wizard. This thing makes the process uber-easy and takes you by the hand through everything. To start, click \u201cLet\u2019s Go!\u201d<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-wizard-1.jpg\" alt=\"\" class=\"wp-image-1329\"\/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Create the Essential Store Pages<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Online stores are a&nbsp;<em>particular<\/em>&nbsp;kind of website, and they need some&nbsp;<em>particular<\/em>&nbsp;pages to function properly. The first step in the WooCommerce wizard is about&nbsp;creating these pages for you:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>\u201cShop\u201d \u2013<\/strong>&nbsp;this is where your products are going to be displayed.<\/li><li><strong>\u201cCart\u201d \u2013<\/strong>&nbsp;this is the shopping cart where your customers can adjust their order before proceeding to checkout.<\/li><li><strong>\u201cCheckout\u201d \u2013<\/strong>&nbsp;this is where the customers choose the shipping\/delivery method and pay for whatever they\u2019ve bought.<\/li><li><strong>\u201cMy Account\u201d \u2013<\/strong>&nbsp;a kind of a profile page for registered customers (they will be able to view their past orders there and manage other details).<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">All you need to do at this stage of the WooCommerce wizard is click the \u201cContinue\u201d button. WooCommerce will set up those pages for you.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Set Up Locale<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The locale is a truly crucial part of your store setup. Those few parameters define your business origin, currency, and preferred units:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-wizard-2.jpg\" alt=\"\" class=\"wp-image-1328\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Once you\u2019re done, click \u201cContinue\u201d.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Understand Sales Tax<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Tax is by far the least exciting part of running an e-commerce store, but it\u2019s also something we can\u2019t disregard, sadly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019re going to be pleased to see that WooCommerce helps you with this part too.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, you can select if you\u2019re going to be shipping physical goods or not. If you check the box, WooCommerce will pre-set the remaining shipping-related details in the settings.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-wizard-3-shipping.png\" alt=\"\" class=\"wp-image-1327\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Next, tax! WooCommerce has a very neat tax module, the best thing about it is that it helps you figure out the tax rates based on your store location (you\u2019ve set it in the previous step).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re going to charge sales tax (in most cases you are), just check the main tax box. As soon as you do this, a new set of boxes will appear and&nbsp;inform you of what\u2019s going to happen next.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-tax-toggle.gif\" alt=\"\" class=\"wp-image-1326\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Note: Even though WooCommerce will pre-fill the tax settings for you, you still need to double-check with your local authorities what the actual current taxation rules are, especially if you\u2019re not in the US. To learn more about WooCommerce\u2019s way of handling sales taxes,&nbsp;<a href=\"https:\/\/docs.woocommerce.com\/document\/setting-up-taxes-in-woocommerce\/\" target=\"_blank\" rel=\"noreferrer noopener\">read this<\/a>. You can change everything later, so don\u2019t worry if you\u2019re not sure about the rules right now.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click \u201cContinue.\u201d<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Pick a Payment Method (PayPal is Recommended)<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Being able to accept online payments is at the core of any e-commerce store, WooCommerce really offers a lot in terms of the available solutions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s what you can choose from:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-wizard-4-payments.jpg\" alt=\"\" class=\"wp-image-1325\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Two of the most popular payment options are at the very top \u2013 PayPal and Stripe \u2013 it\u2019s highly recommended that you integrate your site with both. Just click on their corresponding checkboxes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also select other payment methods that seem to make sense. There\u2019s going to be even more options available later on in your WooCommerce settings panel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Note: In order to make online payments work, you need to sign up with either PayPal or Stripe separately. The settings in WooCommerce are only for integrating your existing PayPal and Stripe accounts with your new e-commerce website.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Again, click \u201cContinue\u201d when done.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The next step is just a confirmation screen that everything went well. At this stage, your basic site setup is done \u2013 you\u2019ve just built a blank e-commerce store with WooCommerce!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The next step is adding products:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">STEP 4. Add Your Products or Services<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To be able to call your store operational, you need some products in the database (or services, or downloads, or whatever it is that you want to sell).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To start working with the products, go to your dashboard, then&nbsp;<em>Products \/ Add Product<\/em>:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/add-product.jpg\" alt=\"\" class=\"wp-image-1324\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">What you\u2019re going to see is a classic WordPress content editing screen:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-product-add.jpg\" alt=\"\" class=\"wp-image-1323\"\/><\/figure><\/div>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Product name<\/strong>.<\/li><li>The main&nbsp;<strong>product description<\/strong>. This large field allows you to enter as much info about the product as you wish. Since this is WordPress, you can put not only simple text there but also images, columns, headings, even videos, and other media. Basically, whatever you see fit!<\/li><li>The central&nbsp;<strong>product data section<\/strong>. This one is where you set the type of product that you\u2019re adding, and whether it\u2019s a physical, a&nbsp;downloadable or a&nbsp;virtual product (services are considered virtual products too). As part of this central section, you also get tabs for various parameters of the product:<ol><li><em>General<\/em>. This is where you get to set the pricing and taxes.<\/li><li><em>Inventory<\/em>. WooCommerce allows you to manage stock levels.<\/li><li><em>Shipping<\/em>. Set the weight, dimensions, and the cost of shipping.<\/li><li><em>Linked Products<\/em>. Great for setting upsells, cross-sales, etc. (Think, \u201cCustomers who bought&nbsp;<em>this<\/em>&nbsp;also bought&nbsp;<em>that<\/em>.\u201d)<\/li><li><em>Attributes<\/em>. Set custom product attributes. E.g.,&nbsp;if you\u2019re selling shirts, you can set alternative colors here.<\/li><li><em>Advanced<\/em>. Additional settings. Not essential.<\/li><\/ol><\/li><li><strong>Short Description<\/strong>. This is the text that gets displayed on the product page under the name. Works best as a short summary of what the product is.<\/li><li><strong>Product Categories<\/strong>. Group similar products together. E.g., \u201chats.\u201d It works just like the standard WordPress categories.<\/li><li><strong>Product Tags<\/strong>. An additional way to help you organize your database of products. It works just like the standard WordPress tags.<\/li><li><strong>Product Image<\/strong>. The main product image.<\/li><li><strong>Product Gallery<\/strong>. Additional product images to showcase their awesomeness.<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The first time you visit this panel, WooCommerce will display some handy tooltips to explain what\u2019s the purpose of each field:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-add-product-tooltips.jpg\" alt=\"\" class=\"wp-image-1322\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Once you\u2019re done setting all of the above, click on the big Publish button \u2013 your first product has just been added!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After adding a handful of goods to your database, the products section in the dashboard should look something like this:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-products.jpg\" alt=\"\" class=\"wp-image-1321\"\/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">STEP 5. Choose a Theme for Your Online Store (FREE)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">There\u2019s a very good reason why we first covered how to add products to your store, before discussing the visual appearance of the entire thing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quite frankly, without any products in the database, you wouldn\u2019t be able to see the individual pages of the store in any representative form. You wouldn\u2019t be able to make sure that everything looks right.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you have most of your products added, we can make sure that things are in order from a purely visual standpoint.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">WooCommerce vs Your Current Theme<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>By default, WooCommerce works with any&nbsp;WordPress theme.<\/strong>&nbsp;This is great news especially if you\u2019ve already picked your design and you want to stick with it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alternatively, you can go with special WooCommerce-optimized themes. Those themes come with pre-set styles that make all WooCommerce elements look great.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s our recommendation:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/theme-choice.png\" alt=\"\" class=\"wp-image-1320\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The official WooCommerce theme \u2013 and the one that\u2019s the most likely to work properly \u2013 is called&nbsp;<a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storefront<\/a>. The default version&nbsp;<a href=\"https:\/\/wordpress.org\/themes\/storefront\/\" target=\"_blank\" rel=\"noreferrer noopener\">is free<\/a>, and it should be enough to get you going.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/storefront-1024x354-1.jpg\" alt=\"\" class=\"wp-image-1319\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Alternatively, you can visit the&nbsp;<a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\" target=\"_blank\" rel=\"noreferrer noopener\">e-commerce section at ThemeForest<\/a>&nbsp;\u2013 the biggest directory of premium WordPress themes on the web.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/themeforest.jpg\" alt=\"\" class=\"wp-image-1318\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Regardless if you\u2019ve decided to stick with your current theme or have gone for something new and WooCommerce-optimized, what you need to do next is make sure that the individual pages of the store look good. Let\u2019s do that now:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">STEP 6. Make Your of E-Commerce Store Design User Friendly<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s discuss a handful of important aspects before we get into the nitty-gritty.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mainly \u2013&nbsp;<strong>what makes an e-commerce store design good (read: profitable)?<\/strong>&nbsp;Here are the most crucial parameters:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>The design<\/strong>&nbsp;needs to be clear and not confusing in any way. A visitor who\u2019s confused won\u2019t buy anything.<\/li><li><strong>The center content block<\/strong>&nbsp;needs to grab the visitor\u2019s attention right after they come to the site. That center block is where the products will be displayed.<\/li><li><strong>Adjustable sidebars.<\/strong>&nbsp;You need to be able to select how many sidebars you need and also disable the sidebar altogether for some pages (more on that later).<\/li><li><strong>Responsive and mobile-optimized.<\/strong>&nbsp;Research indicates&nbsp;<em>[2]<\/em>&nbsp;that around 80% of people on the internet own a smartphone. According to another research&nbsp;<em>[3]<\/em>, 61% of your mobile visitors will leave immediately and go to your competitors if they have a frustrating mobile browsing experience. In other words \u2013 making sure that your website is optimized for mobile is crucial.<\/li><li><strong>Good navigation structure<\/strong>. You want clear menus that are easy to grasp \u2013 so that your visitors can find the page they\u2019re looking for.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Having the above in mind, here\u2019s what you can do with the individual pages of the store:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Your Shop Page<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This is where the main listing of your products is found. If you\u2019ve gone through the WooCommerce setup wizard, this page can be found at&nbsp;<code>YOURDOMAIN.com\/shop<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is a standard WordPress page \u2013 you can edit it via&nbsp;<em>WordPress dashboard \/ Pages.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The things that are worth doing:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Add some copy that will encourage your visitors to shop with you.<\/li><li>Decide if you want to have the sidebar on the page. This is done through your theme\u2019s own page templates. For instance, Storefront allows me to go full-width, which we will do:<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/full-width.jpg\" alt=\"\" class=\"wp-image-1317\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The main trait of the Shop page is that right below the standard content, it features a custom part where it displays your product listings. This is what it looks like on the Storefront theme:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-shop-page.jpg\" alt=\"\" class=\"wp-image-1316\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">As you can see, nice product images are the key, it\u2019s the first thing that you should get right! In other words \u2013 you should probably work on your product images more than on anything else.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WooCommerce also enables you to display your products in alternative ways on this page. When you go to&nbsp;<em>the WordPress dashboard \/ WooCommerce \/ Settings \/ Products<\/em>&nbsp;and then the&nbsp;<em>Display<\/em>&nbsp;section:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-products-display.jpg\" alt=\"\" class=\"wp-image-1315\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u2026 you can choose whether you want to display individual products or product categories on the Shop page. Select whatever makes the most sense for you, then save settings.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Individual Product Pages<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In order to see those, click on any product listing from the Shop page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re using a quality theme, you shouldn\u2019t experience any difficulties on this particular page. Basically, the only thing you can do is adjust the amount of text that you\u2019re using for individual product descriptions, to make sure that everything fits visually&nbsp;and that there are no blank spots that could confuse the buyer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s our example with the Storefront theme (without any additional customization):<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-products-listing.jpg\" alt=\"\" class=\"wp-image-1314\"\/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Shopping Cart<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Another crucial page that can be adjusted through&nbsp;<em>Dashboard \/ Pages<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The one thing we would recommend is to go for the full-width layout. You don\u2019t want to give the buyer too many options on this page, apart from proceeding to checkout.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-cart-1024x678-1.jpg\" alt=\"\" class=\"wp-image-1313\"\/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Checkout<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Checkout is perhaps the most important page of them all. It\u2019s where your buyers get to finalize their orders and make the payments.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We don\u2019t actually encourage you to do any tweaks to that page apart from one:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Checkout page absolutely needs to be full-width. The only acceptable way out of the page for the buyer should be to finalize their order, and not get distracted by the things available in the sidebar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can do this via&nbsp;<em>Dashboard \/ Pages<\/em>&nbsp;(just repeat the process you went through with the Shop page).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apart from that, the default look of the Checkout page is great:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/08\/woocommerce-checkout-1024x995-1-1024x995-1.jpg\" alt=\"\" class=\"wp-image-1312\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><em>At this stage, you are basically done with adjusting your store design, now let\u2019s look into the possibilities to extend the store\u2019s functionality.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">STEP 7. Extend WooCommerce<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">One more thing that makes WooCommerce such an impressive e-commerce solution is that there are tens or even hundreds of extensions and plugins available.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s list some of the most useful ones:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">WooCommerce Extensions<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s start with the extensions \u2013 the official add-ons that have been approved by the WooCommerce team.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To see what\u2019s available, you can go to&nbsp;<a href=\"https:\/\/woocommerce.com\/product-category\/woocommerce-extensions\/\" target=\"_blank\" rel=\"noreferrer noopener\">this page<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That catalog is truly impressive and vast. We don\u2019t want you to feel intimidated by it. You certainly don\u2019t need all of those extensions. Treat that list as a buffet \u2013 pick whatever seems cool.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Some of the more worthy mentions:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/woocommerce.com\/product-category\/woocommerce-extensions\/payment-gateways\/\" target=\"_blank\" rel=\"noreferrer noopener\">Payment gateways<\/a>. These extensions allow you to accept more payment methods on top of the standard PayPal. In general, the more methods of payment you can afford to accept (those gateways are often paid), the better.<\/li><li><a href=\"https:\/\/woocommerce.com\/product-category\/woocommerce-extensions\/shipping-methods\/\" target=\"_blank\" rel=\"noreferrer noopener\">Shipping extensions<\/a>. These are going to be handy if you want to automatically&nbsp;integrate your store with the official shipping rates from companies such as UPS or FedEx.<\/li><li><a href=\"https:\/\/woocommerce.com\/product-category\/woocommerce-extensions\/accounting-extensions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Accounting extensions<\/a>. Integrate your WooCommerce store with the accounting tool of your choice.<\/li><li><a href=\"https:\/\/woocommerce.com\/products\/woocommerce-bookings\/\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce Bookings<\/a>.&nbsp;Allow customers to book appointments for services without leaving your site.<\/li><li><a href=\"https:\/\/woocommerce.com\/products\/woocommerce-subscriptions\/\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce Subscriptions<\/a>.&nbsp;Let customers subscribe to your products or services and pay a weekly, monthly or annual fee.<\/li><li><a href=\"https:\/\/woocommerce.com\/products\/eu-vat-number\/\" target=\"_blank\" rel=\"noreferrer noopener\">EU VAT Number<\/a>.&nbsp;For those operating within the EU.<\/li><li><a href=\"https:\/\/woocommerce.com\/products\/taxjar\/\" target=\"_blank\" rel=\"noreferrer noopener\">TaxJar<\/a>.&nbsp;Put&nbsp;your sales tax on autopilot.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Alternatively, if you don\u2019t want to spend any money on new extensions, you can browse around in the&nbsp;<a href=\"https:\/\/woocommerce.com\/product-category\/woocommerce-extensions\/free-extensions\/\" target=\"_blank\" rel=\"noreferrer noopener\">free category<\/a>. There\u2019s more than enough stuff there to keep you occupied.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Plugins That Supercharge Your E-Commerce Store<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Setting the extensions aside, you can also use other WordPress plugins to further supercharge your store. Here\u2019s what you should get:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/wordpress.org\/plugins\/wordpress-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Yoast SEO<\/a>. Improve the SEO of your whole website.<\/li><li><a href=\"https:\/\/yoast.com\/wordpress\/plugins\/yoast-woocommerce-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Yoast WooCommerce SEO plugin<\/a>. Improve the SEO of your products and other areas of your e-commerce store.<\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce-multilingual\/\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce Multilingual<\/a>. Run a fully multilingual WooCommerce site.<\/li><li><a href=\"https:\/\/websitesetup.org\/contact-form-wp-website\/\">Contact Form 7<\/a>. Let your site visitors contact you directly.<\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/updraftplus\/\" target=\"_blank\" rel=\"noreferrer noopener\">UpdraftPlus<\/a>. Back up all your site content, including your products and other store data.<\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/wp-share-buttons-analytics-by-getsocial\/\" target=\"_blank\" rel=\"noreferrer noopener\">Social Share Buttons by GetSocial<\/a>. Let your buyers share your products with their friends and family through social media.<\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/google-analytics-for-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">MonsterInsights<\/a>. Integrate your site with Google Analytics.<\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/better-wp-security\/\" target=\"_blank\" rel=\"noreferrer noopener\">iThemes Security<\/a>. Security presets for your website.<\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"noreferrer noopener\">W3 Total Cache<\/a>. Speed up your website through caching.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Creating an Online Store in a Nutshell<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">As you can see, the degree of difficulty when it comes to creating your own e-commerce store with WordPress isn\u2019t high, but it will still take you a while to get through all of the steps above \u2013 probably an afternoon or two.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s still incredible considering that just, say, five years ago you would need to hire a developer and pay them north of $5,000 to get something similar created. Now you can do everything yourself!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anyway, to help you get through all the tasks required,&nbsp;<strong>here\u2019s a cut-out-and-keep checklist:<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Before You Begin<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/interwebsa.com\/domains\">Get a domain name<\/a>,&nbsp;<a href=\"https:\/\/interwebsa.com\/hosting\">sign up for web hosting<\/a>, get a working&nbsp;<a href=\"https:\/\/interwebsa.com\/blog\/guides\/how-to-install-wordpress-2\/\">WordPress install running<\/a>.<\/li><li>Make sure that your new blank WordPress site works properly (no obvious errors&nbsp;popping up, etc.).<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Installing WooCommerce<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Install and activate the main WooCommerce plugin.<\/li><li>Go through the WooCommerce setup wizard, paying close attention to:<ul><li>Getting the four required pages created&nbsp;<em>(Shop, Cart, Checkout, My Account).<\/em><\/li><li>Setting up the store locale.<\/li><li>Setting up sales tax and shipping.<\/li><li>Picking initial payment methods.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Products<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Add most (or all) of your products or product categories to the store.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Design<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Select the right WordPress theme for your e-commerce store. Go either with your existing theme or browse through other possibilities.&nbsp;Review the rules of e-commerce store design when doing so.<\/li><li>Adjust your Shop page.<\/li><li>Adjust individual product pages.<\/li><li>Adjust the Cart page.<\/li><li>Adjust the Checkout page.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Extensions<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Install the payment gateways that you want to use.<\/li><li>Consider some of the shipping extensions.<\/li><li>Consider an accounting extension.<\/li><li>Browse through other&nbsp;<a href=\"https:\/\/woocommerce.com\/product-category\/woocommerce-extensions\/\" target=\"_blank\" rel=\"noreferrer noopener\">extensions<\/a>&nbsp;and the&nbsp;<a href=\"https:\/\/woocommerce.com\/product-category\/woocommerce-extensions\/free-extensions\/\" target=\"_blank\" rel=\"noreferrer noopener\">free category<\/a>.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Plugins<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Consider installing&nbsp;<a href=\"https:\/\/websitesetup.org\/best-popular-wordpress-plugins\/\">all of the plugins<\/a>&nbsp;that will supercharge your e-commerce store:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Yoast SEO<\/li><li>Yoast WooCommerce SEO<\/li><li>WooCommerce Multilingual<\/li><li>Contact Form 7<\/li><li>UpdraftPlus<\/li><li>Social Share Buttons by GetSocial<\/li><li>MonsterInsights<\/li><li>iThemes Security<\/li><li>W3 Total Cache.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we\u2019ll show you (step-by-step) how to set up an online store using WooCommerce and WordPress where you can sell both physical and digital products\/services. WooCommerce is a free plugin that is simple and straightforward. In a sentence, WooCommerce is the best way to turn your WordPress website into a fully functional e-commerce [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1330,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[76,67],"tags":[52,53,54,55,56,8,57,59,72,60,61,62,63,64,65,66],"class_list":["post-1311","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-tips","category-wordpress-guides","tag-co-za","tag-com","tag-affordable","tag-cheap","tag-cpanel","tag-development","tag-domain","tag-hosting","tag-interweb","tag-joomla","tag-registration","tag-reseller","tag-shared","tag-south-africa","tag-website","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/interwebdev.co.za\/index.php\/wp-json\/wp\/v2\/posts\/1311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/interwebdev.co.za\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/interwebdev.co.za\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/interwebdev.co.za\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/interwebdev.co.za\/index.php\/wp-json\/wp\/v2\/comments?post=1311"}],"version-history":[{"count":0,"href":"https:\/\/interwebdev.co.za\/index.php\/wp-json\/wp\/v2\/posts\/1311\/revisions"}],"wp:attachment":[{"href":"https:\/\/interwebdev.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=1311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/interwebdev.co.za\/index.php\/wp-json\/wp\/v2\/categories?post=1311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/interwebdev.co.za\/index.php\/wp-json\/wp\/v2\/tags?post=1311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}