How to add custom HTML to Add to Cart message in WooCommerce

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.

Before:

After:

Step 1

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: [WooCommerce] Customize add to cart message

Code:

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.