Adding custom product add-ons in WooCommerce can greatly enhance the shopping experience by allowing customers to customize their products. This tutorial will guide you through the process of adding product add-ons without using a plugin, keeping your WooCommerce store lightweight and efficient.
Step 1: Add Custom Fields to the Product Page
First, we need to add custom fields to the WooCommerce product page where customers can select their add-ons.
/*
* Snippet: WooCommerce Product Add-Ons Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1253
* Tested with WooCommerce 10.7.0
* "Add custom fields to the product page"
*/
add_action('woocommerce_before_add_to_cart_button', 'wcsuccess_display_custom_fields');
function wcsuccess_display_custom_fields() {
global $product;
// Check if the product has add-ons
$product_id = $product->get_id();
$product_addons = get_post_meta($product_id, '_product_addons', true);
if (!empty($product_addons)) {
echo '<div class="product-addons">';
foreach ($product_addons as $addon) {
echo '<div class="addon">';
echo '<label for="addon-' . sanitize_title($addon['name']) . '">' . esc_html($addon['name']) . '</label>';
echo '<input type="checkbox" name="product_addons[' . esc_attr($addon['name']) . ']" id="addon-' . sanitize_title($addon['name']) . '" value="' . esc_attr($addon['price']) . '">';
echo '</div>';
}
echo '</div>';
}
}
Step 2: Save the Custom Fields Data
When a customer selects the add-ons and adds the product to the cart, we need to save this data.
/*
* Snippet: WooCommerce Product Add-Ons Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1253
* Tested with WooCommerce 10.7.0
* "Save custom fields data"
*/
add_filter('woocommerce_add_cart_item_data', 'wcsuccess_save_custom_fields', 10, 2);
function wcsuccess_save_custom_fields($cart_item_data, $product_id) {
if (isset($_POST['product_addons'])) {
$cart_item_data['product_addons'] = $_POST['product_addons'];
$cart_item_data['unique_key'] = md5(microtime().rand()); // Ensure unique line item
}
return $cart_item_data;
}
Step 3: Display Custom Fields in the Cart
To display the selected add-ons in the cart, we need to modify the cart item data.
/*
* Snippet: WooCommerce Product Add-Ons Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1253
* Tested with WooCommerce 10.7.0
* "Display custom fields in the cart"
*/
add_filter('woocommerce_get_item_data', 'wcsuccess_display_custom_fields_in_cart', 10, 2);
function wcsuccess_display_custom_fields_in_cart($item_data, $cart_item) {
if (isset($cart_item['product_addons'])) {
foreach ($cart_item['product_addons'] as $name => $price) {
$item_data[] = array(
'name' => esc_html($name),
'value' => wc_price($price)
);
}
}
return $item_data;
}
Step 4: Add Custom Fields Prices to Cart Total
The add-ons’ prices need to be added to the cart total.
/*
* Snippet: WooCommerce Product Add-Ons Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1253
* Tested with WooCommerce 10.7.0
* "Add custom fields prices to cart total"
*/
add_action('woocommerce_before_calculate_totals', 'wcsuccess_add_custom_fields_price_to_cart_total');
function wcsuccess_add_custom_fields_price_to_cart_total($cart) {
if (is_admin() && !defined('DOING_AJAX')) {
return;
}
foreach ($cart->get_cart() as $cart_item) {
if (isset($cart_item['product_addons'])) {
foreach ($cart_item['product_addons'] as $price) {
$cart_item['data']->set_price($cart_item['data']->get_price() + $price);
}
}
}
}
Step 5: Save Custom Fields Data to Order
Finally, we need to save the custom fields data to the order.
/*
* Snippet: WooCommerce Product Add-Ons Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1253
* Tested with WooCommerce 10.7.0
* "Save custom fields data to order"
*/
add_action('woocommerce_checkout_create_order_line_item', 'wcsuccess_save_custom_fields_to_order', 10, 4);
function wcsuccess_save_custom_fields_to_order($item, $cart_item_key, $values, $order) {
if (isset($values['product_addons'])) {
foreach ($values['product_addons'] as $name => $price) {
$item->add_meta_data($name, wc_price($price), true);
}
}
}
Testing the Implementation
After implementing the above code snippets, follow these steps to test your custom product add-ons:
- Add a Product with Add-Ons: Visit the product page and check if the add-ons appear correctly.
- Add the Product to Cart: Ensure that the selected add-ons are saved and displayed in the cart.
- Check the Cart Total: Verify that the prices of the add-ons are included in the cart total.
- Complete a Test Order: Place a test order and confirm that the add-ons data is saved correctly in the order details.
Benefits of Custom Product Add-Ons
- Enhanced Customer Experience: Allows customers to customize their products, leading to higher satisfaction.
- Increased Revenue: Offer additional features or options for an extra price.
- No Plugin Overhead: Keep your WooCommerce store lightweight and fast by avoiding additional plugins.
Implementing custom product add-ons without a plugin can significantly enhance your WooCommerce store’s functionality, offering a personalized shopping experience for your customers while keeping your site efficient. By using the code snippets provided, you can achieve this seamlessly.
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Stay In Touch
