Enhance your WooCommerce checkout with custom checkboxes based on product variations. Streamline user experience and capture essential choices effortlessly.

Adding a Custom Checkbox to WooCommerce Checkout Based on Product Variation

WooCommerce is a powerful eCommerce platform that allows you to create an online store with ease. One of the many features it offers is the ability to customize the checkout process. In this guide, we will walk you through the steps to add a custom checkbox to the WooCommerce checkout page that is conditionally displayed based on a specific product variation. This feature can enhance the user experience by allowing customers to make selections that are relevant to their chosen products.

Understanding WooCommerce Product Variations

Before we dive into the code, it's essential to understand what product variations are in WooCommerce. Variations allow you to offer different options for a single product, such as size, color, or style. Each variation can have its own SKU, price, and stock status. For instance, if you sell t-shirts, a product variation might be a specific size and color combination.

Adding the Checkbox to the Checkout Page

To add a custom checkbox to the WooCommerce checkout page based on product variation, we will use WordPress hooks and WooCommerce functions. Below is a step-by-step guide, including the code to implement this feature.

Step 1: Create a Child Theme

It’s best practice to make customizations in a child theme to prevent them from being lost during theme updates. If you haven’t created a child theme yet, do so before proceeding with the code.

Step 2: Add the Checkbox Code

Open your child theme's functions.php file and add the following code:

add_action('woocommerce_review_order_before_submit', 'add_custom_checkbox');
function add_custom_checkbox() {
    if ( isset($_POST['variation_id']) && $_POST['variation_id'] == 'YOUR_VARIATION_ID' ) {
        echo '
';
        echo '';
        echo 'Add Custom Option';
        echo '
';
    }
}

Replace YOUR_VARIATION_ID with the actual ID of the product variation you want to target. You can find this ID in the WooCommerce product edit screen under the variations tab.

Step 3: Save Checkbox Value

Next, we need to ensure that the checkbox value is saved when the order is processed. Add the following code to your functions.php file:

add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkbox_value');
function save_custom_checkbox_value($order_id) {
    if ( ! empty($_POST['custom_checkbox']) ) {
        update_post_meta($order_id, 'Custom Checkbox', sanitize_text_field($_POST['custom_checkbox']));
    }
}

This code updates the order meta with the value of the checkbox when an order is placed.

Step 4: Display Checkbox Value in Admin

Finally, you may want to display the checkbox value in the WooCommerce admin order details. Add this code to your functions.php file:

add_action('woocommerce_admin_order_data_after_order_details', 'display_custom_checkbox_value');
function display_custom_checkbox_value($order) {
    $checkbox_value = get_post_meta($order->get_id(), 'Custom Checkbox', true);
    if ($checkbox_value) {
        echo '
Custom Option: ' . esc_html($checkbox_value) . '
';
    }
}

This function retrieves the checkbox value and displays it in the order details section of the WooCommerce admin area.

Conclusion

By following these steps, you can successfully add a custom checkbox to the WooCommerce checkout page that is displayed based on specific product variations. This customization not only enhances the shopping experience but also allows you to gather additional information from your customers during the checkout process. Remember to test your implementation thoroughly to ensure it works seamlessly with your WooCommerce store.