Website - Cost Per Letter in a Phrase Tool

This tool will allow customers to type in a phrase in a text-box on your website. The letters will be counted and added the quantity to the cart.

Example: 
Customer goes to your product "Happy Birthday Balloon Letters". The customer sees a text box:

When they hit Add to Cart, it will add the qty corresponding to the number of characters (excluding spaces). In addition, that phrase can be added to an optional field with the order.  This does not track availability of letters.


How to Implement
Step 1: 
The following CSS will need to be added to your website where 12345 is the inventory id number of the item you want to activate. 

.io_phrase_12345{display:block !important}

You add this text to the website under appearance > customize > custom CSS.

Step 2:
to pass the phrase into the checkout, add an optional field for leads in the software, and add the following code into Settings -> Pages -> WP checkout. Click the <> to in the toolbar, then under the first <script> tag you can add the following:

jQuery(function() {

    var field1 = jQuery("#customfield-99999");

    if (!field1.val()) {

        field1.val( getCookie("io_phrase_12345") || "N/A" );

    }

});

**If you plan on adding the phrase box for more than one rental, you need to add another optional field and add additional code to handle it for each other phrase box you plan to add. So for example:

Step 1 code needs to include a line for each rental phrase and should now look like:

.io_phrase_12345{display:block !important}

.io_phrase_67890{display:block !important}

Step 2 code also needs to include the handling for the extra rental phrases:

jQuery(function() {

    var field1 = jQuery("#customfield-99999");

    if (!field1.val()) {

        field1.val( getCookie("io_phrase_12345") || "N/A" );

    }

     var field2 = jQuery("#customfield-88888");

    if (!field2.val()) {

        field2.val( getCookie("io_phrase_67890") || "N/A" );

    } 

});

Keep in mind that you are replacing the #customfield-99999 and #customfield-88888 values with the values for the optional fields you created.  Those are shown after you save the optional field.  

Is this article helpful?
0 0 0