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!

More...

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:

Set your new Shop page in the WooCommerce dashboard. 

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:

Set your new Checkout & Cart pages in the WooCommerce dashboard.

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:

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.

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:

Select your Shop Page (a.k.a. List Template) inside the Thrive Theme Builder dashboard

Look through the "List Templates" options (i.e. Shop Page templates) & select one to become your "Default WooCommerce Shop" page.

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:

Create a new Thrive Theme Builder Header to include a link to your WooCommerce Shop Page

With Thrive Theme Builder, you can create a new Header for your website that includes a link to your Shop Page. Then you can deploy it on any templates or pages you need with just a few clicks.

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:

There are 12 WooCommerce Widget elements available for WooCommerce plugin users to use within the Thrive Editor

Once the WooCommerce plugin is activated on your site, the Thrive Editor provides 12 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!

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!

Author: Matt Totten

    Matt's a geologist turned online marketer and digital nomad. He's a Modern Manimal on a mission to cultivate a wild lifestyle – by design. When away from his tech, you can find him studying movement through practices like Aikido, AcroYoga and Barefoot Running.

  • HEMANT says:

    I have been using woo-commerce with thrive themes !!

  • Barbara says:

    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

  • Ria says:

    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 :(.

  • Anna says:

    Thank you for this.

    Is there a woocommerce Thrive Apprentice integration in the works, too? :-)

    • Yes that’s definitely on the roadmap

      • Maria Dennis says:

        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.

  • Russell S says:

    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

  • Al says:

    Why is ThriveThemes WooCom integration NOT intended for a larger store? Is it too slow?

    • Lorant says:

      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 ;)

  • Russell S says:

    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.

  • Luis Garcia says:

    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)?

  • Al says:

    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).

  • 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!

  • David K says:

    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.

  • Russell S says:

    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:)

  • Russell S says:

    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!

    • Lorant says:

      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.

  • Dave says:

    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

    • Hanne says:

      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.

      • Dave says:

        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?

      • Dave says:

        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.

  • Adam says:

    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?

  • Todd M says:

    Will you add more Woocommerce elements such as Sale Items, Most Popular, Highest Rate that we can add to pages?

  • Bonnie says:

    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!

  • godogeek says:

    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!

  • godogeek says:

    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.

  • craige.williams.za says:

    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 !

  • Sonya S says:

    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!!!

  • Erik H says:

    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!

  • rebecca says:

    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?

  • Elliot says:

    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

  • Shar says:

    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.

  • >