Remove Add 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.

Related Blogs

Add Custom Product Data Tab

Learn how to enhance your WooCommerce product editor by adding a custom product data tab. Follow a step-by-step guide using the woocommerce_product_data_tabs filter and the woocommerce_product_data_panels action. Create a custom tab with your desired label, and include your own fields or content within the panel. Customize your product data to collect and display additional information, providing a tailored experience for your WooCommerce products.

Hide Products Based On Custom Field / ACF Value : WooCommerce

To hide products in WooCommerce based on a custom field or Advanced Custom Fields (ACF) value, you’ll need to use some custom code. Specifically, you’ll have to hook into the WooCommerce product query and modify it to include your custom field or ACF value as a condition for hiding products.

Disable Repeat Purchase Of Product

To disable repeat purchase of products in WooCommerce, you can implement a custom solution using a combination of code snippets and WooCommerce hooks. The idea is to prevent customers from adding the same product to the cart if it already exists in the cart. Below are the steps to achieve this:

Request A Quote

Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.