How to Add Remove Icon to WooCommerce Checkout Page

In the checkout page order summary, it is important to allow the user to remove the product that was added to the cart but they don’t want to proceed to checkout with the product.

To add remove icon to WooCommerce checkout page you need to add a filter that will add the icon to the front of the product on the order summary.

Remove Product Button WooCommerce

This remove button allows users to remove one item at a time from the items added to the cart and they reduce the total price at the checkout page.

This remove icon is by default found on the cart page but in most WooCommerce themes, it is not added to the checkout field.

Add  Remove Icon to WooCommerce Checkout Page

Today I want to share with you a simple code snippet that you can add to the functions.php of your child theme the code will add the remove icon to the checkout field ad shown on the image below:

If this removes product button is missing from your checkout page and you want to add it to the order summary as shown in the image above, the following are the steps that you should take :

1. Open the functions.php file of your active theme but preferably your child theme. You can access the theme files through the WordPress dashboard or via CPanel or FTP.
2. Add this code snippet to the functions.php file and save the changes :

/**
 * Add Remove button to WooCommerce checkout page - cart items  
 */ 

add_filter('woocommerce_cart_item_name', 'njengah_filter_wc_cart_item_remove_link', 10, 3);

function njengah_filter_wc_cart_item_remove_link($product_name, $cart_item, $cart_item_key)
{
  
    if (is_checkout()) {

        $product_name .= apply_filters('woocommerce_cart_item_remove_link', sprintf(
            '<a href="%s" rel="nofollow" class="remove-icon" style="float:left;">x</a>',
            esc_url(WC_Cart::get_remove_url($cart_item_key)),
            __('Remove this item', 'woocommerce'),
            esc_attr($cart_item['product_id']),
            esc_attr($cart_item['data']->get_sku())
        ), $cart_item_key);

        return $product_name;
    }

}

How the Code Works

This code uses a filter that checks for all the cart items in the checkout page and filters the content and before the product name is printed it adds the link to remove the product from the cart and using an X as the anchor text of the WooCommerce remove link.

If you would wish to edit this option further by adding your custom remove the product link text, you should edit this line of code :

'<a href="%s" rel="nofollow" class="remove-icon" style="float:left;">x</a>',

To style the remove icon you can use the CSS styles as I have used in the example above. The following is the CSS code :

.remove-icon {
    padding: 5px;
    padding-top: 0; 
    color: red;
    font-size: 16px;
    font-weight: bold;
}

 

Similar Articles