This tutorial provides the steps to append custom HTML at the end of the default WooCommerce add to cart message after a product has been added to the cart on a single product page.



Step 1

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: [WooCommerce] Customize add to cart message


add_filter( 'wc_add_to_cart_message', 'wpdd_wc_add_to_cart_message', 10, 2 );
 * Add custom HTML to Add to Cart message.
 * @param  string $message    The current message.
 * @param  int    $product_id Single product id.
 * @return string             The modified message.
function wpdd_wc_add_to_cart_message( $message, $product_id ) {
	$message .= '<div class="custom-add-to-cart-message"><p>Great choice! But wait, there\'s more. You might also like these:</p><ol><li><a href="#">Product one</a></li><li><a href="#">Product two</a></li><li><a href="#">Product three</a></li></ol></div>';

	return $message;

Edit the HTML as needed.

Set the snippet to run everywhere. Save changes and activate.

Step 2

Add this sample CSS and customize as needed:

.custom-add-to-cart-message {
	background-color: #eee;
	padding: 10px 20px;
	margin-top: 22px;

.woocommerce-message .custom-add-to-cart-message li {
	list-style: decimal !important;

Source: /wp-content/plugins/woocommerce/includes/wc-cart-functions.php.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: