Creating A Newsletter Woman With Laptop

Display WooCommerce cart notices outside the cart

4 min read
Beka Rice

The SkyVerge WooCommerce Cart Notices extension is geared towards helping you increase conversions and average order value. You can create notices that will encourage customers to add more to the cart to meet a minimum amount (for example, add more to get free shipping). You can also set up notices to encourage orders before a deadline, provide a message based on the referrer, or cross-sell / upsell products.

However, these notices are only displayed on the cart and checkout pages, not while the customer is actually shopping. Displaying a notice on the shopping page might be helpful if you’d like to encourage customers to meet a minimum order value before they even get to the cart, so we can pretty easily add our WooCommerce Cart Notices to shop or product pages.

First, we need a simple little function to output our cart notice. Fortunately, we’ve got a really easy way to do this. There are several shortcodes included with Cart Notices, so let’s determine which shortcode we’d like to use and use the do_shortcode function to output it. You can use the type="all" version if you want all notices to display, or just pick which one(s) you’d like to use. I’ll use a minimum amount notice in my sample.

Here’s the first part of code snippet that will output the notice for us. You can begin a new Code Snippet or start adding this to your theme’s functions.php.

function skyverge_output_cart_notices() {
    echo do_shortcode( '[woocommerce_cart_notice type="minimum_amount"]' );

Great. Now the issue is that this function is never called, so the notices are never printed on the page. Let’s determine where we’d like them to show up, and then we can finish off this code snippet. Choose one of the following three scenarios to finish this snippet based on where you want notices to be displayed.

Both shop and product pages

If we’d like to add cart notices to all WooCommerce pages (shop, category, tag, and product pages), we can finish off our snippet by adding notices before the main WooCommerce content with this line of code:

add_action( 'woocommerce_before_main_content', 'skyverge_output_cart_notices' );

Now all WooCommerce pages that can print a notice will show our cart notices. For example, here’s the minimum amount notice used on the Shop archive:

WooCommerce Cart Notices | all notice

If we visit a product, the same notice will be displayed at the top of the page:

WooCommerce Cart Notices | all notice

Just the product page

Only want to show WooCommerce Cart Notices on the product page instead? You can finish your snippet off by using a different action:

add_action( 'woocommerce_before_single_product', 'skyverge_output_cart_notices' );

This will leave the shop archives (shop, category, and tag loops) untouched, but will only add the notice to the single product page.

WooCommerce Cart Notices | product notice

Just the shop page

Finally, if you want to display WooCommerce Cart Notices on shop archive pages (shop, category, and tag pages), but not on single product pages, you can use this to finish your code snippet:

add_action( 'woocommerce_before_shop_loop', 'skyverge_output_cart_notices' );

Now my notice will be displayed on the shop page, but the single product page will display no notices.

WooCommerce Cart Notices | shop notice

Bonus round

That’s it! You can choose which way you’d like to display cart notices aside from the cart and checkout pages.

As a bonus, we’ve also had customers occasionally ask how to remove these notices from the checkout page (leaving them on just the cart page or elsewhere if you use the snippet above). You could do so by additionally adding this snippet to your site:

function skyverge_remove_cart_notice_on_checkout() {
   if ( function_exists( 'wc_cart_notices' ) ) {
      remove_action( 'woocommerce_before_checkout_form', array( wc_cart_notices(), 'add_cart_notice' ) );
add_action( 'init', 'skyverge_remove_cart_notice_on_checkout' );

Now go and change your WooCommerce Cart Notices display as you’d like!