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