How to Add WooCommerce Storefront Banner

How to Add WooCommerce Storefront BannerIn your WooCommerce store, you can use notices to communicate to your visitors without initiating contact. Moreover, showing a banner on your store can be a great way to increase your conversions.

For example, you can use a store notice when you want to offer free shipping over a certain amount. The customer does need to be aware of the threshold. They will see a text on your page saying, “Free shipping for orders over $100”.

WooCommerce Storefront Banner

Customers or visitors who see this will be more likely to add something extra to increase the order value. Additionally, the store notices help to remove uncertainty and it creates some sense of urgency.

Fortunately, WooCommerce has an easy way of adding store notices that will catch the customer’s eye more easily. By default, WooCommerce uses notices when adding/removing a product/coupon to the cart and errors at the checkout. However, you can add a banner as well.

In this post, I will share with you how you can create a banner in the WooCommerce storefront theme.

The Storefront theme has excellent options to enhance your store visually. If you are a WordPress developer, there is no limit to the customization of your online store. However, this is not the case for the not so tech-savvy. If that is the case, you can use the WooCommerce Customizer. It is part of WordPress > Customize and makes it possible to select options that apply site-wide for Store Notice, without touching any code.

Steps to add a Banner in the WooCommerce Storefront Theme

Here are the simple steps that you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the WordPress menu dashboard, go to Appearance > Customize. This will open the Customize Select WooCommerce.WooCommerce customizer

In this section, there are five options:

  • Store Notice
  • Product Catalog
  • Product Page
  • Product Images
  • Checkoutdefault woocommerce customization options
  1. Click on Store Notice. This section allows you to enter a site-wide message shown to everyone visiting your store. This message can be informational or promotional. An example of an informative notice is a note telling customers of shipping delays due to weather conditions. An example of a promotional notice is a note advertising an event, a bundle, a sale, or free shipping.Site-wide banner
  2. You need to ensure that you enable the store notice, as shown in the picture. If you untick the box for Enable store notice, it will stop displaying to visitors.
  3. If you are satisfied with the changes, click on Publish.
  4. To schedule the store banner, you can use the schedule option. This option helps run promotions for a limited time or end a midnight discount on a specific date.schedule a store notice

Conclusion

In summary, I have shared how you can add a banner in the WooCommerce Storefront theme. WooCommerce allows you to display store notices for various reasons. In the illustration above, I have informed my customers that there will be shipping delays. You can use it to display any important information for your loyal customers.

However, it is important to note that removing the notice does not automatically stop the promotion from running. This means that you have to disable sale discounts, coupon codes, or limited time offers.

Similar Articles