WooCommerce: Adding Variation Price Editing to Quick Edit

In a recent Business Bloomer Club discussion, a user with exclusively variable products faced a challenge: editing variation prices via the Quick Edit functionality.

By default, WooCommerce Quick Edit doesn’t support variable product prices, as it’s primarily built for simple products.

If you’re ready to dive into custom PHP and JavaScript, this post outlines how you can approach adding variation price editing to the Quick Edit feature.

Challenges with Variable Products in Quick Edit

Variable products differ significantly from simple products because they consist of multiple variations, each with its own price, SKU, and stock. While Quick Edit makes single-field updates seamless, it doesn’t natively handle multiple variations due to these complexities.

Why This Is Tricky

1. No Product Object Access: The Quick Edit form doesn’t directly pass the product ID or $product object to its fields.
2. Dynamic Variations: Unlike a simple product with one price, variable products can have a different price for each variation.
3. JavaScript Customization: Modifying Quick Edit for variations requires both backend PHP and frontend JavaScript.

Step 1: Backend PHP for Hidden Data

WooCommerce stores product data in a hidden DIV inside the Quick Edit form. Your task is to extend this behavior to include variation prices.

Here’s a starting point:

add_action( 'woocommerce_product_quick_edit_end', 'add_variation_price_quick_edit', 10, 0 );
function add_variation_price_quick_edit() {
    echo '<div class="hidden" id="woocommerce_inline_variation_data"></div>'; // Placeholder for variation prices.
}

This code adds a placeholder where you’ll later inject variation data dynamically.

Step 2: Using JavaScript for Dynamic Inputs

When you click “Quick Edit,” WooCommerce uses jQuery to populate fields from hidden data. Here’s a snippet to help you extend this:

jQuery(function($) {
    $('#the-list').on('click', '.editinline', function() {
        var post_id = $(this).closest('tr').attr('id').replace('post-', '');
        var variation_data = $('#woocommerce_inline_variation_data_' + post_id).html();

        if (variation_data) {
            var prices = variation_data.split(','); // Assuming comma-separated prices
            $('#quick_edit_variation_prices').val(prices.join(', ')); // Update your custom input
        }
    });
});

This script grabs variation data and populates a custom input field.

Step 3: Frontend Input for Multiple Prices

Since variations are dynamic, use a single input to hold all variation prices, separated by commas. Add this field to the Quick Edit form:

add_action( 'woocommerce_product_quick_edit_start', 'add_custom_price_input' );
function add_custom_price_input() {
    echo '<label>Variation Prices: <input type="text" id="quick_edit_variation_prices" name="quick_edit_variation_prices" /></label>';
}

Step 4: Saving the Data

You’ll need to parse the input and save it for each variation upon Quick Edit save:

add_action( 'woocommerce_product_quick_edit_save', 'save_variation_prices_quick_edit', 10, 2 );
function save_variation_prices_quick_edit( $product ) {
    if ( isset( $_POST['quick_edit_variation_prices'] ) ) {
        $prices = explode(',', sanitize_text_field($_POST['quick_edit_variation_prices']));
        $variations = $product->get_children();

        foreach ($variations as $key => $variation_id) {
            $variation = wc_get_product($variation_id);
            if (!empty($prices[$key])) {
                $variation->set_price($prices[$key]);
                $variation->save();
            }
        }
    }
}

Limitations and Considerations

1. UI Complexity: Displaying inputs for every variation is difficult. Using a single, comma-separated input simplifies the UI.
2. Data Validation: Ensure your JavaScript and PHP properly validate inputs to avoid overwriting data.
3. Advanced Features: For a full-fledged solution, consider custom admin pages or leveraging existing WooCommerce bulk editing plugins.

Conclusion

While extending WooCommerce Quick Edit for variation prices is challenging, it’s not impossible. By combining hidden fields, custom JavaScript, and backend PHP, you can achieve a working solution that allows seamless price updates. For more inspiration, check out this custom field Quick Edit tutorial to get started.