"When are you going to integrate with WooCommerce?"

The moment that we released Thrive Theme Builder in March this year, questions about WooCommerce started coming in fast. 

But integrating with WooCommerce is no small achievement. 

Thrive Theme Builder breaks open the limitations of WordPress, letting you visually customize everything across your website in a way that you never could before.

Supporting WooCommerce with this technology was much more than checking a box. It was months of dedicated work.

This week we're pleased to release our WooCommerce integration... Plus 7 other feature updates and improvements to our tools!

Read on to discover what new wonderful features are hidden inside your software.


(P.S.: Like the new Table of Contents? That's only one of 14 fully-editable templates we released with Thrive Architect last month)

1. WooCommerce Integrated With Thrive Theme Builder

(Not interested in ecommerce? Click here to skip to the next feature.)

Thrive Theme Builder is now fully WooCommerce compatible. 

We've built it to work with WooCommerce hooks and filters out-of-the-box. This means that if you have extensions such as support for different product variations or types, then unless those extensions are doing something wildly unexpected, they'll work with Theme Builder straight away.

Getting Started with WooCommerce

To get started, make sure you have installed and activated the WooCommerce plugin on your site.

Once you have, visit the Thrive Theme Builder Site Wizard and look for a new Step 12: 'Download and activate WooCommerce shop templates'.

If you've already completed the Site Wizard, jump straight to #12.

This is going to download our designer-made WooCommerce templates and activate them on your site.

Don't Miss The Wizard Step!

If you skip this step and just enable WooCommerce and Thrive Theme Builder, you'll only get half of the features we've made for you.

Yes, you'll be able to visually edit... but you won't access to all the beautiful templates we've made! Clicking the button above is necessary to download these templates.

WooCommerce Templates

By default, installing the WooCommerce plugin creates 5 new page types on your website:

  • Product: Where you set the image, price and inventory of a product.
  • Shop: Where all of your products are listed at once.
  • Account: Where customers manage their details and orders.
  • Cart: A dynamic list of items a user wishes to purchase.
  • Checkout: Where payment is collected and orders are processed.

When you visit the Templates panel in Thrive Theme Builder, you'll see templates for those pages are already active and ready for editing:

The purple flag will show you the active WooCommerce templates

The above image doesn't do it justice because on your site you'll have 5 Product Templates to choose from and 9 Shop templates, all made by our designers.

Style your favourite templates and set them as your default. It's as easy as that.

The Shop Template

The WooCommerce shop template is a unique page on your site. This page lists all of the products that you have for purchase and allows visitors to apply filters to the selection displayed. Since it's such a fundamental page, Thrive Theme Builder comes with 9 different shop templates to choose from.

Have a look at this beautiful default template with no extra styling applied:

The first default template with no customizations.

When you edit the shop template, you can change the header, footer, top section, bottom section and sidebar just as you would with any other theme template.

However, the content area on the Shop is one large element that can be customized right from the Theme Builder sidebar with the following settings:

Main Options for the Shop Product List

New WooCommerce Elements

Not only will you have available templates, but when you open the Thrive Theme Builder editor on any of these templates (or Thrive Architect on regular posts and pages), you'll have access to a whole new set of elements:

New WooCommerce widgets available in the elements panel.

Each of these new elements are WooCommerce widgets often used in WordPress themes... but now you can visually organise and display them right inside of Thrive Theme Builder and Thrive Architect.

Under the Main Options for each element, you'll be able to change the parameters that are supported by the WooCommerce widgets. For example, you can alter the filtering for the Product widget until it shows the products you want.

Designer-Made Theme Sections You Can Add With A Click

At this point, we've covered the basics of a WooCommerce integration with a WordPress theme.

But our designers have gone above and beyond.

Thrive Theme Builder gives you the ability to add pre-made sections to your theme templates. If you've activated WooCommerce, you'll find new ecommerce specific designs for the top sections, bottom sections and sidebar sections of your site.

Click this button to access your new templates.

With any of these sections selected in your template, click 'Replace' in the Theme Builder sidebar and our template gallery will load with beautiful designs that are just one-click away.

These top sections are pre-made and fully editable in Thrive Theme Builder.

Same with the sidebar of your website. 

No more wrestling with the old WordPress widgets area to try and customize your shop. Just click on 'Replace' in your template and choose from the many designs that include WooCommerce widgets, author bios, sale alerts, product images and more.

Sidebars you can load with a click!

This is the future of building and customizing an ecommerce website.

Just like any other template, everything outside of the WooCommerce content is editable. This is Thrive Theme Builder in it's prime: you can change the header, footer, sidebar, top and bottom sections and update it whenever you want.

Let's look up close at an example Bottom Section template:

Click into any field and change the text, icons, images and more.

With a couple of clicks you can edit the pre-made testimonial section, change the image, and customize the 4 guarantee areas right on your website and display this underneath your shop, cart, checkout or anywhere else.

Edit Product Descriptions In Thrive Architect

In WooCommerce, a product page is a special Post Type made to showcase images, descriptions, reviews and more about a product.

Although most elements on this page are governed by the theme templates, the product description is treated like the general content area. Think of it like the post content area on a blog post.

That means you can fire up Thrive Architect to visually edit this area, adding anything from the elements panel. 

Product Description areas can be edited with Thrive Architect

Previously this area was just static (and often boring) text. Now you're now able to spice up your product descriptions with any of our elements and really sell your products to your visitors.

You can also load the post type 'Product' into our Post List element if you ever want to style your own list of products anywhere in Thrive Architect.

Smart Colors & Global Typography

From day 1, Thrive Theme Builder came equipped with our Smart Color technology and our WooCommerce integration uses it too. 

Remember: Smart Colors are more than just a single global color updated across your site. 

You pick a brand color and our Smart Color algorithm will create complimentary shades and tones that support it. If you ever want to change colors across your site, just change that one accent and new shades and tones are instantly recalculated to match it.

Look how easy it is to change your colors!

Fonts and typography settings will be inherited too. Wherever your WooCommerce widgets display, they'll pick up the correct heading and paragraph fonts to match the theme or landing page. Update these fonts centrally and you'll safely know the changes are reflected everywhere they should be.

There's More Coming Soon!

We're not done. The Roadmap for our WooCommerce integration is quite exciting.

Over the coming months, you'll see a new cart element, support for more product shortcode elements, improved template configuration, an improved setup wizard and more.

For those of you running ecommerce stores, take it for a spin and let us know what you think. You know we're open and grateful for your feedback.

2. The New Block

Over the last year, we released two types of blocks: Content Blocks and Page Blocks.

Now we've consolidated the two and moved them under the one element, simply called Block.

The updated Block element in the elements panel.

So that we're all on the same page, a Block is a pre-designed chunk of content made up of smaller Thrive Architect elements. They can easily be edited and reordered so you can quickly piece together a page.

When you open the Block library, it will look like this:

Content Blocks and Page Blocks combined.

Immediately it will show you all available block types for the content that you are editing. In some environments you'll see more blocks, such as when you're editing a Smart Landing Page which has it's own set of compatible blocks.

But this takes the guesswork out of knowing what types of blocks are available.

On the left hand side, you'll see 'Show me all the blocks' is enabled. But you can easily apply a filter to see which types you're after.

Filter the Block types from this dropdown.

Why the new Block is better

There are a few advantages that come with this new block consolidation. For example, they are all Smart Color enabled and will inherit the correct colors wherever you place them.

You can also create dramatic full-width blocks inside of narrow Blog Post content, an effect that has previously been difficult to achieve.

Full width blocks in a narrow blog post? Easy!

The most significant advantage of the new Block will be noticed by those of you using Thrive Theme Builder.

Shapeshift is our the companion theme to Thrive Theme Builder. Think of it as a library of templates built from Theme Builder technology so that you don't have to start from scratch.

With the new Block element, Shapeshift page blocks are available for you to use outside of landing pages. That means you can add them to your blog posts and to regular WordPress pages that are controlled by your theme templates (instead of landing pages that overwrite your theme CSS).

Wherever you use them, Shapeshift blocks match the look and feel of your entire website.

3. Icon Library Rebooted

Our Icon library has been rebuilt to load faster and manage icons more effectively. When you drop an icon on the page, you'll now be greeted with this new lightbox:

It loads so quickly!

Inside of this lightbox you can refine your filters and search by icon packs.

Behind the scenes, we've improved the icon technology which paves the way for some greater expansions to the icon element coming over the new few months.

Going forward, we will be increasing our support for Open Source icon libraries as opposed to premium license packs. Open Source licenses permit unlimited free use with any modifications, meaning you can use your icons both online and offline, in any merchandise and marketing or brand material.

Open Source icons are truly free, and we've already provided the first library for you. Look out for 'Material Icons'.

Material Icons are now available

Material Design, created by Google, is a set of design guidelines backed by open source code to be shared by designers and developers across devices and platforms.

This is why we decided to support the official icons they've released, which you can preview right here... or just open Thrive Architect and see them for yourself.

Moving forward, we are continuing to support Font Awesome Free icons by default but those of you wishing to use the Pro icons will require your own Kit ID. 

Click 'Manage Icon Packs' to enable Font Awesome Pro.

Adding a Font Awesome Pro Kit ID will unlock all Font Awesome Pro 5 icons including their Light-style icons and the popular Duotone icons which we were unable to support before.

Existing Pro icons will still display anywhere you have placed them on your website after this update.

As for the recently announced Font Awesome Pro 6... we'll have to wait until they are released before our developers can investigate how we can support them.

For now, rest assured - more Open Source icon styles are coming in the near future.

4. Template Switching From Blog Posts

We have a dream... that you can open an empty blog post in Thrive Architect and set all the high level post data and content without even exiting to the WordPress dashboard.

In recent releases, we've made it possible to change the title, feature image, video or audio, and publish settings right from the 'Post' breadcrumb when Thrive Theme Builder is active. Now we've improved how you can select your template too.

New options under the Post breadcrumb

When you open the Template settings from a blog post, you'll have a new selection panel that looks like this:

Change the active template for your blog post with a click.

With one click you can change which Thrive Theme Builder template will display for the post you are editing. Yes, you can have multiple post designs and quickly choose the one that suits your content.

The green 'Default' flag will show you which are the default Post, Video and Audio templates that you've allocated in the backend of Thrive Theme Builder and they reflect what you see here:

These are your default templates as seen in the Theme Builder templates panel.

If you want to change to a different media type, set the filter and select the template of your choosing and your post will immediately load the the media type as though you made the change in the WordPress backend.

Switching post media types? Simple.

5. New Integrations: Zoho + SendFox

We've added another 2 email and CRM tools to our already huge list of integrations:  Zoho and Sendfox.

SendFox is a simple but popular mailing list service and Zoho is a powerful CRM with email marketing built in. Our Zoho integration has been released with full support for Custom Fields allowing you to use checkbox, radios and dropdowns on your lead generation forms and pass that data straight into your Zoho custom fields.

6. Thrive Leads Database Optimization

Thrive Leads is our flagship lead generation plugin and it identifies which visitors have seen what forms. When those visitors sign up it then calculates your conversion rates.

Our developers have been working to optimize how Thrive Leads impression data is managed on your server and we've found a way to make it leaner, faster and significantly smaller without sacrificing data. Your hosting providers will be grateful.

The next time you open Thrive Leads, you'll see a notice prompting you to migrate your database to the new format:

Click to start the migration from inside of the Thrive Leads dashboard.

Once you click, you'll be prompted to start a database migration. When you're ready to confirm, the process will begin and it looks like this:

The Thrive Leads database migration.

Depending on the size of your Thrive Leads database, this could take seconds to minutes. We've taken extra precautions so that if anything goes wrong during the migration, your site is unharmed and none of your data will be lost. You can resume without any trouble.

If you want to know more about how this works, click the toggle below to read the FAQ from our developers regarding this migration process.

FAQ About The Thrive Leads DATABASE Migration

Q: Will there be issues with server timeouts during the migration?
There shouldn’t be. The migration is done chunk by chunk to ensure that this isn’t an issue.

Q: What happens if the migration pauses halfway through completion?
Reload the migration screen and the migration will continue where it failed.

Q: How long will the migration take?
It depends on the size of the existing database, power of your server, etc.
For most sites the migration will be just a minute or two. Some larger sites might take between 5 and 10 minutes. As an example, our test data sample of 4m rows took around 13 minutes to complete.

Q: Will the migration hog resources on the server?
We’ve throttled each request to make sure this doesn’t happen. Each request is limited to process a maximum number of 30.000 entries from the events log table.
The following request only starts after the previous request has been completed.

Q: How big a difference does the performance optimization make?
As a test we took the latest database backup from thrivethemes.com and optimized Thrive Leads entries. Result was a ~94% decrease of the number of rows ( from ~3.8M to ~170K ). The new table storing impression totals is at around 71K rows (spanning 5 years worth of lead generation data).

7. More Speed Improvements

Although Thrive Leads requires you to begin the migration yourself, there are 2 other speed updates that are already active as soon as you update.

  • Thrive Comments has an improvement which will reduce server load when loading comments on a page or post. You may barely notice the difference but behind the scenes it is leaner and faster.
  • Thrive Architect will also operate faster when you are editing particularly long pages. Some of you may have experienced occasional lag when working on dense content. We've rewritten some of our underlying code and you should find the editing experience feels snappier.

8. Thrive Quiz Builder: Enable Scroll From Architect

A while ago, we released a Quiz Scroll feature for Thrive Quiz Builder.

As a quiz taker moves through your questions, sometimes it's helpful to reposition their browser viewport after each question is answered. This is especially helpful if your question areas are long and a visitor needs to scroll down to make their selection.

Although the quiz scroll feature is tucked away inside of Thrive Quiz Builder, we saw that you may want to control that setting depending on where you embed your quiz.

Toggle Quiz Scroll from inside of Thrive Architect wherever you embed a quiz.

Now when you add a quiz to any page in Thrive Architect, you can enable that setting to suit the quiz environment.

Give us your feedback... We're Listening!

When we saw how much demand there was for WooCommerce, we made it a priority. Our integrations with Zoho and SendFox came because we saw a large number of requests for them. We merged Blocks so you can find available templates more easily.

The point is that we are listening to your feedback and we love helping you build a better business with our tools.

Drop us a comment below and let us know: What do you think of these updates? What else would you like to see in 2020?

P.S. Our Website Is Fixed! 

We had some server issues on our website for a few hours from the 1st - 2nd July. If you had any trouble logging in or opening support tickets, those problems should be resolved and our support team are waiting to help you out with any issues you might have.

About the Author Bradley Stevens

Brad is the CEO at Thrive Themes, and a serious marketing nerd. He’s been a videographer on top of the Sydney Harbour Bridge, a drummer in a rock band, an actor in independent films, and he’s created and sold his own online courses.

Get In Touch