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.
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 using nothing but the combined power of Thrive Theme Builder and WooCommerce!
Before We Begin
Getting the WooCommerce plugin integrated with your Thrive Theme Builder built WordPress site is easy.
However, there's two things you'll need to do first:
1. Get your Thrive Theme Builder site up and running. If you haven't built a WordPress site with Thrive Theme Builder yet, make sure to watch this Website from Scratch tutorial video.
2. Install and activate the WooCommerce plugin. Simply browse the WordPress plugin library, install the plugin, and activate it.
Create the Shop, Cart, Checkout, and My Account Pages (2:26)
After WooCommerce is installed and activated on your site, you'll need to create and publish four new pages on your site:
- My Account
You don't need to design these pages just yet. You just need these pages to exist so you can link them up with WooCommerce in the next step. Simply create the page, name it appropriately, and publish it.
Connect Your Pages with WooCommerce (3:20)
Next, you'll need to connect the pages that you just created with WooCommerce.
To connect the Shop page, follow this navigation in your WordPress dashboard:
WooCommerce tab >> Settings >> Products
And select your Shop page in the dropdown box:
To connect the Cart, Checkout, and My Account pages, follow this navigation in your WordPress dashboard:
WooCommerce tab >> Settings >> Advanced
And select the the appropriate pages in the appropriate dropdown boxes:
Complete the WooCommerce Site Setup Wizard in Thrive Theme Builder (4: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 dedicated to WooCommerce so you can get your Shop Header, Shop Footer, Shop Homepage, Product Page Template, Cart Page and Checkout Page designed fast:
Create Your WooCommerce Store Categories (6:51) & Products (7:59)
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 click 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, you can check out WooCommerce's guided tour video on setting up new products here:
You can also get more in-depth information regarding the Thrive Theme Builder Templates section and Thrive Theme Builder Visibility section on our help page: How to Apply Templates to Pages/Posts & Use the Related Options.
Navigating Your WooCommerce Page Templates (10:43)
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.
Customize Your Checkout Page and WooCommerce Headers (12:49)
The WooCommerce Header that you chose in the Thrive Theme Builder Site Wizard will apply to all of your WooCommerce pages.
You can make customizations that will apply to all your WooCommerce pages by clicking inside the header area and selecting the "Edit" button:
If you'd like to make customizations to the header that apply to only this particular page, you can click the "Unlink" button and proceed with making your customizations:
If you would like to choose an entirely new header just for this particular page, you can click the "Choose a Ready-Made Design" button:
To edit the design of the elements on the Checkout Page, click anywhere inside the Checkout area so that Checkout is highlighted in the breadcrumbs. Then, go to Checkout Options and click the "Edit Design" button.
You'll see that elements are grouped by appearance, so a change to one element will change all elements that share that element's design specifications.
Customize Your Cart Page & How to Choose a Different Top Section (17:02)
In this section of the tutorial video, you'll see how easy it is to swap out and customize the top section of any WooCommerce page.
Customize Your Product Pages & How to Add WooCommerce Widgets (18:11)
Like the rest of your WooCommerce templates, your Product Page template can be customized to your heart's content.
You can create a unique header, choose a specific top section, and take full control of the styles in the product section. You also have the option to show or hide product data.
Help customers browse your shop by adding WooCommerce widgets to your pages. WooCommerce widgets are available for use on any page of your website, but they're especially handy for product pages.
The "Add Element" right sidebar inside the Thrive Editor now provides WooCommerce plugin users with 10 — 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!
Customize Your Shop Page & How to Add a Sidebar (19:55)
Your Shop Page, like other WooCommerce pages, is fully customizable.
Want to change the product title color? Easy as pie.
Not a huge fan of the Shop template? Pick a new one!
If the template you've chosen doesn't include a sidebar, but you'd like to have one, simply look for the Content Area container and click the "Show Sidebar" button on the right hand side.
Then, customize your sidebar with WooCommerce widgets.
Build and Customize Product Category Page Templates (21:30)
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.
Ready to Build Your Online Store? (23:09)
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!