Monday Masterclass: How to Build an Online Store With WooCommerce & Elementor

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

Adding Tags

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. 

Conclusion

We’ve gone through the process of creating an ecommerce 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 ecommerce sites. 

About the Author

Simon Shocket
Simon Shocket
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’s a lot to live up to.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 885,286 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

12 Responses

  1. Thank you for the quality content.

    How can I style the Cart and Checkout pages?

    Also, I wasn’t able to change the styling of the product description tab in the product data tabs widget. I want to show the reviews tab under the product description in its separate container but there is no option to do so.

    Last, is there any way to put the quantity and Add to Cart in separate lines? It is always inline and there is not option to change it in the advanced settings I am using Elementor Pro and the Hello theme.

    Thanks again

    1. You need to create header and footer templates in Theme Builder and set the conditions to “entire site”. It worked for me. I didn’t want to have these on my home page though, so I was able to “exclude” front page again in the Conditions for the templates. A little bit tricky but doable since I am not a pro. Hope that helps.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 885,286 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.