Product Page

WooCommerce Custom Checkbox On Product

WooCommerce product page showing custom checkbox field

Pre-Requisites

There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About This Solution

This snippet generates a custom checkbox on the product page, which if checked, adds meta to the order. You’ll notice if the checkbox is ticked and the product is added to the cart and purchased, the meta key and value is shown below the product name in the mini-cart, cart, checkout, thank you page, emails, and my account order view. In this particular example we add a checkbox to indicate whether the product is a gift.

/**
 * Snippet Name:     WooCommerce Custom Checkbox On Product
 * Snippet Author:   ecommercehints.com
 */

// Add the new field
add_action( 'woocommerce_before_add_to_cart_button', 'ecommercehints_custom_product_checkbox_field' );

function ecommercehints_custom_product_checkbox_field() {
   echo '<div class="ecommercehints_custom_product_checkbox_field">
      <label for="is-gift-checkbox">Is this a gift? </label>
      <input type="checkbox" id="is-gift-checkbox" name="is-gift-checkbox" value="Yes">
   </div>';
}

// Save the field to the cart data
add_filter( 'woocommerce_add_cart_item_data', 'ecommercehints_save_custom_checkbox_to_cart_data', 10, 3 );
function ecommercehints_save_custom_checkbox_to_cart_data( $cart_item_data, $product_id, $variation_id ) {
   if ( !empty( $_POST['is-gift-checkbox'] ) ) {
      $cart_item_data['is-gift-checkbox'] = sanitize_text_field( $_POST['is-gift-checkbox']);
   }
   return $cart_item_data;
}

// Show custom field data on cart, checkout, and thank you page.
add_filter( 'woocommerce_get_item_data', 'ecommercehints_show_custom_field_data_under_product_name', 10, 2 );
function ecommercehints_show_custom_field_data_under_product_name( $item_data, $cart_item ) {

   if ( !empty( $cart_item['is-gift-checkbox'] ) ) {
      $item_data[] = array(
         'key'     => 'Is this a gift?',
         'value'   => $cart_item['is-gift-checkbox'],
      );
   }
   return $item_data;
}

// Save the custom field data as order meta
add_action( 'woocommerce_checkout_create_order_line_item', 'ecommercehints_add_custom_field_data_as_order_meta', 10, 4 );
function ecommercehints_add_custom_field_data_as_order_meta( $item, $cart_item_key, $values, $order ) {
   if ( !empty( $values['is-gift-checkbox'] ) ) {
      $item->add_meta_data( 'Is this a gift?', $values['is-gift-checkbox'] );
   }
}

Product Custom Checkbox Value Showing In The Mini-Cart

WooCommerce custom product checkbox value showing in the minicart

Product Custom Checkbox Value Showing In The Cart

WooCommerce custom product checkbox value showing in cart

Product Custom Checkbox Value Showing In The Checkout

WooCommerce custom product checkbox value showing in checkout summary

Product Custom Checkbox Value Showing On The Thank You Page

 

WooCommerce custom product checkbox value showing on the thank you page

Product Custom Product Checkbox Showing In The Emails

WooCommerce custom product checkbox value showing in the emails

Product Custom Checkbox Value Showing In The Admin Dashboard Order Editor

WooCommerce custom product checkbox value showing in the admin dashboard order editor

Product Custom Checkbox Value Showing In The My Account Dashboard

WooCommerce custom product checkbox value showing in the my account order view

Snippet Benefits

  • Allow customers to indicate a true or false meta value with a product.

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 20% off on your first month with us.

26027
WELCOME OFFER