Styling on-page alerts

On-page alerts were designed to function with any Wordpress or WooCommerce theme, but you may want to add some of your own styling to make them look great on your website.

If you have added any CSS to your theme before, it will be easy for you to customize these alerts following these styling rules and examples:

Important CSS selectors

Here are the main CSS selectors used in this example:

• .wc-autoship-container
  • this class selects the parent element for all wc-autoship elements including alerts
• #wc-autoship-schedules-alerts
  • this ID selects the parent element for all alerts
• .alert
  • this class selects individual alerts

Example: hide all on-page alerts

Use this CSS rule to hide the on-page alerts.
Note: errors for each schedule will still display as inline alerts

.wc-autoship-container #wc-autoship-schedules-alerts {
    display: none;
}

Example: change individual alert margins

Margins are the "whitespace" outside of the alert.  Adding margin to the top and bottom of the alerts will increase the amount of whitespace between them.  In this example, alerts are spaced 10px apart from the top and bottom.

.wc-autoship-container #wc-autoship-schedules-alerts .alert {
    margin: 10px auto;
}

Example: change alert position

On-page alerts are absolutely positioned.  In most themes, this means that the alerts are positioned based on the size of the browser's viewport (or the entire width and height of your web page).

In this example, we position the alerts to appear 2% from the bottom of the page and 2% from the right of the page.  The left position is neutral using the "inherit" rule.

.wc-autoship-container #wc-autoship-schedules-alerts {
    bottom: 2%;
    left: inherit;
    right: 2%;
}

Example: change alert width

Alerts are 100% width by default.  

In this example, we allow the individual alerts to simply match the width of the text within the alert (instead of stretching to fill 100% width).

.wc-autoship-container #wc-autoship-schedules-alerts {
    width: inherit;
}

In this example, we declare a specific minimum width for the individual alerts

.wc-autoship-container #wc-autoship-schedules-alerts {
    min-width: 550px;
}

Following the examples above changed the default display of alerts in a way that works best with our demo site: top and bottom margins, bottom-right positioning and an neutral width that simply wraps the content within each alert:

Before (default, no custom styling):

After (custom CSS):