[WooCommerce] 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: Changing the Action Where Autoship Options Are Hooked in the Product Page Template

In this example, the Admin edits their child 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 current action hook ( ' woocommerce_before_add_to_cart_button' ), and adding them to the new 'woocommerce_after_add_to_cart_form' action hook. 

Want to display the Autoship Options on a custom product page template or a template that doesn't have the above action hooks? No problem, learn more in this helpful article!

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

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

By adding 2 lines of code to the child-theme's  functions.php file (shown below), the Admin can move 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 2: 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

Related Articles