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!
More...
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.
Search for the WooCommerce plugin in the "Add Plugins" area of your WordPress dashboard.
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:
- Shop
- Cart
- Checkout
- 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:
Once the WooCommerce plugin is installed on your site, the Thrive Theme Builder Site Setup Wizard has an entire section devoted to getting your most important store pages up and running 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:
Thrive Theme Builder has several templates for you to choose from. Your current default templates are labeled with a purple banner.
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.
Make sure the Top Section is highlighted in the breadcrumbs, and click "Choose a Ready-Made Design" in the Top Section options.
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.
Easily customize the information shown on your product pages using the Product Display Options.
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:
Once the WooCommerce plugin is activated on your site, the Thrive Editor provides 10 WooCommerce Widget elements for you to design your Thrive Theme Builder templates, Thrive Architect landing pages and blog content with.
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!
Click on the "Original Shop" tab to access more Shop templates.
Our Shop templates make it easy to change the look of your Shop page in only a few clicks.
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!
I have been using woo-commerce with thrive themes !!
A really good overview of the process of setting up one’s Woocommerce shop. I like your “how-to” videos and this one saved me a lot of time to figure it all out myself.
Thank you
Thank you! Great tutorial, it saves a lot of time to figure it all out!
One question though: how do you edit the header menu WITH the cart option? Unfortunately you did not explain :(.
Thank you for this.
Is there a woocommerce Thrive Apprentice integration in the works, too? 🙂
Yes that’s definitely on the roadmap
Can you give an indication of when this will be released Paul?
I don’t have a release date I can give you at the moment because we’re still looking into how best to manage the integration. It will be months and not weeks, though.
+1 for this Paul. Being able to sell video courses by using WooCommerce and Thrive Apprentice is something I’m very keen to implement. Looking forward to it! Thank you.
are you planning to add an option of Ajax sliding cart, aka the ‘shopify’ style?
Also would be cool to have an option of showing a ‘mini-cart’ icon in the header, with ability to show/hide # of products and/or subtotal
Yes that’s actually being developed at the moment and will be released on the 12th August
Why is ThriveThemes WooCom integration NOT intended for a larger store? Is it too slow?
It’s not about speed, but when you have a large store, you usually need a lot of specialized features to help with managing that.
For example, if you have thousands of products, you probably want some quite advanced search and filtering system to help your visitors find what they’re looking for.
These kinds of advanced options aren’t really part of WooCommerce core, the platform relies on extensions and themes providing that kind of extra functionality. At this point, we focused on having a solid base and have all native WooCommerce functions working correctly within Thrive Theme Builder, but haven’t built our own fancy extra things to add on top of that.
Our current features will work for most small shops, but you will not find all the bells and whistles that are included in some themes that are specialized and completely dedicated to WooCommerce.
We do have some awesome improvements on our roadmap though 😉
Great work you guys have done!
I would disagree though with the notion of ‘no need to change the cart and checkout content’. One may want to change the address labels, add a custom field, or move the ‘coupon’ field to different section on the page.
Hey, this looks great, thanks for making this easier. However, I have a question. I get what your theme does but, how do I connect all this with actual products? I get the digital aspect of downloadable products, and I get if you have your own product line where you ship from your home or office, but, what about other people physical products? How does one gather and connect with other people physical products and have the manufacture distribute and mail the product (like with Aliexpress etc)?
My thoughts so far …
1) A dynamic cart icon
a) Shows number of items in the cart
b) Upon click or hover shows a drop-down list of the items with images
2) A robust search with the options to search for products, posts and pages and to be able to prioritize them in the admin
3) More control over the product page content
a) Like being able to change the star rating color and button colors
b) Set the width of the description (which I know I can do in Architect but would like to do at a theme level)
c) Remove the the reviews from the tab and have choice about where to place them (I see that I may be able to do this with a widget).
4) Dynamic “My Account” icon with a drop-down menu showing the account subpages – downloads, orders, etc.
5) Product category display options for “Mason Grid” and “List Layout” (Like Amazon).
Hello Al,
Thank you for your feedback. Since we initially posted this article, we’ve made quite a lot of improvements to our WooCommerce integration.
Among other improvements we now have:
– a dynamic cart element that will show the products added to the cart,
– shop and product categories elements in Thrive Architect to allow you to easily display a selection of products or product categories,
– an off-screen sidebar option that makes displaying product filters pretty flexible,
– better visual editing (styling) for product, checkout and cart templates.
And there’s more on the roadmap 🙂
Great stuf, helped me a lot to find the right templates. Was already wondering were the saved templates went. But now I know, also for the templates of the single products is handy to know.
Is there any change the varation products wil get radio buttons to choose the selected variation?
It is already in the category list widget.
Very Happy with the work you (as a team) are putting to it!
This was great! Thank you. I was having trouble setting up my store and this walked me right through a few of the parts that I was stuck on. I’ve got it now.
Hope you guys are also planning on adding the Thrive Architect ‘shop’ widget to regular pages (ex. landing pages etc), so that we can add a product grid (with filtering options)
One way around this now – is to use Post List and set filters to products. The only problem with that option is – there is no ADD TO CART button/option.
One has to click ‘read more’ , which redirects to a product page and then it is possible to ‘add to cart’ from there. Unneeded extra friction if you ask me:)
This is coming soon 🙂
Any way to move “add to cart” button to above the ‘short-description’ location on a product page?
So that it will look like:
Product Title
Product Price
“ADD TO CART” Button with QTY adjustment
Product Description (‘short description’)
Right now ADD to Cart Button appears below the short-description, in which case if the description is long, a customer needs to scroll all the way down which leads to a higher chance of abandonment.
I think one way to elegantly implement this – is to make the “product display options” on the left side draggable up and down
P.S. While on the same topic – it would be great to be able to customize the “Add to Cart” button text, so for example we can change it to “add to basket” or “purchase now”
—
Also support the list of points Al has posted above. Thanks!
Thank you for your suggestions Russell, we’re exploring solutions for more customization options. I can’t make any promises yet, but it’s on our radar to improve this aspect where possible.
Great Matt Thank you
Have you noticed a problem with Thrive Theme Builder recently when trying to replace either a top or bottom section?
After selecting an alternative for one of these sections it goes back to the page and ‘hangs’ with the 4 squares just constantly revolving as if waiting for it to load.
Replacing a header or footer is fine – it’s just the top and bottom sections that ‘hang’
Any ideas…?
Thank you
Hi Dave,
First guess would be a caching issue but if you cleared cache (both page and plugin related) and it still persists, please reach out to our support via the forum, they will gladly have a look at your site and see if there are any conflicts etc.
Hi Hanne
Do you mean using a plugin like WP-Optimize to clear cache?
Actually it allows a ‘Replace’ from any ‘My Saved Sections’ but will not load any ‘Default Sections’
No conflicts as all other plugins disabled and tried in other browsers. Reset, restarted browsers & computer but still does it
Are you using WPX cloud as your hosting provider?
Paul, Not using WPX, using normal Hostgator shared servers. How do you clear wordpress cache yourself?
ok thanks
That’s strange behavior – it could be a number of things. Let our support team know and we’ll do some digging and get to the bottom of what’s causing this for you.
Can you update what elements we can add to different pages with the theme builder.
I was wanting to add woocommerce products to the blog category pages but all the woocommerve elements were not an option to add, only the normal blog page elements.
Would be nice to display products on blog pages
Would also be nice to be able to add elements between blogs on blog category pages. Currently can’t do this.
I know theme builder and woocommerce is fairly new so great work so fair guys.
When are you going to release a new theme besides Shapeshift?
Will you add more Woocommerce elements such as Sale Items, Most Popular, Highest Rate that we can add to pages?
Congratulations on a basic WooCommerce integration. I look forward to seeing more advanced features. Perhaps Leads integrated, it is a form builder afterall. Artitect with complete integration with WooCommerce, just think of ways you could design your product page then. Maybe even Quiz builder. Endless possibilities. Anyway, we must wait and see. ????
You’re right Bonnie – lots of marketing focused WooCommerce avenues are on the horizon!
Please consider adding the following features:
1. Setting up custom Thank-You pages.
2. Split testing multiple versions of product pages, shop pages, cart and checkout pages.
Thanks, Thrive Themes!
Facing an issue.
On the cart/checkout pages (or even the product pages, sometimes) we don’t want the sidebars.
When the page is being edited, the sidebar automatically comes and the “hide sidebar” option does not work.
So, I am deleting all the sidebar elements, in the responsive settings, hiding the section on desktop and tablet.
Please look into this. Thanks.
Thanks for reporting this – it was a known issue and should be fixed in the latest release.
Great thank you , worked a dream, One item to add to the video would be to create the pages for account cart and checkout to add to the advanced section of woo com.
Thank you !
So excited that woocommerce integration is here! Been waiting for this for ages and can’t wait to stop using Elementor, just waiting for a few extra features before I will be able to fully use Thrive for woocommerce.
A few requests/suggestions:
I would LOVE to see a product carousel element with the ability to select products to appear in the carousel manually or bring them in dynamically using filters.
A cart button showing # items in cart or $. A pop out mini cart would be awesome too.
Some template blocks for featuring products (you have some blocks now but they don’t link to woocommerce products so aren’t dynamic)
Also, I currently offer products with many (sometimes 50) different colour options with different prices and for this it is useful to show the variations in a table with prices and add to cart button so people can view all and add multiple to the cart at the same time – A way to dynamically add product variations to a table or something like that would be awesome.
Being able to move layout elements around on the product page to create your complete own design for the page would be great. The same for the checkout fields.
I would also love in the future some more unique product page layout templates that are more like sales pages.
I am currently using CartFlows to design these pages and this allows me to also create a custom cart page and thank-you page which is awesome, and it would be great to be able to do this all within thrive.
I know you are against sliders, but they do serve a purpose and is a major missing piece…
Thank-you and can’t wait to see what is coming in future releases!!!
I just wanted to say, as a Thrive Themes member for a few years now, when my membership is close to coming up, due to the currency exchange rate between the US and Canada, I always look at whether or not it makes financial sense to re-subscribe for another year. And I have to say, you have always made this an easy YES! I love the Thrive Themes team and am very grateful to all of you for allowing me to focus on the business rather than what I used to do (which I still learn about on Udemy), which was hand-coding…everything. Thank you!
One problem that I have with the shop page is that people have the option to “add to cart” but there’s so little information on the shop page about the product (just the name and price), that it seems people won’t want to buy without knowing more. I realize that people can get to the product description if they click on the product image, but that’s not obvious. Is there a way to add a “learn more” button that will direct people to the individual product page?
Hello Rebecca, WooCommerce controls that aspect and will display the most appropriate call to action. For example for variable products where you need to make some choices before adding to cart, it automatically displays a link to the product page instead of add to cart.
You can choose to hide the add to cart button when editing the template in Thrive Theme Builder. But I’d first recommend trying to get some data about how visitors interact with it. Maybe via Google Analytics or Hotjar. On the sites I manage, I have the add to cart available on the shop page and it’s actually working quite well…but of course, it depends on the product/audience 🙂
I will also make a note of this as a possible future improvement.
An additional section that would be helpful for me, would be how to make the WooCommerce Store your home page, and not use the generated home page from the Thrive Theme Builder
Is there a way you can specify a specific order that you want the products to be organized on the shop page? For example, there are 3 products I’d like at the “top of the shop.” Thanks! (Kind of like you can do with a post list.)
It seems right now that even when I select the order “By Published Date” and select “Newest” as first, it does the opposite??
Hi Andy, you can set a custom order by going to your main Products page in WordPress, go to the Sorting tab, which at the top of the page under the Export button (it’s easy to miss). Once you are in the sorting tab, you can click and drag the products around to place them in a custom order.
Then, go to your Default WooCommerce Shop template, select the Shop element (make sure Shop is highlighted in the breadcrumbs), and look in the Product List Options tab on the left. Under “Order by” select Menu Order. And that should do it! 🙂
Yayyyy! Thanks for this! Worked perfectly.
I’d like to use the full page width without a sidebar. Can the “Categories widget” and/or “Search widget” be used above the products on the sales and products pages and not in the sidebar?
Thanks
Yes you can do that. Basically you have full control over the whole template, so you can put widgets in the sidebar, above or below the WooCommerce shop and product content. You have full control.
Poor Front-End Product Information Display – my biggest objection with Woo, Shopify and all the other mainstream cart commerce solutions. I’m always left non-plussed and confused as to they are so popular and embedded in the online commerce world – at least without high-level, under-hood custom programming.
As a shopper scans, there needs to be an attractive initial display of product information(to engage curiosity and the respect the buying process) and Woo, Shopify, etc still have front-end UI designs that are flat, uninspiring and still look similar to what they appeared 8 years ago – at least to my eye. Just not a lot of evolution in terms of UI/UX in this sector.
Words persuade and then sell before product picture, in my 25 years of online selling experience.
Am I totally missing something? I’m ready to be wrong. 😀
Please Bruce which platform would you recommend as alternative to address this concern of yours please. I’m about to decide on the platform to use for a major ecommerce project at hand
Matt, I know it has been a while since you put this post up but I just wanted to say thank you because I just used it over the course of a couple of days to build my first e-commerce store using Thrive Theme Builder. I would say it probably saved me a number of days and a lot of frustration by being able to follow all the steps correctly and also it was great to learn all your tips about building the store and using the templates. So again, can’t thank you enough. Well done.
It might be good to add to the tutorial a heads-up that not all of the shop and product templates show product ratings or reviews, or allow a user to enter a product review. I wasted a bunch of time trying to figure out why I could not find a way to enter a product review, or see a product’s “star rating”.
This is a terribly bad template. I keep working on the header and shop header for hours. The templates are totally unstable. WHen I edit the shop homepage, the wordpress hope pages changes as well. And there is no clear consistency in the header and footer for both.
I’m sorry to hear that you’re running into issues, can you please reach out to our support team so they can look into what’s going on? What you describe shouldn’t be happening, so it might be something local.
I’m still waiting for a woocommerce – Thrive Apprentice integration. Is it coming soon?
Yes it should be ready by the end of quarter 1, 2021.
Wohooo – Great. Are you in planing to integrate apprentice with woocommerce? Would be Great 🙂
Q. Where can I buy the high-converting purple mug? :D, yes I totally need Thrive sway now
I want one too! 😀
Thank you! Very clear and easy to follow.
You’re welcome, Sue!
Hello Thrive Team,
I sell Excel add-ins for desktop versions of Microsoft Excel.
Have you had any experience with the WooCommerce ‘Software Add-on’ and ‘Subscriptions Add-On for WooCommerce’?
Alternatively, could you point me to any reliable resources to facilitate selling desktop software via subscription with Thrive Builder & WooCommerce?
Thanks, Marcus
Hello. I’m looking for and didn’t see in the topics how to add shirts with different prices at different sizes on thrive themes in Woocommerce.
I understand how to add attributes and list with the variables as far as color.
But my shirts all have different prices at different sizes and I don’t know how to set that up.
Any assistance would be most appreciated.
BTW, you do have some great tutorials!
Hi Shelah, adding variations of products should be the same in WooCommerce with or without Thrive Themes. WooCommerce has an excellent writeup on how to accomplish this: https://docs.woocommerce.com/document/variable-product/
Glad you like our tutorials! 🙂
As Woocommerce adds lots of scripts, styles, cart fragments, and plugins… would you recommend installing it in a sub-domain to keep the best performance for both (store and content)?
My site is all made with TT Theme and Plugins, but doesn’t perform very well on mobiles – tested with Google Page Speed and GTMetrix 🙁
Hello Robson, if you have other reasons to keep your store separate, then it might work for you, but it’s not really a general recommendation to keep your store on a subdomain. That would mean managing two sites, which can be a considerable effort, especially if you need them to be connected to each other in any way. The extra resources loaded by WooCommerce don’t usually have a big enough impact on the other areas of your site to justify the management challenges that come with having separate instances.
Hello!
Thanks for this,
Is it possible to display the cart AND checkout on the same page?
And is it also possible to have a snippet of the product description on the shop page?
Thanks!
This is great! One question though: How do I edit the “Thank You Page” after a customer has purchased? The font is way too big and the columns need adjusting…