[WooCommerce] Styling the Native UI Display Option Templates

Enabling the Native UI Display Option

In order to use the Native UI Display Option, ensure that the   WP-Admin > Autoship Cloud > Settings >> Additional options.

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)

WooCommerce Product Subscriptions - My Account Tabs Styling

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

Styling the WooCommerce My Account Tab for Subscription Products

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 tab in WooCommerce Styling Next Scheduled Autoship Summary

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

Styling the Subscription Action Buttons in My Account - WooCommerce Autoship

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.

Styling the Schedule and Frequency for WooCommerce Subscription Products in My Account

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

Styling the Cart Shop Table and the Scheduled Order Shop 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:

Comparing the WooCommerce Cart Totals with the Autoship Order Totals in My Account

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.

Styling the WooCommerce Cart Totals versus Styling the Autoship Order Totals


Troubleshooting Display or Styling Issues

The Native UI Display Option Templates use elements and classes that are tested to work and display well with WooCommerce themes.   

However, if your theme has custom code that overrides the normal display of WooCommerce elements in My Account, you may need to identify what styles your theme is changing in order to achieve the best possible display.

Step 1: Determine if your theme is causing a display or styling issue by switching your site to use a "basic" WordPress Theme (like Storefront)

Switching your theme is the fastest and most effective way to identify if your Theme contains styling rules (CSS) or custom code that causes a display issue.

Example: In this example, we see a display issue where the Scheduled Order is displayed in a narrow column and cannot see all of the details we expect.

To see if the display issue is caused by our theme, we switch the active theme in WordPress from "Flatsome" to "Storefront".

  • Storefront is a basic and free theme developed by WooCommerce, so when we switch to it, we can quickly see if the display issue is still occurring or not.  If the display issue goes away after switching the active theme to Storefront, then we can confirm that the issue exists only in the "Flatsome" theme and know that we will need to update the styling rules (CSS) only in the Flatsome Theme in order to fix the display issue.

Does the display issue go away when we switch the theme to Storefront?  
In this example, the display issue is no longer occurring after switching to the Storefront theme, so now we know that there are styling rules (CSS) in our Flatsome theme that we need to fix.

Step 2: Updating the styling (CSS) in your theme to fix the display issue

Important! If you do not know how to change the styling (CSS) for your site's theme, you will want to show the issue to either the Author of the theme that you are using or to your web designer.

Example: In this example, we re-activate our original theme (Storefront) and see what styling rule (CSS) is being applied to the page that needs to be updated.  Next, we update the custom CSS in the original theme (Flatsome) and reload the page to confirm that the display issue is now resolved.