How to Customize WooCommerce Notices using Elementor

In this short tutorial, I am going to show you how you can customize WooCommerce notices using Elementor for your WooCommerce shop.

This article is part of my Elementor + WooCommerce series where I show you how to create an eCommerce shop using Elementor and WooCommerce. In the previous articles, I shared how you can create a single product template, a products archive, a cart page, a checkout page, and a purchase summary page using Elementor. Feel free to check them out after this.

Ps: Below is a step-by-step video tutorial you can follow along with.

Video: Customize WooCommerce Notices using Elementor

Check out for example the WooCommerce error notice below, this is the default styling it comes with:

default WooCommerce Notices style

Elementor however, gives you the freedom to customize and style your error notices, message notices and info notices whichever way you want, as well as match them to your Woocommerce website’s style/theme.

Let’s get right to it.

On your WordPress dashboard open up any page with Elementor under the Pages section.

When your page opens up go to the hamburger icon (☰) in the upper left corner and click on Site settings

Enable WooCommerce Notices in Elementor

In your site settings, go down to the Settings section and click on WooCommerce, that’s where you’ll find the Notices option.

When you select Notices, under Notice Type you’ll be able to choose the different types of notices that you can select and customize. 

Click the plus (+) sign and add the error notice, info notices, and message notices from the dropdown.

Customize WooCommerce Notices using Elementor

When you select, for example, Error Notices, you are given a list of settings where you can edit the colour, typography, font,  icon colour, etc.

If your error messages have links, you can even choose a different colour for them on Normal and on Hover.

You can also change the notice box background, the border radius, the buttons on the notices, etc.

Custom woocommerce notice settings in elementor

When you’re done, click the Update button then go to your cart page and try out the notices. 

For example, you can add an item to your card ad you’ll receive a “Cart update” notice.

Custom woocommerce notice using elementor

That’s how you can customize and style up your WooCommerce error, info and message notices to match your website’s theme, brand and style.

You can go through each tab and edit the individual settings to your liking.

In closing

That’s how you can customize WooCommerce notices using Elementor and correct the error notice that comes with the default settings.

If you have any comments or questions please use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.

Also Read. . .

6 Best SCUM server hosting services

If you are an avid survival gamer and are thinking of venturing into the intense world of SCUM, then you know that having the right server may either make or break your gaming experience.  The

Read More »
Newsletter Subscription (EF)
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users