search ]

Change Add to Cart Button Position in WooCommerce

On one of the recent WordPress sites I built for a client, I was asked to change the position of the Add to Cart button in WooCommerce. You can do this by hooking into the action woocommerce_single_product_summary.

The action is defined in content-single-product.php:

<?php
        /**
         * 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' );
?>

In the code above you will find a description of the hook parts, with numbers indicating priority/order. You can change the priority/order by removing and re-adding the parts like this:

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', 15 );

Add the code above to your functions.php file. Experiment with the priority to change the Add to Cart button position in WooCommerce.

Join the Discussion
0 Comments  ]

Leave a Comment

To add code, use the buttons below. For instance, click the PHP button to insert PHP code within the shortcode. If you notice any typos, please let us know!

Savvy WordPress Development official logo