WooCommerce: Display an Important Info Box Below the Add-to-Cart Button (With Shortcode)

Running a real e-commerce store often requires more than the default product layout. Every business is different, and every one of them has something important to tell the customer right before they click “buy”.

There is no better place to add a small disclaimer than the area under the “Add to cart” button on your product pages.

You can also add an image with trusted payment logos, a delivery deadline, a stock warning, or whatever you find important to your customers.

Any shortcode will work! So get creative.

But how to do that quickly, for all the products in the store, with the option to change it easily in the future?

A quick note on this tutorial

This post has been around for a while, and one thing has changed since I first wrote it: the shortcode plugin I originally used in the screenshots, Olevmedia Shortcodes, has been closed on WordPress.org and is no longer available for download. If you’ve landed here from a search result recommending it, don’t go hunting for it.

The method itself hasn’t changed at all – the hook still works exactly the same way. You just build the box with something that’s still maintained. I’ve updated the steps below to reflect that, and added a version that needs no shortcode plugin whatsoever.

1. Design Your Note Box

First, in a draft post or page, create your note box using whatever tool you like and style it the way you want. You can also use an image or just plain text.

The screenshot below is from the original version of this tutorial – it shows the kind of visual box generator I used at the time. Any modern equivalent gets you to the same place: a Gutenberg group block with a background colour, a page builder alert element, or a plain bit of HTML.

If you want to skip the plugins entirely, this is all the box really is:

<div class="product-note">
    This is very important information, please read before you order!
</div>

Plus a few lines in your theme’s Additional CSS (Appearance > Customize > Additional CSS):

.product-note {
    background: #f4f4f4;
    color: #636363;
    border-left: 4px solid #e28c02;
    padding: 14px 18px;
    margin: 18px 0;
    border-radius: 4px;
    font-size: 15px;
}

That’s the whole thing. No plugin to abandon you three years from now – which, as this post proves, does happen.

Once you are happy with your note, you can go to the next step, which is adding it to your theme’s layout.

2. Creating Your Own Shortcode with Shortcoder

To make this as flexible as possible and easy to edit in the future, download the Shortcoder free plugin and install it.

Then just go to the plugin settings page (Settings > Shortcoder), create a new shortcode and paste in your box – the HTML from above, or the shortcode from your page builder. Give your new shortcode a name and save it. Then grab the shortcode’s code and head to the next step.

(I know I said ‘shortcode’ too many times in this paragraph – shortcodeception)

The reason for this extra step is worth spelling out: once the box lives inside a Shortcoder shortcode, you edit it in one place and every product page updates. Change the delivery date, swap the payment logos, kill the message entirely during a sale – all without touching a single PHP file again.

Adding the Content to Your functions.php File

Find your child theme’s functions.php file and add the following code at the bottom.

add_action( 'woocommerce_after_add_to_cart_button', 'wpctrl_html_after_add_to_cart' );

function wpctrl_html_after_add_to_cart() {
    echo do_shortcode( '[sc name="below_cart"]' );
}

Change [sc name="below_cart"] with your own Shortcoder shortcode.

If you’re not using a shortcode at all and went with the plain HTML version from step 1, the function is even shorter:

add_action( 'woocommerce_after_add_to_cart_button', 'wpctrl_html_after_add_to_cart' );

function wpctrl_html_after_add_to_cart() {
    echo '<div class="product-note">This is very important information, please read before you order!</div>';
}

A few things worth knowing about that hook:

• Use a child theme, or a code snippets plugin. If you paste this into a parent theme’s functions.php, the next theme update wipes it.
• The hook fires inside the add-to-cart form, so your box lands directly under the button on every simple and variable product.
• It won’t show on out-of-stock products, because WooCommerce doesn’t render the add-to-cart form at all in that case. If you need the message there too, woocommerce_single_product_summary with a priority above 30 is the hook you want instead.
• Prefix your function name (I used wpctrl_). A generic name like html_after_add_to_cart can collide with something in your theme and take the whole site down with a fatal error.

You are ready to see what you have achieved!

It is possible to play with the CSS to position it nicely below the button, add some padding, and so on.

3. Using a Page Builder Block Instead

For this last example I used WPBakery Page Builder with the help of the additional premium Massive Add-ons.

If your theme supports static blocks, create a new one and place a row with an “Alert” element.

If you’d like, you can add more elements like a countdown or any other Massive add-ons element of your choice.

Save your static block and copy the generated shortcode into the code we added to the functions.php file.

On the block editor instead? The modern equivalent is a synced pattern (what used to be called a reusable block). Build the box once in the editor, save it as a synced pattern, and reference it with do_blocks() – or simply paste its content into Shortcoder as described above. Same result, same single place to edit it later.

Enjoy, and always back up your files in case this code is not supported by your theme!

Do you want to add more options to your products and increase your average cart total? Try using the free WooCommerce Product Add-ons plugin.