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. . .

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

Get My Free WordPress
Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design journey.

Intermediate and advanced WordPress users have found it helpful too.

By joining my list, I promise you’ll never be spammed! 🙂

cropped img of the toolkit