How To Easily Add Product Variants To Your Clickfunnels 2-Step Order Form?

Plugins
, ,
43

Hi Nice Script thanks for share it but i want to know how i can add additional custom text field with place holder text in clickfunnel 2 step order form in in step one ???

44

Hello,

This is really helpful but can anyone please modify the code for me to use as a text input instead of a select option? I have been trying but can’t seem to figure it out.
Please this is really important

Thank you!
Ezinne

45

can you add this to the 2nd step of the 2 step order form?

46

@yassine Thanks for the script, it works nice on the page but I can’t find where the customer data is shown on CF backend? It only shows me a regular purchase made without any of the variants I added. Where should I look for it?

47

@yassine
This is great! I got the dropdown menu to show up on my page correctly but now I need to tie this custom field (product flavor) back to an actual product in Click Funnels so it will then go through my Shopify system to my drop shipper. Is there anyway to do this with the dropdown method?

49

This isn’t working for me. The form shows up correctly, including all the different options, but in the backend, it only records everything as 1 response.

In my case, about 100 people have apparently ordered “extra small” t-shirts… :confused:

@samlee any thoughts on this?

50

It should show up in the “Additional Info” part of the contact, but at least on my end, it’s not actually showing any of the other variants even when they’re chosen.

52

Is there a way to add option quantities? Like shoes. red or blue, 3 size 6, 2 size 7, etc. I need the quantities to reduce as they are purchased. Thank you for any help! Your code was a lifesaver!

53

Or coupon codes? I’d love to have customers use a coupon

54

So if I want to simply allow the variation for size and for quanity choice how would the code look?

55

It didn’t work … I tried to add size option:

<script>

var option_name = ‘product_size’;

var options = [‘S’, ‘M’, ‘L’, ‘XL’, ‘XXL’, ‘XXXL’];

var label = 'Pick A Size;

It didn’t work??

56

Is there a thread that teaches how to do variants with a 1 step order form?

57

For those who need a text field, this is how I fixed it:

<script>
var option_name = 'your_info';

var label = 'Your Label';

$('.o2step_step1').prepend('<hr style="margin-top: 3px;margin-bottom: 15px;">');
select = $('<input type="text" data-custom-type="'+option_name+'" name="custom_type" class="elS1Fullname elInput elInput100 elAlign_left elInputSmall elInputStyl0 elInputBG1 elInputBR5 elInputI0 elInputIBlack elInputIRight required1 elInputStyle1 elInputSmall elInputBG2 garlic-auto-save" data-type="extra" style="margin-top: 0px !important;margin-bottom: 10px !important; border-color: rgb(74, 137, 32); border-width: 3px;"></select>');
for(option in options) {
   select.append('<option>'+options[option]+'</option>');
}
$('.o2step_step1').prepend(select);
$('.o2step_step1').prepend('<label>'+label+'</label>');
</script>
2 Likes
58

OMG! Hans_D!! Thank you so much.

This is so helpfully to my bussines.

I was searching for this code to add the “apartament, floor or house number” field. (Because sometimes people doesn’t add it)

Is there a way to place this code below of “Shipping Adress” or in any place that I would like to place it?

I’d like to place it after they write their address

Sorry about my english. It’s not my first language.

Thank you again!!!

59

Awesome, thank you! I was looking for this too

60

First, thank you to everyone on this thread, because I’ve learned a lot and I believe I may have solved an issue I’ve been having with one of my funnels.

Here’s the abridged version, please let me know if you think it’s correct…

Main Page: (5) Prepared foods with (10) flavors to choose from. Customer can get 5 of the same or one of each. I initially used the first code here, but it flooded the page. I found the text box option and entered that instead. Now, they can type their 5 flavors there.

Upsell 01: (5) More foods at a discounted rate. In here I added a Custom Field ( labeled for the additional products). Here they can type in (5) more flavors before agreeing to the upsell. Would this be correct?

Upsell 02: (10) More foods at a discounted rate again. In here I added a Custom Field ( labeled for the additional products). Here they can type in (10) more flavors before agreeing to the upsell. Would this be correct?

Thank You Page: Confirmation and misc additional offers and products directed to a traditional website.

I have some more tweaks before I can test properly. However; does this seem correct for my case? Also, the additional info should be added to the Buyers “profile”, correct?

This has been my most difficult funnel to date. All others have been pretty self explanatory.

Thanks in advance for your help!

1 Like
61

I would say that the main goal from a funnel is to take away the many options given to your customers and limit them to just a few at most (if needed), As it will both increase your conversion rate massively and it will also decrease your overhead by easing your fulfillement process.

In your case above it is easy to do having a dropdown on Upsells/Downsales is fine you don’t need any code to do that, and the code above or Funnelish app (Fancify) is only needed for the front end offer (Order form).

If I were you I’d focus on reducing the complexity as usually it’s not worth it, it won’t affect your bottom line at all.

62

Thank you for your feedback. It’s definitely noted.

63

@yassine I’m using the code in the footer as mentioned and the whole funnel works, however, when using EasyPost or Shipstation, the order doesn’t go all the way through. I have contacted Clickfunnels, they’re saying it’s the code’s fault. Could that be true?

1 Like
64

That’s the usual CF support answer when it comes to third party codes…

The code is meant to add the ability to track the order details in CF, and then from CF to ShipStation is really up to Clickfunnels or more likely in this case it’s up to you…

If you have a Funnelish account I’d recommend connecting ShipStation directly to Funnelish and use our Fancify app which will save you lots of time and pain and hardwiring things that will certainly crumble at any time when scaling things,

If you don’t have a Funnelish account, try to get one at Funnelish apps see if it works for you, if it doesn’t just reach out to support and they’ll issue you a full refund.