I wanted to hide the coupon panel in the checkout page in Kajabi.
Why? Because it makes one hesitate and search the web for a discount code, because why wouldn’t you? I’ve done this a lot myself. That little coupon code box creates friction during the checkout process, and could result in the customer getting distracted by something else on the interwebs, or put it off and wait for one.
The problem is that it’s not easy to do hide the coupon panel in Kajabi unless:
- you’re on the Pro plan which gives you access to the Code Editor
- you don’t want to use coupons, ever — if that’s you, then check out this article from Kajabi on how to remove the Coupon field from the Offer Checkout Page.
The good news is that there’s a workaround to hiding the coupon panel, thanks to Kajabi’s support of Cloudflare’s powerful features in that orange cloud.
Part I: Set up your Kajabi custom domain in Cloudflare
First, you want to set up the custom domain in Cloudflare.
Check out Kajabi’s excellent guide on how to do this.
Part II: Add your Custom CSS in Google Tag Manager
Second: In Google Tag Manager, create a Custom HTML tag then copy and paste the following code:
<style>
#coupon-panel {
display:none
}
</style>
Firing Trigger:
Page Views > Some Page Views
Page URL contains members.<yourdomain>.com
Even better? The direct link with the coupon code will still work! #stealthmode
https://createrati.mykajabi.com/offers/secret-offer?coupon_code=STEALTHCODE
It’s not perfect as it still shows for a brief second, but it’s better than the alternative. We can also hope that nobody notices as they’re excited and busy taking out their credit card. :)
Tools Used:
