Order Form Products Purchased  :: CF Pro Tools Add-On Features for ClickFunnels




Description and Best Use Case For This Add-On:


The Show / Hide on Previous Products Add-on is used on an OTO page to display a dynamic set of product options to a customer based on which products they purchased on an order page when using the ClickFunnels funnel builder. 


This add-on would be used in conjunction with another of our add-ons, which is ORDER FORM PRODUCTS PURCHASED, which will track which products are purchased off the order form.




OVERVIEW (For Advanced Users)


For those of you ready to jump in and are familiar with CFProTools, you can use this checklist:




Step 1:   Add Your Domain To CFProTools DOMAINS TAB


Your first step will be to add your domain to the CFPT Domains Tab.

Here's a guide on how to do that:


https://cfprotools.freshdesk.com/support/solutions/articles/29000041078-how-to-add-a-domain-to-cf-pro-tools-online-installation-guides




Step 2:  Create Your OTO Type Page


You will need an OTO UPSELL or OTO DOWNSELL TYPE page installed in your funnel on ClickFunnels in order for this add-on to work.


Here's a quick tutorial on how to create funnel pages using ClickFunnels:


https://help.clickfunnels.com/hc/en-us/articles/360060380833-Creating-A-New-Funnel-Step



Step 3:  Install ORDER FORM PRODUCTS PURCHASED


As a prerequisite to this add-on working correctly on your OTO type page, you will need to ensure you have installed ORDER FORM PRODUCTS PURCHASED add-on on your ORDER PAGE.


Make sure you have gone through this process before moving forward with this add-on installation as it will not function without this setup being taken care of, first.


Install Order Form Products Purchased Add-On




Step 4:  Create Your Add-on Script


For most add-on installations of the SHOW HIDE ON PREVIOUS PRODUCTS script, you can simply click the CREATE NEW button:



Please note:  You can use this script over and over for other OTO pages without having to create a new and unique script.   Your on-page configuration will need to be custom created each time, though.




... now do a keyword search for SHOW HIDE ON PREVIOUS PRODUCTS




Once you have located the SHOW HIDE ON PREVIOUS PRODUCTS script, click the thumbnail image and create the add-on per the installation instructions.



You will need to name your script.   We recommend a naming convention like this:

SHOPP (Test Funnel) or
Show Hide On Previous Products(Book Funnel)

It's best to name it with the name of the add-on and in parentheses make sure to name which funnel it belongs to so the script location can be identified later as needed.


Once you have completed this area, click the red button below to create your add-on script.




Step 5:  Install Your Add-on Script


You can now copy your newly generated script out by clicking the blue button where your script is located.

The button says, "COPY CODE", this will copy the script to your virtual clipboard.



You are now ready to paste the script into your FOOTER TRACKING CODE AREA.


This add-on script should specifically be installed on an ORDER type page.

Click SETTINGS --> TRACKING CODE




Now click the FOOTER CODE TAB, and paste your code in:



Now SAVE your page, you are ready to preview and test your new add-on!


Step 6:  Grab Your Product ID


Grab the product ID for the product you would like to force into the cart and copy it to your virtual clipboard.  



You will need the product ID link or numeric numbers for the next step while you are setting up the add-on.





Step 7:  On-Page Configuration


Please refer to the following video for your on-page configuration.


You will create multiple rows and in each row, there will be the available product you want your customer to have the choice of purchasing.


In the example, Jaime is using Add/Remove Products, but this is not a requirement for use.





The ROW level will need you to update the CSS TITLE appropriately to show whether a product should show as available, or NOT show (be hidden) as a result of a product being purchased (or not purchased) on the previous page.


Again, please refer to the video to see how this would be accomplished as a video is worth a thousand words.




Known Conflicts:


  • Only works on ORDER pages

  • You can't change the product IDs together.

  • You need to set individual product IDs on your CSS Title, but you can chain multiple values together like:

  • cf-show-on-product-123 cf-show-on-product-456

  • Instead of having multiple product IDs, you need to have multiple values separated by spaces with a single product ID in each one.



What To Do Next:


Here Are A Few Other Help Docs You May Wish To Check Out:


Chances are you already have a CF Pro Tools account and you can find all available resources, there:   app.cfprotools.com


However, if you have do not yet have a CF Pro Tools account, you will need one in order to take the actions in this help doc.   You can sign up at any time here:   www.cfprotools.com


If you have questions, you can also hit us up in support at support@cfprotools.com