Woocommerce, How to edit the "added to cart" message

Question

When click on add to cart button, the Woocommerce shows the message, view cart, I want to edit this message, actually edit all the span, put some icon etc...

Stephanus

You want to change the message on AJAX add to cart or on product pages? – Doghouse

Yes, this message that say only "view cart" I want to edit that, I did try edit the class using css "before", but the result is not so cool... – Stephanus

Answer 1

Add a filter to your theme/functions.php. The code below just overrides the existing $message. This overwrites $message with an nearly identical one that prepends a "checkout" link to the message.

Make sure you return the $message.

You can of course just modify the existing message, as the entire thing is passed as a string via the first param or $message var.

add_filter ( 'wc_add_to_cart_message', 'wc_add_to_cart_message_filter', 10, 2 );
function wc_add_to_cart_message_filter($message, $product_id = null) {
    $titles[] = get_the_title( $product_id );

    $titles = array_filter( $titles );
    $added_text = sprintf( _n( '%s has been added to your cart.', '%s have been added to your cart.', sizeof( $titles ), 'woocommerce' ), wc_format_list_of_items( $titles ) );

    $message = sprintf( '%s <a href="%s" class="button">%s</a>&nbsp;<a href="%s" class="button">%s</a>',
                    esc_html( $added_text ),
                    esc_url( wc_get_page_permalink( 'checkout' ) ),
                    esc_html__( 'Checkout', 'woocommerce' ),
                    esc_url( wc_get_page_permalink( 'cart' ) ),
                    esc_html__( 'View Cart', 'woocommerce' ));

    return $message;
}

Morningglory

This solution is no longer working. WC 3.0 requires to use "wc_add_to_cart_message_html" instead of 'wc_add_to_cart_message' and 'wc_add_to_cart_message_filter' – Havelock

Answer 2

Have you tried a filter like the following

function your_add_to_cart_message() {
if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' ) :
    $message = sprintf( '%s<a href="%s" class="your-style">%s</a>', __( 'Successfully added to cart.', 'woocommerce' ), esc_url( get_permalink( woocommerce_get_page_id( 'shop' ) ) ), __( 'Continue Shopping', 'woocommerce' ) );
else :
    $message = sprintf( '%s<a href="%s" class="your-class">%s</a>', __( 'Successfully added to cart.' , 'woocommerce' ), esc_url( get_permalink( woocommerce_get_page_id( 'cart' ) ) ), __( 'View Cart', 'woocommerce' ) );
endif;
return $message;
}
add_filter( 'wc_add_to_cart_message', 'your_add_to_cart_message' );

In reply to the ajax message update, try a translation function like:

function your_woo_ajax_solution( $translation, $text, $domain ) {
  if ( $domain == 'woocommerce' ) { // your domain name
    if ( $text == 'View Cart' ) { // current text that shows
        $translation = 'Basket updated.'; // The text that you would like to show
    }
  }

  return $translation;
}
add_filter( 'gettext', 'your_woo_ajax_solution', 10, 3 );

Pump

This function is good, but I want to change the message on product list, when click the ajax add to cart, this function changed only the message on single product page. – Stephanus

Answer 3

2017 - 2019 - For Woocommerce 3+ (handling multiple products added to cart)

Replaced by wc_add_to_cart_message_html filter hook, the 2nd function argument has changed to $products (instead of $product_id)…

You can make changes on the code inside this hooked function, like in this thread:

