How to Customize WooCommerce Notices in JupiterX

Accessing WooCommerce Notice Settings

To get started with styling the WooCommerce notices, make sure you're working on a WooCommerce page or a Layout Builder template that includes WooCommerce elements. Alternatively, you can edit a page that contains the WooCommerce Notice Widget.

1. Go to Site Settings > WooCommerce from Elementor editor panel. This is where you will find all the notice customization options.

Adding Notice Types

1. While in the WooCommerce section, click on Notices.
2. To add a notice type to style, click the + icon within the Notice Type field.
3. Choose the notices you'd like to customize. A preview of the notice will appear in the editor to help you see the changes live.

Message Notice Styles

When customizing Message Notices in JupiterX, you have an array of options to personalize the look and feel of your notices. Let's walk through the steps to style them:

• Notice Text:
  • Color: Use the color picker to select the color of your message text.
  • Typography: Adjust various typography settings using the options provided after clicking the pencil icon.

  • Text Shadow: Create text shadow effects for additional depth and emphasis.

    Icon:

  • Color: Assign a color to the icon within the message notice for better visibility and styling.

    Link Text:

  • Typography: Refine the style of your link text with the typography options.

  • Color: Choose a color for the link text, with distinct colors for normal and hover states.

    Notice Box:

  • Background Color: Choose a suitable background color with the color picker.
  • Image: Optionally, insert a background image from your media library.
  • Box Shadow: Customize the box shadow using the available settings.
  • Border Type: Decide on the style of the border from the choices available.
  • Width (border): Determine the width of your border.
  • Color (border): Pick a color for your border to complement your design.
  • Border Radius: Set the curvature of your notice box corners.

Styling Buttons within Notices

To style buttons within your notice:

• Typography: Customize the button text with the available font options.
• Color (Text): Select a color for your button text using the color picker.
• Background Type: Choose between a solid or gradient background for the button.
• Color (background): Pick a background color that fits your site aesthetics.
• Image: If preferred, use an image as the button's background by uploading one to the media library.
• Box Shadow: Apply a shadow effect to your buttons for added dimension.
• Borders:
  • Border Type: Choose a border style to frame your button.
  • Width (border): Define the thickness of the border.
  • Color (border): Match or contrast your border color with the overall design.
  • Border Radius: Adjust how rounded the edges of your button should be.
  • Padding: Set the spacing within the button for comfortable text readability.

Info Notice Styles

Info Notices can be customized using similar settings as Message Notices, offering a cohesive and professional look for all notifications on your site.

Remember to save your changes and review them on your live site to ensure the notices appear as expected. If you encounter any issues, refer back to this guide or reach out for support.