Top Questions

  • 5.7 Years

    • Category : Php
    • Location : Unknown
    • Posted On : Mar 23, 2018

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

    <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 Answers

    View More

    admin

    admin

    5.3 Years

    Answered:

    Mar 23, 2018

    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 :


       

      <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>

Add Your Answer

When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Let's work to help developers, not make them feel stupid.