add_filter( 'wc_add_to_cart_message_html', 'custom_add_to_cart_message_html', 10, 2 );
function custom_add_to_cart_message_html( $message, $products ) {
    $titles = array();
    $count  = 0;

    foreach ( $products as $product_id => $qty ) {
        $titles[] = ( $qty > 1 ? absint( $qty ) . ' × ' : '' ) . sprintf( _x( '“%s”', 'Item name in quotes', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) );
        $count += $qty;
    }

    $titles     = array_filter( $titles );
    $added_text = sprintf( _n( '%s has been added to your cart.', '%s have been added to your cart.', $count, 'woocommerce' ), wc_format_list_of_items( $titles ) );

    // The custom message is just below
    $added_text = sprintf( _n("%s item has %s", "%s items have %s", $count, "woocommerce" ),
        $count, __("been added to your basket.", "woocommerce") );

    // Output success messages
    if ( 'yes' === get_option( 'woocommerce_cart_redirect_after_add' ) ) {
        $return_to = apply_filters( 'woocommerce_continue_shopping_redirect', wc_get_raw_referer() ? wp_validate_redirect( wc_get_raw_referer(), false ) : wc_get_page_permalink( 'shop' ) );
        $message   = sprintf( '<a href="%s" class="button wc-forward">%s</a> %s', esc_url( $return_to ), esc_html__( 'Continue shopping', 'woocommerce' ), esc_html( $added_text ) );
    } else {
        $message   = sprintf( '<a href="%s" class="button wc-forward">%s</a> %s', esc_url( wc_get_page_permalink( 'cart' ) ), esc_html__( 'View cart', 'woocommerce' ), esc_html( $added_text ) );
    }
    return $message;
}

Related threads (for Woocommerce 3+):

• Hide Added to Cart message in Woocommerce
• Customizing add-to-cart messages based on the product IDs in WooCommerce 3
• Customize add to cart message in Woocommerce 3

Wholesale

IDC what rules say, Thanks Loic, it's a great solution. – Coronel

This works for me. this is great. – Elidiaelie

Answer 4

If you look at add-to-cart.js it fires a trigger added_to_cart on adding a product to cart. I hooked into that and did this

jQuery(document.body).on("added_to_cart", function( data ) {
    jQuery('button.added').nextAll().remove();
    jQuery('button.added').after(' <span style="text-align:center;display:block;" class="cart_updated_ajax"><a href="' + wc_add_to_cart_params.cart_url + '" title="' +
                            wc_add_to_cart_params.i18n_view_cart + '">Cart Updated</a></span>');
});

Here you can add anything after product is added to cart.

Hope that helps!

Doghouse

Answer 5

In Woocommerce 3.0 "wc_add_to_cart_message" is obsolete and no longer works. So while the answer by @zmonteca was ok, is no longer working on the Woocommerce 3.0

Just replace "wc_add_to_cart_message" with "wc_add_to_cart_message_html" and voile... works.

add_filter ( 'wc_add_to_cart_message', 'wc_add_to_cart_message_filter', 10, 2 );
function wc_add_to_cart_message_filter($message, $product_id = null) {
$titles[] = get_the_title( $product_id );

$titles = array_filter( $titles );
$added_text = sprintf( _n( '%s has been added to your cart.', '%s have been added to your cart.', sizeof( $titles ), 'woocommerce' ), wc_format_list_of_items( $titles ) );

$message = sprintf( '%s <a href="%s" class="button">%s</a>&nbsp;<a href="%s" class="button">%s</a>',
                esc_html( $added_text ),
                esc_url( wc_get_page_permalink( 'checkout' ) ),
                esc_html__( 'Checkout', 'woocommerce' ),
                esc_url( wc_get_page_permalink( 'cart' ) ),
                esc_html__( 'View Cart', 'woocommerce' ));

return $message;}

Havelock

Answer 6

@Dante is correct, the solutions provided by @BradleyD won't work for ajax_add_to_cart on shop page.

The solution provided by @Abstract is working as expected. I am also using his solution.

Another jQuery approach is to to listen for the the ajaxSuccess event on the document object and do the desired modifications for the clicked button.

Something like that should work:

$(document).ajaxSuccess(function(event, xhr, settings) {
    if (settings.url.indexOf('?wc-ajax=add_to_cart') !== -1) {
        // You can find the clicked button element under the event.target.activeElement
        // Than you can do whatever you want here. Add new html element and text, etc.
    }

});

Hejira