In WooCommerce, you might run into a scenario where you want to add the same product to the cart multiple times, but with different custom data for each item. This is especially useful for products that have customizable options, like personalized gifts, custom variations, or additional add-ons that change the price or other attributes.
By default, WooCommerce doesn’t allow duplicate items with different custom data in the cart. However, with a little custom coding, you can modify WooCommerce’s behavior to support this feature. In this article, we’ll walk you through how to achieve this functionality.
To handle this the best approch is to add the product to cart using ajax that way you can deal things easily what you need to do is add you own add to cart button on single page and use jquery/js to add to cart the product and using ajax to send the custom data to a callback function let me explain this in a batter way with something i made.
in above screenshot you can see i added some custom selections for this product like modal, rim, vehicle year etc.
now this is not a variable product its a simple product but what we want is that this product when added to cart with custom selection should go to cart and upon changing selections and adding it again should add another of this product with custom data in cart it should not over ride it so what i did is using jQuery/JS for my add to cart button and send this custom selection to a callback function like this
[cc lang="js" tab_size="2" lines="40"]
jQuery(document).ready(function($){
$(document).on('click','.add_to_cart_sparewheel',function(){
var dataArray = [
{ name: 'service-selection', value: servicesvalue, price: serviceselection },
{ name: 'vehicle-modal', value: vehiclemodalvalue, price: vehiclemodalprice },
{ name: 'rim-type', value: rimtypevalue, price: rimtypeprice },
{ name: 'vehicle-year', value: vehicleyearvalue, price: vehicleyearprice },
{ name: 'accessories-type', value: accessoriestypevalue, price: accessoriestypeprice }
];
$.ajax({
url: wolfizSpareWheelAjax.ajax_url,
type: 'POST',
data: {
action: 'spare_wheel_add_to_cart',
pro_id: pro_id,
qty : qty,
dataArray:dataArray
},
success: function(response) {
// redirect or show success message
}
});
})
})
[/cc]Now lets look at the code of the callback what needed to be done over there to make this work as our needs.
[cc lang="php" tab_size="2" lines="40"]
add_action('wp_ajax_spare_wheel_add_to_cart',[$this,'spare_wheel_add_to_cart_callback']);
add_action('wp_ajax_nopriv_spare_wheel_add_to_cart',[$this,'spare_wheel_add_to_cart_callback']);
public function spare_wheel_add_to_cart_callback() {
if (isset($_POST['pro_id'])) {
$pro_id = sanitize_text_field($_POST['pro_id']);
$pro_qty = isset($_POST['qty']) ? intval($_POST['qty']) : 1;
$custom_data = isset($_POST['dataArray']) ? $_POST['dataArray'] : [];
$additional_price = 0;
foreach ($custom_data as $item) {
if (isset($item['price']) && is_numeric($item['price'])) {
$additional_price += floatval($item['price']);
}
}
$additional_price_total = $additional_price * $pro_qty;
$product = wc_get_product($pro_id);
$product_base_price = $product->get_price();
$new_price = ($product_base_price + $additional_price) * $pro_qty;
add_filter('woocommerce_add_cart_item_data', function($cart_item_data, $product_id) use ($additional_price_total, $custom_data, $new_price) {
$cart_item_data['custom_price'] = $additional_price_total;
$cart_item_data['custom_data'] = $custom_data;
$cart_item_data['new_price'] = $new_price;
return $cart_item_data;
}, 10, 2);
WC()->cart->add_to_cart($pro_id, $pro_qty, 0, [], $custom_data);
wp_send_json_success(['message' => 'Product added to cart successfully.']);
} else {
wp_send_json_error(['message' => 'Invalid product ID.']);
}
wp_die();
}
[/cc]here you can see the main function which does this job is the woocommerece add to cart function
WC()->cart->add_to_cart($pro_id, $pro_qty, 0, [], $custom_data);
this function gives you an option to add custom data you can use the last 5th parameter to send custom data any change in this custom data will create a new cart item of this same product like shown in the below screenshot
I hope this helps you! If you need any further customization or assistance like this, feel free to reach out. You can always contact me via email for any queries or additional support.
