[WooCommerce] Styling the Native UI Display Option Templates

Like the rest of your WooCommerce store, the Native UI Display Option templates are WordPress templates that can be customized by your WordPress 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.

My Account ➔ Tabs (Contains the Scheduled Order Template Area)

The Native UI Display Option displays the entire Scheduled Order template within a standard tab in My Account.  

This means that you can select this area using the standard WooCommerce elements and classes used to display each tab in My Account.

CSS Example: change the background color for all tabs in My Account (including the My Account > Scheduled Orders tab)

/* CSS Example: change the background color for all tabs in My Account */

.woocommerce .woocommerce-MyAccount-content {  background-color: 3px solid #e3e3e3; padding: 25px; }
	

Result: A 25px area of padding and light gray background are now displayed on every tab in My Account (including the  My Account > Scheduled Orders tab)

My Account ➔ Tabs ➔ Scheduled Order Template

The entire template for the Native UI Display Option is wrapped in a DIV element with the class .autoship-scheduled-order-template

CSS Example: Add padding with a light gray border around the entire template area

/* CSS Example: Add padding with a light gray border around the entire Scheduled Order template area */

.woocommerce .woocommerce-MyAccount-content .autoship-scheduled-order-template {  border: 3px solid #e3e3e3; padding: 25px; }
	

Result: A 25px area of padding and light gray border now surrounds the entire template area

My Account ➔ Tabs ➔ Scheduled Order Template ➔ Summary Template

The Summary Template is a section within the Scheduled Order Template that displays information about the Scheduled Order including:

• Status
• Next Occurrence Date
• Number of Items
• Frequency

CSS Example: Add padding with a light gray border around the Summary Template and change the Status text color to Dark Cyan

/* CSS Example: Add padding with a light gray border around the Summary Template */  

.woocommerce .woocommerce-MyAccount-content .autoship-scheduled-order-template .autoship-scheduled-order-summary { border: 3px #e3e3e3 solid; padding: 25px; }

/* Change the Status text color to Dark Cyan */
.woocommerce .woocommerce-MyAccount-content .autoship-scheduled-order-template .autoship-scheduled-order-summary mark.order-status { color: darkcyan; }
	

Result: A 25px area of padding and light gray border now surround only the Scheduled Order Summary and the Status text "Active" is now a Dark Cyan color

My Account ➔ Tabs ➔ Scheduled Order Template ➔ Main Actions

Need to remove the 'Create Scheduled Order' button from the templates? See our doc My Account: Remove Scheduled Order Creation Button to walk you through how this can be done.

The Main Actions section displays action buttons that enable the customer to update when their Scheduled Order will process including:

• Edit Schedule
• Pause
• Resume
• Delete
• Create a New Scheduled Order

CSS Example: Add padding with a black border around the Main Actions section and change the button background color to black and button text color to white

/* CSS Example: Add padding with a black border around the Main Actions section */  

.woocommerce .woocommerce-MyAccount-content .autoship-scheduled-order-template .action-info.main-actions { padding: 25px; border: 3px #000000 solid; color: #ffffff; }

/* CSS Example: Change the Buttons within the Main Actions section to have a black background and white text */

.woocommerce .woocommerce-MyAccount-content .autoship-scheduled-order-template .action-info.main-actions a.button.autoship-action-btn { color: #FFFFFF; background-color: #000000; }
	

Result: A 25px area of padding and black border now surround the Main Actions section and the buttons are now black with white text

My Account ➔ Tabs ➔ Scheduled Order Template ➔ Schedule Form

The Schedule Form appears when the Customer selects the "Edit Schedule" action button and enables customers to select a different Frequency and Next Occurrence Date.

CSS Example: Add padding with a black border around the Main Actions section and change the button background color to black and button text color to white

/* CSS Example: Add padding with a black border around the Schedule Form and change the background color to light gray */    

.woocommerce .woocommerce-MyAccount-content .autoship-scheduled-order-template form.autoship-edit-scheduled-order-schedule-form { padding: 25px; border: 3px #000000 solid; background-color:#e0e0e0; }
	

Result: A 25px area of padding and black border now surround the Schedule Form and the background color is now light gray.

My Account ➔ Tabs ➔ Scheduled Order Template ➔ Scheduled Order Edit Form

The Scheduled Order Edit Form contains two sections:

1. Autoship Scheduled Order Items Table (aka the "Cart Shop Table")
2. Autoship Order Totals Section (aka the "Cart Collaterals")

1. Styling the Autoship Scheduled Order Items Table (aka the "Cart Shop Table")

The Scheduled Order Items Table enables Customers to add or remove products & coupons from their Scheduled Order.

Look familiar?  It should!  The Scheduled Order Items Table uses the same elements and classes as the WooCommerce Cart including the Cart Shop Table that displays items added to the cart before a customer checks out from your online store.

See this visual comparison between the WooCommerce Cart and the Scheduled Order Items table:

See this screen recording of how the Shop Table elements & classes in the Cart compare to the same Shop Table elements & classes in the Scheduled Order Items Table:

What it means that the Shop Table elements & classes in the Cart are also in the Shop Table elements & classes in the Scheduled Order Items Table:

• The same styling that your Theme is applying to the Shop Table in the Cart will also generally apply to the Shop Table in the Scheduled Order Items Table.
• If you are customizing the display of the Shop Table in your Cart, you can generally apply the same customizations to the Native UI's Scheduled Order Items Table because of the shared table elements and classes.

CSS Example: Add a light gray background and a black border to the WooCommerce Cart's Shop Table, and add the same style to the Scheduled Order Items Table

/* CSS Example: Add a light gray background and a black border to the WooCommerce Cart's Shop Table */      

table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents { background-color: #efefef; border: 3px #000000 solid; }    

/* CSS Example: Add a light gray background and a black border to the Scheduled Order Items Table */    

table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents.autoship-scheduled-order-items-table { background-color: #efefef; border: 3px #000000 solid; }
	

Result: A light gray background and a black border are applied to both the WooCommerce Cart's Shop Table and the Scheduled Order Items Table

2. Styling the Autoship Order Totals Section (aka the "Cart Collaterals")

The Autoship Order Totals Section displays the Subtotal, Shipping Rate, Additional Tax Rate & Fees, and Order Total.

Look familiar?  It should!  The Autoship Order Totals Section uses the same elements and classes as the Cart Collaterals section in the WooCommerce Cart!

See this visual comparison between the WooCommerce Cart Collaterals and the Autoship Order Totals Section:

What it means that the Cart Collaterals elements & classes in the WooCommerce Cart are also in the Cart Collaterals elements & classes in the Autoship Order Totals:

• The same styling that your Theme is applying to the Cart Collaterals in the Cart will also generally apply to the Cart Collaterals in the Autoship Order Totals.
• If you are customizing the display of the Shop Table in your Cart, you can generally apply the same customizations to the Native UI's Autoship Order Totals because of the shared classes.

CSS Example: Change the font style to italic, add 25px of padding, change the background color to light gray to the WooCommerce Cart's Cart Collaterals, and add the same style to the Autoship Order Totals

/* CSS Example: Change the font style to italic, add 25px of padding, change the background color to light gray to the WooCommerce Cart's Cart Collaterals */        

.cart-collaterals { background-color: #e0e0e0; padding: 25px; font-style: italic; }      

/* CSS Example: Change the font style to italic, add 25px of padding, change the background color to light gray to the Autoship Order Totals */      

.cart-collaterals.autoship-order-totals-section { background-color: #e0e0e0; padding: 25px; font-style: italic; }
	

Result: The text is now italic, 25px of padding is added, and the background color is light gray in the WooCommerce Cart's Cart Collaterals and the Autoship Order Totals.

---

Troubleshooting Display or Styling Issues