Adding a gift options checkbox under the Add to Cart button to your WooCommerce product pages allows customers to mark items as gifts before adding them to their cart. This feature can enhance the shopping experience and cater to customers looking to purchase gifts for others.
/**
* Snippet Name: Adding a checkbox under the add to cart button
* Snippet Author: wpsnippets.dev
*/
//Adding a Checkbox Field to the Product Page
function wps_add_custom_checkbox_field_to_product() {
echo '<div class="wps_custom-checkbox-field">
<label for="is-gift-checkbox">' . __('Add a Gift Box?', 'textdomain') . '</label>
<input type="checkbox" id="is-gift-checkbox" name="is-gift-checkbox" value="yes">
</div>';
}
add_action( 'woocommerce_after_add_to_cart_button', 'wps_add_custom_checkbox_field_to_product' );
// Saving Checkbox State to Cart Data
function wps_save_custom_checkbox_to_cart_data( $cart_item_data, $product_id, $variation_id ) {
if ( isset( $_POST['is-gift-checkbox'] ) && $_POST['is-gift-checkbox'] === 'yes' ) {
$cart_item_data['is_gift'] = true;
}
return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'wps_save_custom_checkbox_to_cart_data', 10, 3 );
// Displaying Custom Field Data on Cart, Checkout, and Thank You Page
function wps_display_custom_field_data_under_product_name( $item_data, $cart_item ) {
if ( !empty( $cart_item['is_gift'] ) && $cart_item['is_gift'] ) {
$item_data[] = array(
'key' => __('Add a Gift Box?', 'textdomain'),
'value' => __('Yes', 'textdomain'),
);
}
return $item_data;
}
add_filter( 'woocommerce_get_item_data', 'wps_display_custom_field_data_under_product_name', 10, 2 );
//Saving Custom Field Data as Order Meta
function wps_save_custom_field_data_as_order_meta( $item, $cart_item_key, $values, $order ) {
if ( !empty( $values['is_gift'] ) && $values['is_gift'] ) {
$item->add_meta_data( __('Add a Gift Box?', 'textdomain'), __('Yes', 'textdomain') );
}
}
add_action( 'woocommerce_checkout_create_order_line_item', 'wps_save_custom_field_data_as_order_meta', 10, 4 );
Code Explanation
- Adding a Checkbox Field to the Product Page:
- The function wps_add_custom_checkbox_field_to_product() is responsible for displaying a checkbox labeled “Add a Gift Box?” below the Add to Cart button on the WooCommerce single product page.
- It adds a simple HTML structure using the woocommerce_after_add_to_cart_button action hook. The label and checkbox input are generated with the help of a function.
- Saving Checkbox State to Cart Data:
- The function wps_save_custom_checkbox_to_cart_data() is hooked to woocommerce_add_cart_item_data.
- This function checks if the checkbox is checked ($_POST[‘is-gift-checkbox’] === ‘yes’) and, if so, adds a flag (is_gift) to the cart item data indicating that the item is a gift.
- Displaying Custom Field Data on Cart, Checkout, and Thank You Page:
- The function wps_display_custom_field_data_under_product_name() uses the woocommerce_get_item_data filter to display the custom field data under the product name in the cart, checkout, and thank you page.
- It checks if the
is_giftflag is set and, if so, adds a data entry indicating that the item is a gift.
- Saving Custom Field Data as Order Meta:
- The function wps_save_custom_field_data_as_order_meta() is hooked to woocommerce_checkout_create_order_line_item. It saves the custom field data (whether the item is a gift) as order meta data.
- It checks if the is_gift flag is set and, if so, adds meta data to the order item with the label “Add a Gift Box?” and the value “Yes”.