Remove Add to Cart Button and Enable View Product on Shop Page

Convert WooCommerce shop page to catalog mode by removing add to cart buttons using woocommerce_loop_add_to_cart_link filter returning empty string, link product images and titles to single product pages with get_permalink, check if on shop page with is_shop conditional, wrap product elements with anchor tags using esc_url for security, redirect customers to product detail pages instead of direct cart additions, perfect for catalog-only stores, products requiring customization, or driving traffic to detailed product pages with complete information before purchase.

Remove Add to Cart, Add View Product on Shop Page WooCommerc

Ajax Ajax Wordpress Code Snippets Coding Blog Content Management Hooks PHP PHP Snippets Theme Development Woocommerce Woocommerce Hooks Wordpress WordPress Development WordPress How-To WordPress Tips

Remove Add to Cart, Add View Product on Shop Page WooCommerc Tutorial/Guide

Remove Add to Cart, Add View Product on Shop Page WooCommerce

To remove the "Add to Cart" button and link the product image/title to the single product page on the WooCommerce shop page, you can use a combination of filters and hooks. Here's how you can achieve this:

Step 1: Remove the "Add to Cart" Button

Add the following code to your theme's functions.php file or a custom plugin:

function custom_remove_add_to_cart_button($html, $product) {
	// Check if you are on the shop page
	if (is_shop()) {
		// Remove the "Add to Cart" button
		return '';
	}
	return $html;
}
add_filter('woocommerce_loop_add_to_cart_link', 'custom_remove_add_to_cart_button', 10, 2);

Step 2: Link the Product Image and Title to the Single Product Page

Add the following code to your theme's functions.php file or a custom plugin:

function custom_shop_product_link($html, $product) {
	// Check if you are on the shop page
	if (is_shop()) {
		// Get the product ID
		$product_id = $product->get_id();

		// Get the product URL and wrap the product image and title with the link
		$product_url = get_permalink($product_id);
		$html = '<a href="' . esc_url($product_url) . '">' . $html . '</a>';
	}

	return $html;
}
add_filter('woocommerce_product_get_image', 'custom_shop_product_link', 10, 2);
add_filter('woocommerce_template_loop_product_title', 'custom_shop_product_link', 10, 2);

Step 3: Save Changes and Test

Save the changes to your functions.php file or custom plugin. Now, when you visit the WooCommerce shop page, the "Add to Cart" button will be removed, and the product image and title will be linked to the single product page. Please note that removing the "Add to Cart" button on the shop page might affect the overall user experience, and customers won't be able to add products directly to the cart from the shop page. Make sure this is the desired behavior for your store. Additionally, if your theme has custom shop page templates or if you're using a page builder, you might need to adjust the code accordingly to target the correct elements on the shop page. Always test the changes in a staging environment to ensure they work as expected before implementing them on a live site.

๐Ÿ’ก Have a Coding Problem?

Search our archives or reach out to our team for solutions and expert advice.