help center

On this page

WooCommerce notice settings

Last Update: January 14, 2024

The notices that WooCommerce displays when products are added to cart, warnings, and information can be styled using the Site Setting tools. To find these settings, navigate to Site Settings > WooCommerce.

Note: It is recommended to be editing a WooCommerce based page, or Theme Builder template when customizing your notices. You may also edit a page where the WooCommerce Notice Widget has been placed.

WooCommerce Notice Settings WooCommerce notice settings 1

Add Notice Types

Navigate to Site Settings > WooCommerce > Notices. From there, click the + icon in the Notice Type field. You may then add the notices you wish to style. A sample notice for the selected type will be displayed in the main editor.

AddWooMessages WooCommerce notice settings 3

Styling Options

Error Notice Styles

Notices Styling WooCommerce notice settings 5

Notice Text

  1. Color: From the color picker, choose the color for your notice text. 
  2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
  3. Text Shadow: Click the pencil icon to open the shadow properties options.

Icon

  1. Color: From the color picker, choose the color for your Icon.
  1. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
  2. Color:  From the color picker, choose the color for your link text. This may be set for normal and hover states.

Notice Box

  1. Background Color: From the color picker, choose the background color for your notice box. 
  2. Image: Add a background image if desired by clicking the option and adding/selecting the image from your media library
  3. Box Shadow: Click the pencil icon to set the color and shadow options
  4. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
  5. Width (border): Enter a chosen value in the fields based on px, em, or %
  6. Color (border): From the color picker, choose the background color for your border
  7. Border Radius: Enter a chosen value in the fields based on px, em, or %

Message Notice Styles

Message Notices WooCommerce notice settings 7

Notice Text

  1. Color: From the color picker, choose the color for your notice text. 
  2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
  3. Text Shadow: Click the pencil icon to open the shadow properties options.

Icon

  1. Color: From the color picker, choose the color for your Icon.
  1. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
  2. Color:  From the color picker, choose the color for your link text. This may be set for normal and hover states.

Notice Box

  1. Background Color: From the color picker, choose the background color for your notice box. 
  2. Image: Add a background image if desired by clicking the option and adding/selecting the image from your media library
  3. Box Shadow: Click the pencil icon to set the color and shadow options
  4. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
  5. Width (border): Enter a chosen value in the fields based on px, em, or %
  6. Color (border): From the color picker, choose the background color for your border
  7. Border Radius: Enter a chosen value in the fields based on px, em, or %

Buttons

  1. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
  2. Color (Text): From the color picker, choose the color for your button text. 
  3. Background Type: Use the icons to choose between a solid or gradient background
  4. Color (background): From the color picker, select the color(s) for the field
  5. Image: Click to select or upload an image to the media library to use as the background image of your button
  6. Box Shadow: Click the pencil icon to open the shadow properties options.

Borders

  1. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
  2. Width (border): Enter a chosen value in the fields based on px, em, or %
  3. Color (border): From the color picker, choose the background color for your border
  4. Border Radius: Enter a chosen value in the fields based on px, em, or %
  5. Padding: Enter a chosen value in the fields based on px, em, or %

Info Notice Styles

Info Notices WooCommerce notice settings 9

Notice Text

  1. Color: From the color picker, choose the color for your notice text. 
  2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
  3. Text Shadow: Click the pencil icon to open the shadow properties options.

Icon

  1. Color: From the color picker, choose the color for your Icon.

Notice Box

  1. Background Color: From the color picker, choose the background color for your notice box. 
  2. Image: Add a background image if desired by clicking the option and adding/selecting the image from your media library
  3. Box Shadow: Click the pencil icon to set the color and shadow options
  4. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
  5. Width (border): Enter a chosen value in the fields based on px, em, or %
  6. Color (border): From the color picker, choose the background color for your border
  7. Border Radius: Enter a chosen value in the fields based on px, em, or %

Buttons

  1. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
  2. Color (Text): From the color picker, choose the color for your button text. 
  3. Background Type: Use the icons to choose between a solid or gradient background
  4. Color (background): From the color picker, select the color(s) for the field
  5. Image: Click to select or upload an image to the media library to use as the background image of your button
  6. Box Shadow: Click the pencil icon to open the shadow properties options.

Borders

  1. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
  2. Width (border): Enter a chosen value in the fields based on px, em, or %
  3. Color (border): From the color picker, choose the background color for your border
  4. Border Radius: Enter a chosen value in the fields based on px, em, or %
  5. Padding: Enter a chosen value in the fields based on px, em, or %

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount

days
hours
minutes
seconds