WooCommerce is an open-source plugin that allows WordPress users to turn their website into an eCommerce website without any additional cost. WooCommerce provides everything you might need to set up a basic eCommerce store. Some of the features includes:-
- List and sell unlimited products
- Default add to cart page, checkout page, and client area
- Payment integration with PayPal, Stripe, and more
- Promo code creation
- Mailchimp integration
- Dynamic shipping fee based on regions
- Sales & Order Analytics
- Many many more
How to Start Using WooCommerce?
Step 1 – Installing & Setting up WooCommerce
- Install and Activate WooCommerce
2. Fill in all the information requested
3. For Product Types, select “Physical Products”
- For “Theme”, you can click on “Skip this step” as we will be guiding you how to install themes either from Blocksy or Kadence.
Step 2 – Installing Theme for your WooCommerce Store
The next step is to install a theme for your WooCommerce store. Having a WordPress theme is important and it will influence your website appearance and speed performance. In this tutorial, we will be using Kadence theme as an example. If you wish to survey other alternatives, feel free to check out our article on the 5 best WordPress themes to use in 2021.
To install Kadence theme:-
- Go to Appearance > Themes > Add New
- Search for Kadence, then click “Install” and “Activate”
- Then, delete all the unused themes by clicking on “Theme Details” > “Delete”. Once done, you should remain with only 1 theme, which is Kadence theme.
Step 3 – Installing eCommerce Starter Sites by Kadence
The next thing we want to do is to install the free eCommerce Starter Sites provided by Kadence. To do so:-
- Go to “Appearance” > “Kadence” > “Starter Templates”
- Click on “Install Kadence Starter Templates”
- Then, it will prompt you to select a page builder. Select “Elementor”
- Next, scroll through all the starter templates and search for “Print Shop”
- Click on “Print Shop”, then click “Full Sites”. What this does is that it will provide a full website design based on the starter template you’ve selected.
- Once it’s successfully imported, you can then take a look at your website. Beautiful right?
P.s. Don’t worry, you can change the image and text to suit your business with Elementor later on.
Step 4 – Uploading your products into WooCommerce
Now it’s time to upload your products into WooCommerce. Before doing so, here are a few tips to ensure that your website remains fast while using WooCommerce:-
- Compress your image size using tools like TingPNG and WebsitePlanet
- Use jpg image file
- Use the correct dimensions for your product image (recommendations: 500px x 500px)
Because we have uploaded the starter sites from Kadence theme, your WooCommerce store will have some dummy products. You can leave it there until your product is fully added in. To add your products into WooCommerce:-
- Go to “Products” > “Add New” and you’ll be able to see something like this.
- Fill in your product name and a full product description like the image shown below.
- Then, create and select a suitable category for the product. For my case, I have created “Gadgets” as my product category.
- Next, upload your product image (recommended 500px x 500px)
- Moving on, you can now set your preferred price range for the product. Note: Your regular price must be higher than your sale price.
- Then, add a short description for the product. Allowing visitors to easily understand what benefit they can get from the product you are selling.
7. If you have more than 1 image for the product, you can add in more on “Product Gallery” just like the image below.
8. Once done, click “Update” and you can preview the changes. If done correctly, you should be able to see something like the image below.
Step 5 – Editing page content to fit your business
This step is relatively simple if you are happy with the design as all you need to do is make some minor changes to the text, images, and logo to fit your brand. We’ll start with the website logo.
P.s. I will not be going into detail for this step.
To change the logo:-
- Go to “Appearance” > “Customise” > “Header” > “Logo”
- Then, change it to your own business logo.
Note: You can also change the background and text to your brand color as well using Kadence header builder.
- Once done, click “Publish” and have a look at the changes.
To make changes to your page content:-
- Visit the page you wish to edit, and click “Edit with Elementor”
2. All you have to do is click on the text you wish to change, then modify it to fit your business.
- Once you’re done with it, click “Update”
After you’re done modifying your page content. You’re ready for the next step.
Step 6 – Adding shipping locations
The next step is to set up your supported shipping locations and the shipping fees. To do so:-
- Go to “WooCommerce” > “Settings” > “Shipping” > “Add Shipping Zone”
- Fill in your zone name, zone regions, and your shipping methods. You can set a flat rate for your shipping if you want to make things simple.
- Then, click “Save Changes”
Step 7 – Payment integration
Now comes the most important part among all, to set up integration with payment gateway such as PayPal and Stripe. PayPal and Stripe are two well known and reliable payment gateway we can use for our WooCommerce website.
To integrate with PayPal, all you have to do is:-
- Go to “Plugins” > “Add New” , and search for “WooCommerce paypal payments”. Then, click install.
- After activating, you’ll be redirected to a page to connect to your existing PayPal account.
- Click on “Connect to PayPal” and follow the simple steps provided by PayPal.
Note: You would need to have a PayPal Business account to have a smoother payment experience.
Step 8 – Customising your transactional email
The next step is to customise the email your customer receives after making a purchase with your company. This step is optional, but if you wish to have a stronger branding, here is what you need to do:-
- Go to “WooCommerce” > “Settings” > “Emails”
- Then, select the email you wish to customise. Once you’ve decided, then click “Manage”
You are able to modify the email subject, email headings, and a short content.
If you manage to complete all the steps above, congratulations! You did it!
You can now test out making an order on your new WooCommerce website and experience the entire order flow by yourself.
I hope this article will give you a clear direction on how you can build an eCommerce website with WooCommerce from the start to the end. Thanks for your time reading this tutorial, if you’re interested in learning more about WordPress, here are some articles you may be interested in:-