Back to Docs

Styling Discontinued Product Notices

The plugin allows you to customize the visual appearance of discontinued product notices to match your store’s branding and UX preferences. Styling the notice helps ensure that the message is both noticeable and visually consistent with your site design.

To configure the notice styles:

Go to Global Settings Panel
From your admin dashboard, navigate to WooCommerce > Settings > Products> WC Discontinued Products and scroll to the Discontinued Product Notice Styles section.

Customize the Notice Appearance
You’ll see a range of styling options that control the appearance of the discontinued product notice displayed on product pages:

  • Padding: Adjusts spacing around the notice text to improve readability.
  • Border Style: Choose from solid, dashed, dotted, or none to outline the message box.
  • Border Width and Radius: Set the thickness and curvature of the border.
  • Text and Background Color: Select primary and hover colors for both text and background.
  • Border Color Settings: Define the colors for the border under normal and hover states.

Preview and Adjust
While there’s no live preview in the settings panel, you can save your changes and view the notice style on a discontinued product page. Tweak the values if necessary for a better visual match.

Save Changes
After finalizing the design, save your changes to apply them across all discontinued product notices.

Well-designed notices help customers clearly understand the product’s availability status while maintaining a consistent aesthetic across your website.

Related Articles