Announcement

Collapse
No announcement yet.

How to Add Shipping to Clickfunnels [CODE]

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to Add Shipping to Clickfunnels [CODE]

    We want to charge for shipping and don't want to bundle it in to the main price visually so it doesn't press over $100. So we built a hack to not do that. This will work for fixed shipping costs currently.

    I'll share it here.

    Grab your standard CF cart

    Click image for larger version

Name:	00000316.png
Views:	1
Size:	115.0 KB
ID:	205


    and add whatever products to it.

    Click image for larger version

Name:	00000315.png
Views:	1
Size:	73.9 KB
ID:	204


    You'll want to make the "amount" field = to the product + shipping. Then the user for this line item is going to see just the price so put your price they're paying into the "Price Display Override" In our case this value is $97.


    Then you'll need to add a couple Javascript / HTML code places below the the Dynamically Updated product list.



    Then open your settings and go to the "Tracking Codes" section

    Click image for larger version

Name:	00000313.png
Views:	1
Size:	111.0 KB
ID:	202



    Enter this code.

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
        $('input[type=radio][name="purchase[product_id]"]').change(function(){
            var price = Number( $(this).siblings('.elOrderProductOptinPrice').text().replace(/[^0-9\.]+/g,'') ) || 0;
            $('#ordertotal').text('$'+(price+8));
        });
    });
    </script>
    Update the +8 with the added shipping to each order you want to add.


    Next you'll want to add this code to the top JAVASCRIPT / HTML box.

    Click image for larger version

Name:	00000314.png
Views:	1
Size:	27.1 KB
ID:	203


    Code...

    Code:
    <table style="width:100%">
      <tr>
        <td style="padding-left: 5px;" class="hsSize1">Shipping & Handling</td>
        <td style="padding-right: 5px;" align="right" class="hsSize1">$8</td>
        </tr>
      </table>
    Update your shipping price to what you have in your code above. In our case it's $8 because we're charging $8 shipping.

    Then the bottom JAVASCRIPT / HTML box put this code.

    Code:
    <table style="width:100%">
      <tr>
        <td style="padding-left: 5px;" class="hsSize1">Total</td>
        <td style="padding-right: 5px;" align="right" id="ordertotal" class="hsSize1">$105</td>
        </tr>
      </table>
    Update the $105 to the default cost to consumers. In our case it's $97 + $8

    Click image for larger version

Name:	item + shipping.png
Views:	1
Size:	18.4 KB
ID:	206


    And that should be it.

    Then hit save to save your page and preview and it should now show a total of shipping. Now format as you see fit and good luck
    Jason Akatiff, CEO - A4D Performance | Follow Me on Twitter | Read my Blog
    >> A4D - CPA Network, 8 years in business, never missed a payment. Sign Up Here! | NEW Skype: live:jasona_33 <<<

  • #2
    I was actually looking for a similar solution a few weeks back. This is gold. Thanks!

    Comment


    • #3
      Awesome stuff do you have a script for if there is more than one item to choose from?

      Comment

      Working...
      X