Product Page Styling

The Autoship Cloud powered by QPilot plugin adds new "Autoship" options to WooCommerce Product Page templates when any WooCommerce Products are enabled for Autoship.  

The elements within these options can be easily customized and styled by adding CSS to your WordPress Theme.

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

Here's how these options look by default 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.autoship-yes
    • selects the radio option for Autoship
    • the "One-Time Purchase" option uses the selector .autoship-type.autoship-no
  • .autoship-checkout-percent-discount
    • selects the autoship % discount amount
  • .autoship-checkout-price
    • 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:

.autoship-type.autoship-yes {
background-color: #fafafa;
padding: 5px 0 7px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #b0e0e6;
}


.autoship-checkout-percent-discount {
font-size: 1.0125rem;
text-decoration: underline;
}


.autoship-checkout-price {
font-size: 1.0125rem;
color: #7997F2;
}

Still need help? Contact Us Contact Us