How To Build a WooCommerce Store from Scratch with Thrive Theme Builder
Interested in learning how to build a gorgeous and conversion focused WooCommerce store from scratch... fast?
Then you’re going to love the new WooCommerce integration we created inside Thrive Theme Builder — built especially for small business shop owners!
Our Thrive Theme Builder integration with WooCommerce is custom tailored for the DIY solopreneur who wants to sell digital downloads, merchandise or even one-off products in an eCommerce store format.
However, this WooCommerce integration is not meant for store owners who want to create massive online shops selling countless numbers of products.
But if you're a small biz shop owner who wants to get started building an online shop with the most popular eCommerce plugin for WordPress, then make sure to watch this step-by-step tutorial video.
You'll have a WooCommerce store launched — in less than an hour — using nothing but the combined power of Thrive Theme Builder and WooCommerce!
Install the WooCommerce Plugin (0:55)
Getting the WooCommerce plugin integrated with your Thrive Theme Builder built WordPress site is easy.
However, if you haven't built a WordPress site with Thrive Theme Builder yet, make sure to watch this Website from Scratch tutorial video first:
Assuming you are up and running with a Thrive Theme Builder site already, then begin by installing and activating the WooCommerce plugin.
Create & Assign Your WooCommerce Shop Page (1:13)
After WooCommerce is installed and activated on your site, you'll need to create and publish a new page on your site called "Shop" so you can assign it as your WooCommerce storefront.
Do this by clicking on the WooCommerce tab in the left sidebar of the WordPress dashboard, then clicking on Settings >> Products.
Finally, select this new "Shop" option as your "Shop page" in the dropdown box followed by pressing save:
Let's continue by creating your store categories and products within the WooCommerce dashboard...
Create Your WooCommerce Store Categories (2:40) & Products (4:55)
In this section of the tutorial video, you'll learn how to create each of the individual products you want to sell inside your WooCommerce store.
Create your first product by clicking on the WooCommerce Products tab found in the left sidebar of your WordPress dashboard.
If it's your first time creating a WooCommerce product, click on the purple "Create Product" button that appears (and if it's not your first time creating a WooCommerce product, just smash that "Add New" button you're already familar with).
From here, work your way through each of the product sections to add the content you'll need to describe the product, including its:
- Product Data
- Product Short description
- Thrive Theme Builder Templates
- Thrive Theme Builder Visibility
- Product Category
- Product Tag
- Product Image
- Product Gallery
To learn more about each of these sections (with the exception of the Thrive Theme Builder specific sections), you can check out WooCommerce's guided tour video on setting up new products here:
Create & Connect Your Checkout & Cart Pages (8:47)
Next, you'll need to create both a Checkout page & Cart page for your WooCommerce store. Then you'll need to connect them to your WooCommerce dashboard.
Do this by following this navigation in your WordPress dashboard:
WooCommerce tab >> Settings >> Advanced
And select your new Checkout and Cart pages in the appropriate dropdown boxes:
Follow the steps in this section of the video to make these tasks quick & easy.
Complete the WooCommerce Site Setup Wizard in Thrive Theme Builder (10:16)
Now it's time to enter the Thrive Theme Builder Site Setup Wizard.
Notice that there is an entire section of the Site Wizard now desicated to WooCommerce so you can get your Shop Homepage, Product Page Template, Cart Page and Checkout Page designed fast:
Start by selecting a Shop Page template for your online store.
Then navigate to the Templates tab of the Thrive Theme Builder dashboard to customize it.
Navigating Your WooCommerce Page Templates (12:40)
In the Templates area of the Thrive Theme Builder dashboard, filter for your new WooCommerce Shop, Product, Cart, Checkout and Account page templates by selecting "WooCommerce Templates" from the dark grey dropdown box at the top of the page.
Notice that there are multiple Shop Page (a.k.a. List Templates within the Thrive Theme Builder dashboard) , Product Page, Cart Page, Checkout Page and Account Page templates waiting for you:
Also, note that the template pages with purple banners are your default WooCommerce page templates. You can change your default template page selections by clicking on the 3 dots icon (located on the template thumbnails) and selecting the "Set as default" option that appears.
For this step, it's important to select the Shop Page template you like best and set it as your default. Once you've done that, hover your cursor over its thumbnail and click the "Edit" button that appears to open the Thrive Editor.
Customize Your Online Store Header (13:28)
So now that your Shop Page is setup and ready to start showcasing your products, how will new visitors actually be able to find their way to your store?
One way to address this issue is to create a new Header with a link to your shop:
And once your new online shop Header has been created and saved, you can choose to display it on any Thrive Theme Builder templates or site landing pages you want to.
Customize Your Shop Page & How To Use Page Section Templates (17:48)
In this section of the tutorial video, you'll see how easy it is to swap out and customize your WooCommerce page template:
Top Sections (18:15)
Sidebar Sections (20:06)
Shop Sections (22:39)
Bottom Sections (26:56)
Build & Customize Your Product Category Page Templates (29:04)
If you have different categories of products, it's a great idea to build dedicated Category Page templates for each one inside Thrive Theme Builder so you can really turn up the conversion focus.
This section of the video tutorial is going to explain exactly how to do that.
And if you're interested to learn more about how to create Category Page templates with Thrive Theme Builder for other types of content on your WordPress site, make sure to check out this video post about it here.
Create & Customize Your Product Pages (36:17)
As mentioned above, the WooCommerce integration inside Thrive Theme Builder gives you multiple Product Page templates to customize and deploy as you like within your online store.
Watch this quick overview video about the WooCommerce integration with Thrive Theme Builder to get a good feel for what those different templates look like and how you can use them across your store:
Once you select the Product Page template that works best to sell your goods, this section of the video tutorial will teach you how to modify it exactly how you want so your products always get displayed to potential customers in a unique, attractive and conversion focused way.
Customize Your Cart (41:05), Checkout (42:38) and Account (43:42) Pages
When it comes to setting up and customizing your WooCommerce Cart, Checkout and Account Pages with Thrive Theme Builder, there's not too much work you'll need to do and we don't actually recommend that you tweak much on them.
However, do watch this part of the video so you'll know what steps to take when it comes to getting these 3 important pages up and running fast.
WooCommerce Store Tutorial Recap (44:36)
This WooCommerce Store from Scratch tutorial video has covered a lot!
If you followed each step of the video, it means you now have an online WooCommerce Store up and running on your WordPress site.
So in this section of the tutorial video, let's quickly run through the complete storefront-to-checkout flow of what you've built to make sure everything is working properly.
How WooCommerce Widget Elements Work inside the Thrive Editor (46:00)
One final note...
The "Add Element" right sidebar inside the Thrive Editor now provides WooCommerce plugin users with 12 — drag & drop — WooCommerce Widget elements:
Use them to add WooCommerce functionality and designs to your Thrive Theme Builder templates, Thrive Architect landing pages and blog post content!
Watch this section of the tutorial video to learn about what each widget does and how you can use them to boost the design and WooCommerce customization of your store and website.
Ready to Build Your Online Store? (48:19)
After following this WooCommerce Store from Scratch tutorial video, it should be pretty clear just how powerful Thrive Theme Builder is when it comes to rapidly building a modern and conversion focused eCommerce shop.
Feel free to bookmark this post so you can use it as a reference whenever you need to update or modify your WooCommerce shop...
... or if you've got any questions, thoughts or comments about what you saw in the video, make sure to share them with us below.
And don't forget to let us know what other features you'd like to see in the future to make this Thrive Theme Builder + WooCommerce integration even better!