How Can I Change Where the Autoship Options Display on my Product Pages?

Autoship select and frequency options are displayed on WooCommerce Product Page templates using WooCommerce hooks

Most WooCommerce theme's will immediately display Autoship options whenever a WooCommerce Product is enabled to display Autoship Options (see instructions for enabling products for Autoship here).  

However, if your product page template has been customized (by your theme, plugins, or custom code) in a way that changes (or hides) the display of Autoship options, then you may want to make some adjustments using styling (CSS) and/or hooks so that your product page display looks great!

In this article, we will show a couple of different ways that a WordPress Admin can make basic changes to their WooCommerce Product Page template in order to change how the Autoship options are displayed on the product page.

Example 1: Use CSS to change the display of Autoship Options on the Product Page

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.  This is how we can target the elements on the page that we want to change with CSS. See how to copy the element's selector in the example below. 

Now let's add a styling rule to our Wordpress Theme to change the display.

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-11042 > div > div.product-main > div > div.product-info.summary.col-fit.col.entry-summary.product-summary > form {
     display: flex;
     flex-direction: column;    
}

Example 2: Changing the Action Where Autoship Options Are Hooked in the Product Page Template

In this example, the Admin edits their active theme's  functions.php file ( which can be found in WP-Admin > Appearance > Theme Editor ). 

Let's move the Autoship options from displaying above the "Add to Cart" button to below the "Add to Cart" button by removing them from the existing hook (' woocommerce_before_add_to_cart_button'), using the 'woocommerce_after_add_to_cart_form' action hook. 

These hooks exist on the WooCommerce Single Product pages, but you can use the ' autoship_print_cart_autoship_options' & 'autoship_print_cart_autoship_options_variable' to render Autoship options on any custom product page template.

Before: Autoship Options displayed above the "Add to Cart" button

After: Re-Hooking the Autoship Options in the Product Page Template

By adding the 2 lines of code to the active theme's  functions.php file (shown below), the Admin moves their Autoship Options to display below the "Add to Cart" button. 

remove_action('woocommerce_before_add_to_cart_button', 'autoship_print_cart_autoship_options');
add_action('woocommerce_after_add_to_cart_form', 'autoship_print_cart_autoship_options');

Example 3: Display Autoship Options Before One-time Options

In this example, the "Autoship and Save" option is customized using CSS to display before the "One-time Purchase" option. This is outlined in our code example here: Product Page: Display Autoship as First Option.

Before 

After

Still need help? Contact Us Contact Us