Debugging Custom Fields With WooCommerce Variations Dynamically

This code enables you to test the values for your custom fields on the frontend of your single variable product page. The code will dynamically display the values for your each variation field when the variation is selected or changed.

The code assumes you have coded custom fields for variations in PHP with keys that match whats in the jQuery.

In this case, the custom field keys are :

min_quantity
max_quantity
step_quantity

As seen in the following jQuery variables :

var minQty  = parseInt(variation.min_quantity, 10) || 1;
var maxQty  = parseInt(variation.max_quantity, 10) || 100;
var stepQty = parseInt(variation.step_quantity, 10) || 1;

Here’s the full code.

add_action('wp_enqueue_scripts', 'debug_variation_fields');
function debug_variation_fields() {

    if ( is_product() ) {
    
        wp_enqueue_script('jquery-ui-slider'); // Ensure jQuery UI Slider is loaded

        wp_add_inline_script('jquery-ui-slider', "
            jQuery(function($) {
                // Run when a variation is selected
                $('form.variations_form').on('found_variation', function(event, variation) {
                    var minQty  = parseInt(variation.min_quantity, 10) || 1;
                    var maxQty  = parseInt(variation.max_quantity, 10) || 100;
                    var stepQty = parseInt(variation.step_quantity, 10) || 1;

                    var \$qtyInput = $('input.qty');

                    // Update input attributes
                    \$qtyInput.attr({
                        'min': minQty,
                        'max': maxQty,
                        'step': stepQty
                    }).val(minQty).trigger('change');

                    // Remove existing slider (if any)
                    $('#quantity-slider').remove();

                    // Create and insert the slider
                    var \$slider = $('<div id=\"quantity-slider\" style=\"margin: 10px 0;\"></div>');
                    \$slider.insertAfter(\$qtyInput);

                    \$slider.slider({
                        min: minQty,
                        max: maxQty,
                        step: stepQty,
                        value: minQty,
                        slide: function(event, ui) {
                            \$qtyInput.val(ui.value).trigger('change');
                        }
                    });

                    // Debug output
                    $('#custom-qty-debug').remove();
                    $('<div id=\"custom-qty-debug\" style=\"margin-top: 10px; font-size: 14px;\"></div>')
                        .text(`Min: \${minQty}, Max: \${maxQty}, Step: \${stepQty}`)
                        .insertAfter(\$slider);
                });
            });
        ");
    }
}

This code enables you to check that the values for your custom fields are saved and passed correctly to your jQuery as well as being included in your variation data on your single variable product pages using WooCommerce.

Related Tutorials