How to Move the “Add To Cart” Button in WooCommerce

Many people have asked why the “Add To Cart” button is in the top right corner on their WooCommerce website. This may be a default setting, but you can change it! In this blog post we will discuss how to move your “Add To Cart” button to either the bottom of each product or even to a custom location on your site.

WooCommerce is a free eCommerce plugin for WordPress that helps you sell anything online. It’s easy to use and has everything you need to create an online store, including payment gateways, taxes, shipping rates and more. You can also embed product videos from YouTube or Vimeo into your posts. The plugin has many features like marketing, inventory management, checkout functionality, etc. You can even create coupons! Best of all? It’s completely open source!

Add to Cart is an important feature of a shop. That’s why we need to know how to customize it for the best conversion rate.

Use action

Wocommerce is flexible when it comes to allow developer to change position or add more features to a shop’s element.

In woocommerce/templates/content-single-product.php file you will find a list of a product’s element with its order and respective hook name.

<div class="summary entry-summary">
		<?php
		/**
		 * Hook: woocommerce_single_product_summary.
		 *
		 * @hooked woocommerce_template_single_title - 5
		 * @hooked woocommerce_template_single_rating - 10
		 * @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
		 * @hooked WC_Structured_Data::generate_product_data() - 60
		 */
		do_action( 'woocommerce_single_product_summary' );
		?>
	</div>

What we need to do is to change woocommerce_template_single_add_to_cart action’s order.

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

Use CSS

In some cases, your active theme already hooks that action which leads to the code above doesn’t work. With CSS3, we can make the same happens with some style lines.

.entry-summary{
	display: flex;
	flex-flow: column-reverse;
}

flex-flow property allows elements to sort follow an order. And column-reverse sorts all elements in a reversed order.