Adding the ability to change the quantity of the products in the cart or delete a product right on the WooCommerce Checkout page can reduce the hustle of the customers, avoiding leaving the Checkout and goind to Cart and back to Checkout. The Checkout page is crucial and the fewer the bounces, the better the conversion rate and completed orders. See what we’ll do:
More: Another big improvement which you can consider is to allow the users to change the quantity of the product on the shop page before adding to cart.
Here is how to add change quantity and delete product buttons on WooCommerce Checkout
To achieve this, we’re going to use 5 functions, all of which you should paste in your child theme’s functions.php file.
Remove product quantity count
Some themes have product count number on the checkout page like this:
The selected quantity displayed on the Your order table is also modifiable using the WooCommerce filter woocommerce_checkout_cart_item_quantity. We don’t want this, so lets remove it:
/*
* It will remove the selected quantity count from checkout page table.
*/
function webroom_remove_quantity_count( $cart_item, $cart_item_key ) {
$product_quantity= '';
return $product_quantity;
}
add_filter ('woocommerce_checkout_cart_item_quantity', 'webroom_remove_quantity_count', 10, 2 );Add Delete button and Quanitity field on the WooCommerce checkout page
To achieve this, we’ll use WooCommerce filter which allows us to modify the Product name row of each cart item: woocommerce_cart_item_name.
/*
* It will add Delete button, Quanitity field on the checkout page Your Order Table.
*/
function webroom_add_delete_and_quantity_on_checkout( $product_title, $cart_item, $cart_item_key ) {
/* Checkout page check */
if ( is_checkout() ) {
/* Get Cart of the user */
$cart = WC()->cart->get_cart();
foreach ( $cart as $cart_key => $cart_value ){
if ( $cart_key == $cart_item_key ){
$product_id = $cart_item['product_id'];
$_product = $cart_item['data'] ;
/* Step 1 : Add delete icon */
$return_value = sprintf(
'<a href="%s" class="remove" title="%s" data-product_id="%s" data-product_sku="%s">×</a>',
esc_url( wc_get_cart_remove_url( $cart_key ) ),
__( 'Delete', 'woocommerce' ),
esc_attr( $product_id ),
esc_attr( $_product->get_sku() )
);
/* Step 2 : Add product name */
$return_value .= ' <span class = "product_name" >' . $product_title . '</span>' ;
/* Step 3 : Add quantity selector */
if ( $_product->is_sold_individually() ) {
$return_value .= sprintf( ' <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_key );
} else {
$return_value .= woocommerce_quantity_input( array(
'input_name' => "cart[{$cart_key}][qty]",
'input_value' => $cart_item['quantity'],
'max_value' => $_product->backorders_allowed() ? '' : $_product->get_stock_quantity(),
'min_value' => '1'
), $_product, false );
}
return $return_value;
}
}
}else{
/*
* It will return the product name on the cart page.
* As the filter used on checkout and cart are same.
*/
$_product = $cart_item['data'] ;
$product_permalink = $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '';
if ( ! $product_permalink ) {
$return_value = $_product->get_title() . ' ';
} else {
$return_value = sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_title());
}
return $return_value;
}
}
add_filter ('woocommerce_cart_item_name', 'webroom_add_delete_and_quantity_on_checkout' , 10, 3 );Note: You see, we have one condition if ( is_checkout() ). The filter which we have used for modifying the product name column value (woocommerce_cart_item_name) is also called on the Cart page of your store. So to make sure that the code which we write does not break the functionality of the Cart page we have ensured that changes are only applied on the checkout page.
Updating WooCommerce Cart via Ajax call
In order to make things dynamic and actually change the quantity and update the cart totals on the Checkout page, we’ll use Ajax call.
/* Add js at the footer */
function webroom_add_quanity_js(){
if ( is_checkout() ) {
wp_enqueue_script( 'checkout_script', get_stylesheet_directory_uri() . '/js/add_quantity.js', '', '', false );
$localize_script = array(
'ajax_url' => admin_url( 'admin-ajax.php' )
);
wp_localize_script( 'checkout_script', 'add_quantity', $localize_script );
}
}
add_action( 'wp_footer', 'webroom_add_quanity_js', 10 );
function webroom_load_ajax() {
if ( !is_user_logged_in() ){
add_action( 'wp_ajax_nopriv_update_order_review', 'webroom_update_order_review' );
} else{
add_action( 'wp_ajax_update_order_review', 'webroom_update_order_review' );
}
}
add_action( 'init', 'webroom_load_ajax' );
function webroom_update_order_review() {
$values = array();
parse_str($_POST['post_data'], $values);
$cart = $values['cart'];
foreach ( $cart as $cart_key => $cart_value ){
WC()->cart->set_quantity( $cart_key, $cart_value['qty'], false );
WC()->cart->calculate_totals();
woocommerce_cart_totals();
}
wp_die();
}Note: We will enqueue “add_quantity.js” file in the footer and we will make sure that it is included when we are on the checkout page. You need to create file, named add_quantity.js to your theme/child theme.
jQuery(function( $ ) {
$( "form.checkout" ).on( "click", "input.qty", function( e ) {
var data = {
action: 'update_order_review',
security: wc_checkout_params.update_order_review_nonce,
post_data: $( 'form.checkout' ).serialize()
};
jQuery.post( add_quantity.ajax_url, data, function( response )
{
$( 'body' ).trigger( 'update_checkout' );
});
});
});Or Download add_quantity.js and place it in themes/yourtheme/js/ folder.
Related Articles
If you enjoyed reading this, then please explore our other articles below:
2019-2023 ©