CODEWITHSUNDEEP
phpwordpresswoocommercewebhookscustom-wordpress-pages
Roshan Zaid
Roshan Zaid

Reputation: 389

Cart Page is Empty When Item is Removed

I wanted to design my own template for Cart Page when the cart is empty. I have added the below snippet to accomplish.

add_action( 'woocommerce_cart_is_empty', 'custom_empty_cart_message', 10 );
remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 ); 

remove_action( 'woocommerce_cart_item_removed', 'action_woocommerce_cart_item_removed', 10); 
add_action( 'woocommerce_cart_item_removed', 'custom_empty_cart_message', 10);

function custom_empty_cart_message() {
    $html  = '<a href="http://abcd.com/wp-content/lo.png"><img class="size-medium wp-image-25512 aligncenter" src="http://abcd.com/wp-content/lo.png" alt="" width="300" height="169" /></a>';
    $html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( '<p style="text-align: center;"><B>Your Shopping Cart Looks Empty</B></p><p style="text-align: center;">Your shopping cart is waiting</br>Give it purpose</p>', 'woocommerce' ) ) );
    echo $html . '</p></div>';
}

What happens now is, It works fine when you directly visit the cart page. except when an item is added to the cart -> visiting cart page -> removing the item that has been added shows a blank page instead of the custom method I have created. then if the page is refreshed, it works fine custom method is loads perfect. Why this happens? Why am I seeing a blank page once an item is removed?

Cheers in Advance.

Upvotes: 1

Views: 1697

Answers (3)

Darinka Kosteln&#237;kov&#225;
Darinka Kosteln&#237;kov&#225;

Reputation: 129

This has worked for me for both empty cart page itself (just directly navigating to cart with no products) and the cart page when all products have been removed via "remove from cart" action:

remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'custom_empty_cart_message', 10 );

function custom_empty_cart_message() {  
  $notice = wc_print_notice( wp_kses_post(
    apply_filters( 'wc_empty_cart_message', __( 'Your cart is ready for your selection. Browse our range and continue adding items.', 'woocommerce' ) )
  ), 'notice', array(), true );
  
  // This adds the cart-empty classname to the notice to preserve backwards compatibility (for styling purposes etc)
  $notice = str_replace( 'class="woocommerce-info"', 'class="cart-empty woocommerce-info"', $notice );
  
  // Return the notice within a consistent wrapper element. This is targeted by some scripts such as cart.js.
  echo '<div class="wc-empty-cart-message">' . $notice . '</div>';
}

Upvotes: 0

Roshan Zaid
Roshan Zaid

Reputation: 389

Found out.

The solution is you have to use cart-empty class along with your method as below.

remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'custom_empty_cart_message', 10 );

function custom_empty_cart_message() { ?>
    <div class="col-12 offset-md-1 col-md-10">
        <div class="cart-empty">

        <a href="http://abcd.com/wp-content/lo.png"><img class="size-medium wp-image-25512 aligncenter" src="http://abcd.com/wp-content/lo.png" alt="" width="300" height="169" /></a>
        <p style="text-align: center; font-weight: bold;">Your Shopping Cart Looks Empty</p>
        <p style="text-align: center;">Your shopping cart is waiting</br>Give it purpose</p>
    </div>
</div>
<?php
}

Happy Customizing.

Upvotes: 1

Pof
Pof

Reputation: 979

There is this file in WooCommerce wp-content/plugins/woocommerce/templates/cart/cart-empty.php

You can duplicate this page (with the folder structure) in your theme, and you should be able to customise it !

Have a look at https://docs.woocommerce.com/document/template-structure/

Upvotes: 0

Related Questions