Therichpost

How to add remove Product button on Woocommerce Checkout Page?

·

therichpost Avatar
therichpost
woocommerce

Hello, welcome to therichpost.com. In this post, I will tell you, How to add remove Product button on Woocommerce Checkout Page?  WordPress is the best cms and Woocommerce is the best Ecommerce plugin. Woocommerce hooks(add_action, add_filter) give us the power to edit or change the code without interruption into the files and this is the best thing about wordpress. Now I am going to tell you how the hooks work.

Here is the working Image:

Add remove Product button on Woocommerce Checkout Page

 

Here is the working and tested hook and you need to add this into your theme’s functions.php file:

add_filter('woocommerce_cart_item_name', 'custom_filter_wc_cart_item_remove_link', 10, 3);
function custom_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" style="float:left;">&times;</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;
    }

}

 There are so many hooks in wordpress and i will let you know all. If you have any query related to this post then do ask questions or comment below. Thank you.

Other Posts

Comments

19 responses to “How to add remove Product button on Woocommerce Checkout Page?”

  1. Stefan Avatar
    Stefan

    This has been very helpful however it is causing issues on the cart page with the product name disappearing.
    Is there away to only apply this to the checkout page?

    The site we are working on is noble-pro.com

  2. Ajay Malhotra Avatar
    Ajay Malhotra

    Did you add my code carefully?I have applied the check that is_checkout.

    Thank you

  3. abzz1290 Avatar
    abzz1290

    Hi, it is doing well in checkout page but in cart page product name is not showing. i added code in theme funtion.php
    then remove it and add in code snippet plugin both having same issue. also how can we edit x icon its just small and very basic x
    thank you for a least giving me hope that x in checkout is possible but it will more helpful if product names in cart page shows. thank you

  4. Ajay Malhotra Avatar
    Ajay Malhotra

    Hi, but this code is for checkout page only. It should not effect on cart page.

  5. abzz1290 Avatar
    abzz1290

    But it is conflicting name of products in cart page when above code is remove then cart page shows product name.

  6. Ajay Malhotra Avatar
    Ajay Malhotra

    I will try this myself and let you know.
    Thanks

  7. Francisco Avatar
    Francisco

    Hello Ajay I’m having the same problem! I hope some enlightened being can solve this and share the answer here… I’ve already searched all over Google and still can’t find a solution!

  8. Francisco Arrigoni Avatar
    Francisco Arrigoni

    Hello again! I found the solution, only one line of code was missing:

    add_filter(‘woocommerce_cart_item_name’, ‘custom_filter_wc_cart_item_remove_link’, 10, 3);
    function custom_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(
    ‘ב,
    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;}
    else return $product_name;
    }

  9. Ajay Malhotra Avatar
    Ajay Malhotra

    Great!! and thank you

  10. Simon Jhonny Avatar
    Simon Jhonny

    It’s Working Great, I really appreciate you and thankful to you

  11. Ajay Malhotra Avatar
    Ajay Malhotra

    Your welcome.

  12. Jordan Avatar
    Jordan

    Thanks a lot! I had the same problem for the name of the products disappearing.

  13. Ajay Malhotra Avatar
    Ajay Malhotra

    Great..

  14. Nishant Raghav Avatar
    Nishant Raghav

    Hey! I have an error “Sorry there was a problem removing”. So it is showing remove icon but does not work. Please Help Me..

  15. Ajay Malhotra Avatar
    Ajay Malhotra

    add_filter(‘woocommerce_cart_item_name’, ‘custom_filter_wc_cart_item_remove_link’, 10, 3);
    function custom_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(
    ‘ב,
    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;}
    else return $product_name;
    }

  16. Nishant Raghav Avatar
    Nishant Raghav

    Now It is showing “syntax error, unexpected ‘this’ (T_STRING)” on (‘Remove this item’, ‘woocommerce’),

    Now, What will I do?

  17. Ajay Malhotra Avatar
    Ajay Malhotra

    You are getting syntax error. Please single quote on (‘Remove this item’, ‘woocommerce’),

    Thanks

  18. Gody Avatar
    Gody

    Hi it’s working well, thanks. How can I style it? Like the x sign should have a small round colored background. Thanks

  19. therichpost Avatar
    therichpost

    With html you can add your style as well.

Leave a Reply