Styling the Native Autoship Scheduled Orders templates

In order to use the Native Autoship Scheduled Orders templates, you need to enable the display within WP-Admin > Autoship Cloud > Settings >> Additional options

Default native Autoship Scheduled Orders templates

Like the rest of your WooCommerce store, these templates are controlled by your site's active theme (or child theme).  To help with styling and customization, we've added unique classes like .autoship-scheduled-order-template and .autoship-scheduled-orders-table to help you be selective in styling only the templates for Autoship Scheduled Orders.

Example: before and after adding custom CSS

In this example, we add custom CSS to our theme options to change both the appearance of the My Account > Scheduled Orders template (using the class  .autoship-scheduled-orders-table) as well as the Scheduled Order template (using the class .autoship-scheduled-order-template).

Custom CSS used in this example:

.autoship-scheduled-orders-table .Active td.woocommerce-orders-table__cell.order-row.woocommerce-orders-table__cell-order-status {
color: green;
font-weight: 600;
text-transform: uppercase;
}

.autoship-scheduled-orders-table .Paused td.woocommerce-orders-table__cell.order-row.woocommerce-orders-table__cell-order-status {
color: darkred;
text-transform: uppercase;
}

.autoship-scheduled-order-template mark {
background: none;
}


.autoship-scheduled-order-template h2 {
font-size: inherit;
}

.autoship-scheduled-order-template a {
color: darkcyan;
}

.autoship-scheduled-order-template .autoship-order-details-summary-form > div, .autoship-scheduled-order-template .autoship-order-payment-details-summary-form > div {
display: block;
}

.autoship-scheduled-order-template .activate-action, .autoship-scheduled-order-template .deactivate-action {
color: #FFFFFF;
}

.autoship-scheduled-order-template .autoship-scheduled-order-items-table .scheduled-order-add-ons-msg {
text-transform: uppercase;
color: darkcyan;
padding: 20px 10px
}

.autoship-scheduled-order-template label {
text-align: left;
}

.autoship-scheduled-order-template .autoship-scheduled-order-items-table .scheduled-order-coupons ul {
text-align: left;
}

.autoship-scheduled-order-template .autoship-scheduled-order-items-table .scheduled-order-coupons li a {
color: #FFFFFF;
}

.autoship-scheduled-order-template .autoship-scheduled-order-items-table .scheduled-order-coupons li {
background: darkcyan;
color: #fff;
}

.autoship-scheduled-order-template .autoship-scheduled-order-summary mark, .autoship-scheduled-order-template .autoship-scheduled-order-payment-method-summary mark {
font-weight: 400;
}

Still need help? Contact Us Contact Us