skip to Main Content

Display Static WooCommerce Add to Cart Button on Mobile

By default the Total theme displays an add to cart button when hovering over the product image for product entries. If you wanted to display a static button mobile only it's possible with a little code. The following code re-adds the static button and hides it on all devices over 1024px

/**
 * Insert a "static" (aka, non-hover) add to cart button into the products to display on mobile.
 *
 * @link https://total.wpexplorer.com/docs/snippets/display-static-woocommerce-add-to-cart-button-on-mobile/
 */
function my_custom_product_add_to_cart() {
	echo '<div class="wpex-lg-hidden">';
		woocommerce_template_loop_add_to_cart();
	echo '</div>';
}

add_action( 'init', function() {
	add_action( 'woocommerce_after_shop_loop_item', 'my_custom_product_add_to_cart', 10 );
} );
All PHP snippets should be added via child theme's functions.php file or via the Code Snippets Plugin (or alternative plugin)
Back To Top