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

Plugins
, ,
1

In this short how-to tutorial I’m going to discuss a little trick you can implement on your order form(s) to add variants support to them, (eg. product Color, Shape, Size…etc), without having to add multiple products as long as the different variants have the same price.

So let’s get started:

  1. On your Funnel Step under Settings > Tracking Code :

  2. Switch to Footer Code:

    image.png747×135 7.09 KB

  3. Past the code below as it is to the Footer Code box.:

<script>
var option_name = 'product_color';
var options = ['Red', 'Blue', 'Green'];
var label = 'Pick A Color';

$('.o2step_step1').prepend('<hr style="margin-top: 3px;margin-bottom: 15px;">');
select = $('<select type="custom_type" 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>

  1. End result:
    The code above should result in something like this:

  2. Back-end customer data:
    At the back end your customer data will be stored like this:

    image.png985×148 6.83 KB

  3. Now Editing:
    In order to change the way the variation (extra field) is displayed you have to only edit three simple lines on the code given above:

var option_name = ‘product_color’;
Being the name that will be shown for that given field at the backend (Clickfunnels will show it as Product Color removing the underscore '’ and capitalizing the words)_… Check the example at #5.

 **var options = ['Red', 'Blue', 'Green'];**

Being the options your customers can pick from, separated by a comma, you may add as many as you want.

var label = ‘Pick A Color’;

Being the label text that will be shown above the new field.

  1. Adding more fields:
    In order to add more similar fields all you have to do is duplicate (copy/past) the code above as many times as you’d like within the same page, that will result in multiple fields, just make sure to edit the field labels, options, and names appropriately.

Leave me your questions or comments below,

Enjoy!
– @yassine

1 Like
2

What happens when there is two orders from a same customer but options are changed ? That’s will overwrite?

1 Like
3

That’s true i guess… it will be overwritten.
But if you have some sort of Zapier webhook in place, and keep exporting orders as they come in it won’t cause any problems…

After all it’s not only the variant that will get replaced there are far more serious stuff that will (name and address).

4

Hi,
Thanks for the reply.
Can you share a link of tutorial about Zapier webhook integration ?

5

Hello. Is there a way to use this script in the case of a customer purchasing more than one product ? Let’s say he buys 3 t-shirts and wants 3 different colors… Would it be possible ?

6

There is a better and much easier to set alternative in the Funnelish Apps…

Just login to your account, and use this combination of Apps:

  • PayPal App v2
    Allows Multi-Product selection, and Multi-Quantities as well.

  • Fancify
    Improves the user visual experience of your order forms…

Then for each product add variants, as many as you need along their possible options a user can pick from, you can easily get something like below:

image.png444×586 21.7 KB

And it doesn’t require ANY coding at all.

1 Like
7

Thank You so much! I have one more question…

Is it possible to do the same on OTO Pages in Clickfunnels? My customers can now choose variants of my main product but not variants from my OTO (up- or downsells). Do you have a piece of code for that as well without having to include another order form on the OTO Pages?

8

in OTO pages the case is probably much sampler!

All you have to do is add a dropbox (input element with selection options), and let your customers pick, give that box a custom type and name, and when they buy you’ll have that stored into their Clickfunnels profile.

1 Like
9

Thank you so much Samantha! Makes sense and is very helpful :slight_smile:

10

Hello Samlee,
Is there a place where I can find how to set this up because it isn’t working for me and I can’t seem to find any info about it?
Thanks.

11

About what specifically @DaanDekker?!

You need to be more specific what’s the issue, how your setup looks like, and this thread itself is a tutorial for the variants plugin!

If you had specific issues you should share what issues you got so we can try to help you better.

12

So I have a phone case with multiple colors and its suited for multiple phone models. I would like it to appear like the picture you posted and you used both paypal v2 and fancify. But how do you set it up so you get that menu so people who visit my page can choose the correct variant?

1 Like
13

Ooh! so you are not using the code above! as the code above is just a sample FREE code plugin that non-funnelish users can use.

As you are a funnelish user, this thread is not really relevant to you.

In order to use Variants, go under Funnels > “Your Funnel” > “Your Step” > Products.

Click each product, which should bring a side panel that looks something like this:

image
image508×618 37 KB

Enter your variants, and their options, and save your changes.

In order to use variants, you need to have the Fancify App enabled…You may use any of the PayPal Apps we have all work the same for variants (but v2 supports multi checkouts & multi quantities)

That’s really it :slight_smile:

14

Thank you so much Samantha!
I have one last question, in order to setup PayPal V2 do we need to do the exact same thing as the original PayPal plug in or are there any differences in the setup process?

1 Like
15

I just saw your post about the gateway so I think my question is already solved :wink:

1 Like
16

I have set it all up now :slight_smile: Is there a way to have standard 1 selected for quantity instead of 0?

17

hmm maybe you mean forcing a minimum quantity of “1” I think setting min order to “1” in the PayPal App funnel settings, will force your customers to buy at least one of each or none at all!

The other option is making the product selected by default! in that case it will be selected no matter what type it is, multi checkout, single checkout or multi quantity.

18

Thank you so much Samantha, you are of such great help!

1 Like
19

2 posts were split to a new topic: What is paypal v2? What is Fancify?

20

Does that work with payment by Credit Card too ?