Product page styling

Autoship Cloud presents new options on pages for WooCommerce Products that are enabled for Autoship.  The elements within these options can be easily styled by adding custom CSS to your Wordpress Theme.

We always suggest creating a backup of your site and trying changes on a staging or test site before making changes on your production site.

Here's how these options look at first on a simple product page from our demo site: 

By adding a few CSS rules to our Wordpress theme, we can restyle these options to emphasize the elements we want; like % savings and price:

Here are the classes we targeted with CSS to apply these changes:

  • .autoship-type label[for=autoship-yes]
    • selects the radio option for selecting Autoship (for=autoship-no would select the One-Time Purchase option)
  • .autoship-percent-discount
    • selects the autoship % discount amount
  • .autoship-discounted-price .amount
    • selects the amount displayed after applying the autoship % discount

Here is the actual CSS used within our demo site to apply these styling rules within the theme:

.product-info .cart .autoship-schedule-options .autoship-type label[for=autoship-yes] {
background-color: #fafafa;
padding: 5px 0 7px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #b0e0e6;
}


.product-info .cart .autoship-schedule-options .autoship-type label[for=autoship-yes] input {
margin-bottom: 0;
}


.product-info .cart .autoship-schedule-options .autoship-type label[for=autoship-yes] .autoship-percent-discount {
font-size: 1.0125rem;
text-decoration: underline;
}


.product-info .cart .autoship-schedule-options .autoship-type label[for=autoship-yes] .autoship-discounted-price .amount {
font-size: 1.0125rem;
color: #7997F2;
}

Still need help? Contact Us Contact Us