Adding product add-ons to WooCommerce without a plugin can be achieved using custom fields and hooks. Here’s a step-by-step guide:
Scenario: Add a Custom Add-On Field (e.g., Gift Message)
This guide demonstrates how to add a text field for customers to enter a “Gift Message” on the product page and save it with the order.
Step 1: Add the Add-On Field to the Product Page
Use the woocommerce_before_add_to_cart_button hook to display the add-on field on the single product page.
Code: Add this to your theme’s functions.php file:
// Add custom add-on field to product page
add_action('woocommerce_before_add_to_cart_button', 'add_custom_product_addon_field');
function add_custom_product_addon_field() {
echo '<div class="custom-product-addon">';
echo '<label for="gift_message">' . __('Gift Message', 'woocommerce') . '</label>';
echo '<textarea id="gift_message" name="gift_message" rows="3" cols="20" placeholder="Enter your gift message"></textarea>';
echo '</div>';
}
Step 2: Validate the Add-On Field
Ensure the field is not empty (if required) before adding the product to the cart.
Code:
// Validate custom add-on field
add_filter('woocommerce_add_to_cart_validation', 'validate_custom_product_addon_field', 10, 2);
function validate_custom_product_addon_field($passed, $product_id) {
if (isset($_POST['gift_message']) && empty($_POST['gift_message'])) {
wc_add_notice(__('Please enter a gift message.', 'woocommerce'), 'error');
return false;
}
return $passed;
}
Step 3: Save the Add-On Field to the Cart
Save the add-on field value in the cart session.
Code:
// Save custom add-on field to cart item data
add_filter('woocommerce_add_cart_item_data', 'save_custom_product_addon_field', 10, 2);
function save_custom_product_addon_field($cart_item_data, $product_id) {
if (isset($_POST['gift_message'])) {
$cart_item_data['gift_message'] = sanitize_text_field($_POST['gift_message']);
$cart_item_data['unique_key'] = md5(microtime()); // Prevent cart item merging
}
return $cart_item_data;
}
Step 4: Display the Add-On Field in the Cart and Checkout
Show the add-on field value in the cart and checkout pages.
Code:
// Display custom add-on field in the cart
add_filter('woocommerce_get_item_data', 'display_custom_product_addon_field_in_cart', 10, 2);
function display_custom_product_addon_field_in_cart($item_data, $cart_item) {
if (isset($cart_item['gift_message'])) {
$item_data[] = array(
'name' => __('Gift Message', 'woocommerce'),
'value' => $cart_item['gift_message'],
);
}
return $item_data;
}
Step 5: Save the Add-On Field to the Order
Save the add-on field value to the order metadata.
Code:
// Save custom add-on field to order
add_action('woocommerce_checkout_create_order_line_item', 'save_custom_product_addon_field_to_order', 10, 4);
function save_custom_product_addon_field_to_order($item, $cart_item_key, $values, $order) {
if (isset($values['gift_message'])) {
$item->add_meta_data(__('Gift Message', 'woocommerce'), $values['gift_message']);
}
}
Step 6: Display the Add-On Field in the Admin Order Details
Show the add-on field in the order details for the admin.
Code:
// Display custom add-on field in the admin order
add_action('woocommerce_admin_order_item_headers', 'display_custom_product_addon_field_in_admin_order', 10, 1);
function display_custom_product_addon_field_in_admin_order($item) {
$gift_message = $item->get_meta(__('Gift Message', 'woocommerce'));
if ($gift_message) {
echo '<p><strong>' . __('Gift Message:', 'woocommerce') . '</strong> ' . $gift_message . '</p>';
}
}
Final Output
- On the Product Page: A “Gift Message” text area will appear.
- In the Cart and Checkout: The entered message will be displayed.
- In the Order Admin Panel: The admin can view the gift message under the order details.
You can replace “Gift Message” with any other add-on field or functionality you need (e.g., dropdown, checkbox). Let me know if you need further customization!