We are happy to be back with our Monday Masterclasses after a short break. This week we will take you through the exciting process of building a WordPress online store with WooCommerce.
Building an online store website with WooCommerce might seem like a daunting task even for experienced developers. However, like many other technically complex tasks, understanding how the process works, and going over it a few times, does make it much easier.
This is the first in a series dedicated to working with WooCommerce. In this Monday Masterclass, we’ll be going through the whole process from setting up our WooCommerce account to building and launching our store.
Setting up Your WooCommerce Store
Download and install the WooCommerce plugin. As with any other WordPress plugin, the installation process is as simple as a couple of clicks.
Once you’ve installed the plugin, the setup wizard will come up. The intuitive, welcoming UI makes this part very easy. On the first page, you’ll need to register by adding your contact details and choosing a plan. For the purpose of this tutorial, we’ve selected the plan that sells both physical and digital products. While we are creating an online store to sell digital copies of my new book, I may want to sell a hard copy in the future.
Next, we’ll need to choose and link our preferred payment plan, in this case, is a PayPal account. Defining the size and weight of the product is fairly straight forward. We then have the option to use JetPack — which is a service that encompasses several tools for security, performance, and the management of WordPress sites. Lastly, before proceeding, because we’re only going to be selling the one product, we’ll want to redirect the users to the checkout or cart page. This can be done in the WooCommerce Settings tab.
Now let’s move on to adding and defining our products.
Adding a Product
To add a product, we need to go to the Dashboard, and below the WooCommerce tab, we’ll add a new product and then add its name. When we do this we’ll get a default permalink, which is a bit messy, so we recommend changing by selecting the Custom Structure, typing /%productname%/ in the textbox, and then clicking save.
What this option does is tell WordPress to use the name of the product in the permalink’s slug line, which will naturally make our page look more professional.
Now we should add some info about the product and about the author.
Adding Product Details
There is no end to what information you can add about your product, but there are several basic requirements that you must add, and we are going to cover them.
Adding Product Data
We’ll start by defining the product data. In this case, our product is a Simple product, meaning that there are no customization options and no changes can be made to the product. The book will be a Downloadable product — a PDF file and the price will be $18 per copy. Next, we’ll have to upload the digital copy of the product and give it a name.
Setting the Download Limit
To avoid improper use of our digital product, we need to set a download limit, which we decided to set to 1 with an expiration date of 30 days. In the very same window, you can see additional options, related to the physical shipping of products, like inventory, etc.
Adding Product Description
In addition to the above, we also need to add a short description of the product. This will be displayed at the top half of the page, alongside the image of the product. We’ll also add some quotes from reviews using the blockquote format option and put them in bold to make them look a little nicer.
Adding an Image
Moving over to the right-hand side of our product form. To show our product and make it more appealing, we need to add an image of it. We’ll do so by inserting the image of our book. The default settings are cropping the image and this can result in an unsatisfying result. The way to repair this in WooCommerce 3.3 is to go to Appearance on the WordPress dashboard and select Customize. Then select WooCommerce and then Product Image. In the image options in the top left corner, select the Uncropped option, and click Publish.
We can further fill in fields like tags and categories. These are absolutely necessary for better user experience, as it will make navigating through your products that much easier. We can easily add tags, but you must remember to separate them with a comma like this: book, autobiography, WordPress, etc. Adding categories is not equally easy.
Creating the Store
The last thing that needs setting up is the store. The store is a web-page or a place to display the goods for sale. We’ll do this by adding a new page and choosing the Hello Theme, as it gives the most flexibility and speed. In the Settings, we’ll hide the page title and use a template that we prepared earlier.
Now we need to add a section that will allow visitors to purchase our product. The first thing we need to do is add an anchor widget and name it ‘Order.’ Then, we’ll choose the ‘Order Now’ button and add the name of the anchor to the link box. We should to this to any ‘Order Now’ button on the page.
Next, we’ll add a section with two columns on our page. In the left column, we’ll place the image, and in the right column, we’ll place the header widget, align it to center and duplicate it. In the Top Heading, we’ll type the title of the book, and in the next heading, we’ll type the price of our product.
Lastly, we need to add the ‘Custom Add to Cart’ WooCommerce widget that was added to our library of widgets and customize it. We will also want to make sure that it’s a functional button by selecting the correct product in the Product Section of the Content tab.
That’s all, folks. We have created a shopping cart page, and a checkout page, and they are set and ready to go. Make sure that you optimize them to other devices via the responsive view feature.
We’ve gone through the process of creating an e-commerce store with the WooCommerce plugin with a few easy steps. Our store is ready. Everything is up and running, and it’s just a matter of waiting for the orders to come storming in and the new fictional ebook – ‘Tell me why I freakin love Mondays!’ to become an international bestseller.
WooCommerce is very intuitive in its design and very easy to use. We’ve covered the basics, but there is still much to cover, and this is only the first part of a series dedicated to WooCommerce.
We hope this was helpful and that in the near future, we’ll see a significant increase in e-commerce sites.