How to Customize the WooCommerce Product Page with a Product Input Checkbox Field?

Certain products in your online store might require additional services after delivery. For example, when selling a TV or water purifier, the customer might also be looking for installation services. In such cases, you might be in a dilemma about how to seamlessly integrate additional service offerings into the product purchasing process without causing complexity or confusion for customers. Don’t worry! Let’s implement this WooCommerce customization via a checkbox that allows store owners to offer post-delivery services.

Solution: Customize the WooCommerce Product Page with a Product Input Checkbox Field

The code snippet will help store owners to offer additional services such as ‘Setup and installation service’ on the product page.

add_action( 'woocommerce_before_add_to_cart_button', 'ts_display_custom_checkbox_field', 9 );
function ts_display_custom_checkbox_field() {
    echo '<div class="custom-checkbox-field">';
    woocommerce_form_field( 'ts_setup_installation_checkbox', array(
        'type' => 'checkbox',
        'label' => 'Add Setup and Installation Service?',
    ));
    echo '</div>';
}

// Add custom checkbox value to cart item data for all products
add_filter( 'woocommerce_add_cart_item_data', 'ts_add_custom_checkbox_to_cart', 10, 2 );
function ts_add_custom_checkbox_to_cart( $cart_item_data, $product_id ) {
    if ( isset( $_POST['ts_setup_installation_checkbox'] ) && $_POST['ts_setup_installation_checkbox'] ) {
        $cart_item_data['ts_setup_installation_checkbox'] = true;
    }
    return $cart_item_data;
}

// Display custom checkbox in cart and checkout
add_filter( 'woocommerce_get_item_data', 'ts_display_custom_checkbox_in_cart', 10, 2 );
function ts_display_custom_checkbox_in_cart( $cart_data, $cart_item ) {
    if ( isset( $cart_item['ts_setup_installation_checkbox'] ) && $cart_item['ts_setup_installation_checkbox'] ) {
        $cart_data[] = array(
            'name' => 'Setup and Installation Service',
            'value' => 'Yes',
        );
    }
    return $cart_data;
}

// Save the custom checkbox field value to the order items
add_action( 'woocommerce_checkout_create_order_line_item', 'ts_save_custom_checkbox_to_order_items', 10, 4 );
function ts_save_custom_checkbox_to_order_items( $item, $cart_item_key, $values, $order ) {
    if ( isset( $values['ts_setup_installation_checkbox'] ) && $values['ts_setup_installation_checkbox'] ) {
        $item->add_meta_data( 'Setup and Installation Service', 'Yes', true );
    }
}

// Display custom checkbox in admin order items table
add_filter( 'woocommerce_order_item_name', 'ts_setup_installation_display_in_admin_order_items_table', 10, 2 );
function ts_setup_installation_display_in_admin_order_items_table( $item_name, $item ) {
    // Check if the item has setup and installation service associated with it
    if ( $setup_installation = $item->get_meta( 'Setup and Installation Service' ) ) {
        // Append the setup and installation service to the item name
        $item_name .= '<br><small>' . esc_html__( 'Setup and Installation Service:', 'your-textdomain' ) . ' ' . esc_html( $setup_installation ) . '</small>';
    }
    return $item_name;
}

Output

When the customer visits the product page and selects the checkbox ‘ ‘Setup and installation service’, the selection is saved and displayed throughout the order process.

To conclude, the above solution demonstrates how to implement a checkbox field on your WooCommerce product page. However, if you run a custom furniture store where you need to capture various specifications, multiple input fields will be necessary.

Simple code snippets might not be sufficient for such complex requirements. In these cases, a plugin like Product Input Fields for WooCommerce is ideal, as it allows you to add various input types such as checkboxes, date pickers, file uploads, and more, making your product pages fully customizable and user-friendly.