WooCommerce notice settings

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.

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.

Styling Options

Error Notice Styles

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.

Link Text

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

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.

Link Text

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

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 %