[WooCommerce] 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;
}

Product Page Options 

Example: Use CSS to display product options in rows instead of columns

Using CSS, WordPress Admins can quickly make visual changes to their product pages by styling elements on the product page. 

First, using a browser's inspection tool, we can quickly find the HTML element containing the Autoship Options and "Add to Cart" button. In the example below the developer is targeting the <form> element within the <div> element with a class of ".product-info". Adding a styling rule to our WordPress child-theme's "styles.css" file will display the change from a "row" layout to a column layout using CSS Flexbox (see this guide to CSS Flexbox in this CSS Tricks article).

In the example (below) a WordPress Admin uses the Customizer tool (  WP-Admin > Appearance > Customize >> Additional CSS ) to add CSS to the site's theme that changes the display properties of the element's selector we copied above to display their "Add to Cart" button below their Autoship options. 

.product-info > form {
     display: flex;
     flex-direction: column;    
}

Before

After

Want to customize how your Autoship Option text displays?

See this code example to help devs reorder and customize the text displayed in Autoship Strings. Just want to change the "Autoship" / "Autoship and Save" text? See how to customize the Autoship Label text in the Autoship Cloud Settings > Options page in our helpful doc here.

Related Articles