With our standard hosted checkouts you simply provide a link for your customers to visit to complete their purchase.
However, if you’re using one of our pop-up checkout templates you can either use the built-in option to customise a button, upload your own image, or use custom HTML to trigger the pop-up.
This is relatively easy to do and requires some basic HTML coding.
We’ve provided some examples for you to use:
Step 1. Required script
If you’re looking to use a pop-up checkout on your page you will need to embed a certain bit of code on each page you want the pop-up checkout to be enabled on.
<script async src="//thrivecart.com/embed/v1/thrivecart.js"></script>
This piece of code needs to be placed somewhere on the page. It doesn’t matter where, but we advise near the top so it’s loaded early.
Step 2. Your custom HTML
Next, we need to look at building the element that’s going to launch your pop-up checkout.
Using a Standard Text Link
If you wanted to link some text to open the modal cart you would need to use this code:
Using an Image
If you wanted to use an image open the modal cart you could use the code we supply or use this code:
Using Your Themes Shortcode
If you wanted to use one of your themes short codes to trigger a modal cart, you might have a button short code which you prefer to use instead of ours for example. Then you will need to add some tags around your shortcode. (You will need to add these in the ‘text’ editor instead of ‘visual’ within your WordPress post editing area.)
<span class="thrivecart-button" data-thrivecart-account="your subdomain" data-thrivecart-product="1">[YOUR SHORT CODE TEXT]</span>
Things to bear in mind
you need to do is add the ‘data-thrivecart-account=”subdomain”‘ parameter (replacing ‘subdomain’ with your own account’s subdomain), and then the ‘data-thrivecart-product=”1″‘ parameter (replacing ‘1’ with your product’s ID, which can be found in the URL when you click on the product’s edit, stats or embed link.
As always If you have any questions you can contact us on firstname.lastname@example.org.