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

  • 5 years-7 months

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

    • Category : php
    • Viewed : 101 times
    • Posted On :
    • Posted by : Sunil1521543962

    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


    profile image

    Name: sunil1521543962

    Experiance: 5 years-7 months

    answered

    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>

Report this or Ask your own question

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.