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.
