1. Home
  2. Knowledge Base
  3. Thrive Architect
  4. Thrive Architect Elements
  5. Adding a ThriveCart Checkout Form URL to your Thrive Architect Page

Adding a ThriveCart Checkout Form URL to your Thrive Architect Page

When selling a product via ThriveCart, you are able to add a link/button on your pages/posts that will redirect users to the ThriveCart checkout page, from where they have access to purchasing the product.

We’ve described this process here.

However, you can also add the checkout form directly to your site. This means that you do not necessarily have to send users to the ThriveCart website, but rather have them complete the checkout form directly from your page or post.

More than that, you will be able to choose the exact placement of the checkout form on your page/post.

There are a few easy steps that will help you achieve this:

Create and set up your ThriveCart product

Firstly, you will have to make sure you’ve connected ThriveCart to Thrive Apprentice. For that, we have created a separate tutorial that you can find here.

An important step that has to be taken in case you’re looking to embed the checkout form on your page is to make sure you’ve selected this option for the ThriveCart product, when setting it up:

Under the “Checkout” tab, make sure you’ve selected the cart type as “Embeddable”.

Get the checkout form embed code

Once the ThriveCart product has been properly set up, you can click on the “Save & get URL” button:

You’ll get access to the embed code of the checkout form, which we’ll paste into our Thrive Architect page/post:

Add the embed code to your page/post

You can use two different Thrive Architect elements to place the checkout form code into the pages/posts:

In both cases, you will have to open your page/post using Thrive Architect. Once the editor opens, you can add new elements by clicking on the plus sign from the right sidebar and simply dragging and dropping elements inside the editor.

Using a “Custom HTML” element

A “Custom HTML” element will allow you to easily and quickly insert code to your page. Open the list of elements and scroll down to find it, or start typing its name in the search bar:

Once you find it, grab it and drag and drop it where you would like the checkout form to be placed:

A pop-up opens, and this is where you’ll have to paste in the embed code of the checkout form, the one you’ve copied from the ThriveCart product setup page:

Then, click on “Save” and the form will be added, but you will be notified that there is no preview available in the editor:

However, if you save and preview the page, the checkout form will be visible:

Using a “WordPress Content” element

We can achieve the same result if we use a “WordPress Content” element, and the process is fairly similar.

Look for the element in the element list, grab it and drag and drop it in the editor:

In this case, too, a pop-up will open. You will have to make sure that you select the “Text” tab here:

And then go ahead and paste the checkout form embed code in the text box and click on “Save”:

In this case, the form will be visible in the editor:

This is how you can add the checkout form URL in one of your Thrive Architect pages/posts.

I hope this article was useful. You can always find more articles and tutorials in our knowledge base, here.

Was this article helpful?

Related Articles