WooCommerce is a fantastic WordPress plugin, but unless you’re really familiar with how it works you may run into a number of things that, on the surface at least, can not be done. One such thing is modifying the single product page template to rearrange the elements.

To do this you need to understand the woocommerce_single_product_summary action that you can find in content-single-product.php. Upon closer inspection, you’ll see something instantly familiar about the programming below. It’s actually the order of your single product layout.


        /**
         * woocommerce_single_product_summary hook
         *
         * @hooked woocommerce_template_single_title - 5
         * @hooked woocommerce_template_single_price - 10
         * @hooked woocommerce_template_single_excerpt - 20
         * @hooked woocommerce_template_single_add_to_cart - 30
         * @hooked woocommerce_template_single_meta - 40
         * @hooked woocommerce_template_single_sharing - 50
         */
        do_action( 'woocommerce_single_product_summary' );
  

Modifying the order isn’t that difficult either, and the most common way of doing this is to add a few lines to your theme’s functions.php. Try this on for size:

/** Change Add to Cart Position in WooCommerce **/
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 9 );

All we’re really doing is firstly removing the default action from the top code we looked at earlier, and replacing it with a new order. The “30” and “9” are the order in which the item displays in the grand scheme of things. Simple really, isn’t it?