How to Use Thrive Architect with CartFlows

How to Use Thrive Architect with CartFlows

CartFlows is a great new tool for creating a better checkout experience in your WooCommerce website. You can use CartFlows to eliminate the middle steps of adding a product to your cart, then visiting the cart, then checking out, etc. CartFlows also allows you to streamline the selling process into "flows" and create beautiful custom checkout pages.

Unfortunately, CartFlows is currently dominated by Elementor templates. For those of us who are passionately in the Thrive Architect camp, we're stuck having to do things manually until default templates are made available. Even then, you may wish to build your own custom lanading page and checkout experience.

What You'll Need:

  • Thrive Architect
  • CartFlows (free version, but pro version gives more customization to the checkout)
  • WooCommerce

How to Create a Custom CartFlows Landing Page with Thrive Architect

Step 1: Choose "Other" under "Show Templates designed with" in the CartFlow settings

This will allow you to bypass having to choose a template from Elementor or another builder. We want to get straight to that blank page.

how to use thrive architect with cartflows step 1

Step 2: Create or edit a new Flow

Once you have a flow created, you'll want to click edit under the landing page.

how to use thrive architect with cartflows step 2

This allows you to edit the blank landing page like you would with any Thrive Architect landing page. 

Step 3: Create your landing page using Thrive Architect

You're now ready to begin building the landing page! Build your landing page like you would any other page using Thrive Architect

Current issue with OceanWP Theme: If you use the OceanWP theme then you may have to do a little bit of tweaking to hide a broken looking cart. If you need the fix, let me know and I'll post it for you.

When your landing page is complete, be sure to grab the link to the checkout stage of your flow. This link can be found in the landing page settings in the default backend editor.

Place this link within any buttons you've created on your landing page to 'buy now' or proceed to purchasing. That's it for the landing page!

Download My Thrive Architect
Starter Template for CartFlows!

Quick Note: If you use my templates above, you may have to tweak spacing and fonts. These will likely be influenced by the styling settings of your WordPress theme. These templates are, however, a nice starting point for those who do not wish to spend time designing a template from scratch. To import, simply click the gear icon in Thrive Architect and import landing page.

How to Create a Custom CartFlows Checkout Page with Thrive Architect

Now we're going to use Thrive Architect to create the checkout page. Thrive Architect is completely capable of generating the exact same templates as you see available for Elementor or any other page builder.

Step 1: Edit the Checkout Page in your Flow

There are two items we want on this page. First, the shortcode that you'll use to make the CartFlows checking section appear on your page. Second, set the product you want to use with this page.

Now it's time to edit our checkout page.

Step 2: Edit the checkout page using Thrive Architect

During this step you can create a beautiful page with Thrive Architect. My templates above include a basic checkout page template.

The only thing you have to do to get this to work with CartFlows is add the shortcode in a WordPress element.

That's it! You can even create a thank-you page exactly how we've just created these two other pages in CartFlows.

  • Hey Doug, have you ever had issues with the CSS from the theme page interfering or being inherited by the cart from cartflows?

    • Hi Amit,

      Yeah, I definitely had problems with the CSS from the theme when using OceanWP. Most of the issues come from a theme changing or adding WooCommerce features. For OceanWP, the fix was as follows:

      1. Open the landing page
      2. Click on the customize Button and then woocommerce. See Image: https://bit.ly/2SSXQSg
      3. After clicking woocommerce-> General -> Remove Custom WooCommerce Features ( Click yes to enable it ).
      See Image 1: https://bit.ly/2EQI7OD
      See Image 2: https://bit.ly/2XSOXvV

      Depending on your theme and what CSS is being affected, the solution will be different. Feel free to let me know what you’re seeing and I can see if I see a fix.

  • Close Menu
    >