Need Help Understanding HOW This PHP/jQuery Script Works (Not WHAT It Does)

[Adam Wentz]

I am using the attached script, which is PHP and jQuery (with some AJAX mixed in for good measure), and is used in connection with WordPress/Woocommerce to add a checkout field to the checkout form that, when checked, will add the associated product to the customer's current order, using the product's ID.

I would like to understand better how this script works. That is, I would like each function explained in layman's terms, because I would like to modify to the script to work with multiple checkboxes and multiple products. (For the record: I made the mistake of heading over to Stack Overflow, forgetting how ego-maniacal and rude most of them are over there. Yikes! I've always had much more pleasant experiences here on the ranch. So, thanks y'all!)  

/* Add Order Bump Offer to Checkout Form */
add_action( 'woocommerce_before_order_notes', 'custom_order_bumps_checkout_fields' );
function custom_order_bumps_checkout_fields() {
    $value = WC()->session->get('add_a_product');

	echo '<div id="order-bump" style="margin-top: 50px; padding: 15px; border: 2px; border-style: dotted; border-color: #00adef">
	<h2 id="order-bump-title" style="font-weight:bold">Wait! Add <span style="text-decoration: underline">MORE</span> Value To Your Order Now!</h2>
	<p id="order-bump-content" style="line-height:1.5">You can add more value to your order by adding an additional 2 Pack for only $5.99 more. That\'s only $3.99 per unit! (Compared to the $4.99 per unit regular price)</p>';
    woocommerce_form_field( 'cb_add_product', array(
        'type'          => 'checkbox',
        'label'         => '  ' . __('Yes, add another 2 Pack for only $5.99 more!'),
        'class'         => array('form-row-wide'),
    ), $value == 'yes' ? true : false );
	echo '</div>';
}


// The jQuery Ajax request
add_action( 'wp_footer', 'checkout_custom_jquery_script' );
function checkout_custom_jquery_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):

    // Remove "ship_different" custom WC session on load
    if( WC()->session->get('add_a_product') ){
        WC()->session->__unset('add_a_product');
    }
    if( WC()->session->get('product_added_key') ){
        WC()->session->__unset('product_added_key');
    }
    // jQuery Ajax code
    ?>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof wc_checkout_params === 'undefined')
            return false;

        $('form.checkout').on( 'change', '#cb_add_product', function(){
            var value = $(this).prop('checked') === true ? 'yes' : 'no';

            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'add_a_product',
                    'add_a_product': value,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                    console.log(result);
                }
            });
        });
    });
    </script>
    <?php
    endif;
}

// The Wordpress Ajax PHP receiver
add_action( 'wp_ajax_add_a_product', 'checkout_ajax_add_a_product' );
add_action( 'wp_ajax_nopriv_add_a_product', 'checkout_ajax_add_a_product' );
function checkout_ajax_add_a_product() {
    if ( isset($_POST['add_a_product']) ){
        WC()->session->set('add_a_product', esc_attr($_POST['add_a_product']));
        echo $_POST['add_a_product'];
    }
    die();
}

// Add remove add-on item
add_action( 'woocommerce_before_calculate_totals', 'adding_removing_specific_product' );
function adding_removing_specific_product( $cart ) {
    if (is_admin() && !defined('DOING_AJAX'))
        return;

    if ( did_action( 'woocommerce_before_calculate_totals' ) >= 2 )
        return;

    // The specific Product ID
    $product_id = 517;

    if( WC()->session->get('add_a_product') == 'yes' && ! WC()->session->get('product_added_key') )
    {
        $cart_item_key = $cart->add_to_cart( $product_id );
        WC()->session->set('product_added_key', $cart_item_key);
    }
    elseif( WC()->session->get('add_a_product') == 'no' && WC()->session->get('product_added_key') )
    {
        $cart_item_key = WC()->session->get('product_added_key');
        $cart->remove_cart_item( $cart_item_key );
        WC()->session->__unset('product_added_key');
    }
}

[Adam Wentz]

I guess it might be helpful to share what I already know about this script.


Let's start with this function, the first one in the script:

add_action( 'woocommerce_before_order_notes', 'custom_order_bumps_checkout_fields' );
function custom_order_bumps_checkout_fields() {
    $value = WC()->session->get('add_a_product');
 
    echo '<div id="order-bump" style="margin-top: 50px; padding: 15px; border: 2px; border-style: dotted; border-color: #00adef">
    <h2 id="order-bump-title" style="font-weight:bold">Wait! Add <span style="text-decoration: underline">MORE</span> Value To Your Order Now!</h2>
    <p id="order-bump-content" style="line-height:1.5">You can add more value to your order by adding an additional 2 Pack for only $5.99 more. That\'s only $3.99 per unit! (Compared to the $4.99 per unit regular price)</p>';
    woocommerce_form_field( 'cb_add_product', array(
        'type'          => 'checkbox',
        'label'         => '  ' . __('Yes, add another 2 Pack for only $5.99 more!'),
        'class'         => array('form-row-wide'),
    ), $value == 'yes' ? true : false );
    echo '</div>';
}

This function, which I modified a bit from the original code, echos a div (that I've applied custom styling to). Within that div it places a headline, some paragraph text (the "content"), and then adds a checkbox field with a label. The checkbox field is added from an array that contains all the necessary information about it. Oh yeah, and the

add_action( 'woocommerce_before_order_notes', 'custom_order_bumps_checkout_fields' );

tells WordPress where the function should be hooked in at. In this case, it uses a Woocommerce hook to place the div and all its related content on the checkout form in the hook area BEFORE the area where the order notes field appears (if it's enabled).