fbpx

In this WordPress eCommerce website tutorial 2021 I’ll show you how to build a full eCommerce website with 100% free tools.

Building an eCommerce website has never been more important. In this WordPress Ecommerce website tutorial, I’ll take you through all of the steps to build a fast loading, great looking website without any jargon or tech talk.

You’ll learn how to build, optimise and launch your new online store using the power of WordPress, WooCommerce, Gutenberg and a selection of powerful and free add-ons.

So, if you’re ready to get started with this WordPress Ecommerce Website Tutorial, let’s go!

By the time you’ve completed this WooCommerce Tutorial you’ll be able to do the following:

✅ Buy hosting and setup a domain
✅ Add a free SSL certificate to your hosting account
✅ Install WordPress and WooCommerce
✅ Install and setup the free Blocksy WordPress theme
✅ Add your first products
✅ Add the Stripe payment gateway
✅ Setup WooCommerce taxes and shipping
✅ Customize the Blocksy theme
✅ Add additional product options
✅ Understand and use basic SEO
✅ And much more….

✅ WooCommerce Playlist: https://www.youtube.com/playlist?list=PLTbrc9HXDstqWk0Kerkj7GYLG2GoF1BPd
✅ Shipping tutorial: https://www.youtube.com/watch?v=4yuho7zaObI
✅ Product variations: https://www.youtube.com/watch?v=IJjoJ408Gag
✅ Set up taxes: https://www.youtube.com/watch?v=WgQla4kD_hc
✅ SEO for beginners: https://www.youtube.com/watch?v=d6v0gkEoqII
✅ Product options: https://www.youtube.com/watch?v=EhWpH5HY5pQ

HOSTING, THEME & PLUGINS
✅ SiteGround: https://jo.my/sgwptuts
✅ Blocksy: https://jo.my/y67ten
✅ Colour Generator: https://palx.jxnblk.com/
✅ Stackable: https://jo.my/stackable

✅ Free eBook: https://wptuts.co.uk/10-things-to-do-before-launching-a-wordpress-website/

TIMESTAMPS

00:00:00 – Introduction
00:00:53 – What we’re going to be building
00:01:45 – Setting up hosting & domain
00:10:08 – Installing WordPress & WooCommerce
00:17:10 – Setting up WooCommerce shipping
00:20:28 – Setting up taxes
00:22:48 – Setting up Stripe payment gateway
00:25:12 – Setting up a WooCommerce simple product
00:34:01 – Installing Blocksy theme
00:36:52 – Installing design plugins
00:37:54 – Setting up the Global Colours in Blocksy
00:41:32 – Setting up Global Typography in Blocksy
00:43:38 – Building the headers and footers in Blocksy
01:02:13 – Building the homepage with Stackable Blocks for Gutenberg
01:25:01 – Additional Customiser design tweaks
01:29:10 – Styling the WooCommerce pages in Blocksy
01:37:34 – Applying a product filter to the website
01:44:31 – Additional custom product options
01:51:12 – PDF Shipping and Invoices for WooCommerce
01:54:10 – SEO with Rank Math free
02:01:02 – Speed test and optimisation
02:07:45 – What next?

CUSTOM CSS CODE

.woocommerce div.product .entry-summary td
margin-bottom: 17px !important;
display: block;
border-width: 0px;
border-color: rgb(255, 255, 255);
padding-left: 0px;
padding-top: 5px;
padding-bottom: 5px;

.woocommerce div.product form.cart
border-style: none;
border-width: 0px;
padding-top: 5px;
margin-top: 16px;

.woocommerce div.product .entry-summary table
border-style: none;

.woocommerce div.product .entry-summary p {

Take your WordPress website and skills to the next level!

► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.

► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: https://jo.my/vividpro (use WPTUTS30 for 30% off)
✅ Project Huddle: https://jo.my/etafyp (WPTUTS for 20% off – Exclusive)

► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: https://jo.my/1feeng8
✅ SiteGround: https://jo.my/sgwptuts

► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: https://jo.my/1s0t2s2
✅ Brizy Pro: https://bit.ly/2Ji97r8
✅ DIVI 3 Page Builder: http://bit.ly/2HiiDcE

► WORDPRESS THEMES ◄
✅ GeneratePress Premium: http://bit.ly/2Ydn1SE
✅ OCEANWP: http://bit.ly/2fRHBr0
✅ DIVI Theme: http://bit.ly/2G8JMiA
✅ Astra Pro: http://bit.ly/2zruoKn

► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3: http://bit.ly/2G0G1vB
✅ CSSHERO: http://bit.ly/2qbrRl6

► WORDPRESS PLUGINS ◄

✅ SEOPress Pro: https://jo.my/seopress

► SUBSCRIBE ◄
http://bit.ly/2rX7rhu

► LETS CONNECT: ◄
👉 Twitter: https://twitter.com/WPTutz
👉 Facebook Group: https://wptuts.co.uk/facebook

SUPPORT: Our website offers additional information and perks. Please check it out! http://wptuts.co.uk

9 thoughts on “WordPress eCommerce Website Tutorial 2021 | All Free

  1. Just a heads up, you’ve accidentally missed out the bottom part of your custom CSS in your description. I believe it’s meant to include the following CSS:
    margin-bottom: 10px;
    }
    Great tutorial, thanks!

  2. For some reason the Block Navigation plugin causes my admin panel to crash when I try to edit a page. I deactivated the plugin and everything worked fine. If anyone knows how to solve this issue, please let me know. Thanks!

  3. The ‘Order by’ section is missing from my widget area when customizing the Product Categories in the footer. Lots of things seem to be missing yet I installed the same plugins as per the tutorial?

  4. Hi

    I’m trying to integrate the “card” and the following error keep popping out…

    “The editor has encountered an unexpected error”

    your prompt support is much appreciated

Comments are closed.