Replace “Add to Cart” Button in Products Category List With a Link to Single Product Page in Woocommerce

Woocommerce WordPress shop categories display different types of products with different buttons, like Select Options, More Info and Add to Cart. I wanted to have all this buttons to be the same, something like “More Info”. This can be done from functions.php of my child theme.

To replace default “Add to Cart” button with i.e. More Info link put this code into your functions.php file.

/* replace add to cart text on button */
add_filter('add_to_cart_text', 'woo_custom_cart_button_text');
function woo_custom_cart_button_text() {
return __('More Info', 'woocommerce');
}

/* remove add to cart class */
add_filter('add_to_cart_class', 'woo_custom_cart_button_class');
function woo_custom_cart_button_class() {
return __('more_info_button', 'woocommerce');
}

/* make all products go to product page */
add_filter( 'add_to_cart_url', 'woo_more_info_link' );
function woo_more_info_link( $link ) {
global $product; // switches link in all cases, i.e. in plugins
$link = get_permalink( $product->id );  
return $link;
}

We must remove add to cart class, if not, it will add the product to cart.

Now all buttons will have the same link to a product’s page, and you can also replace their text to be the same. There are some plugins that can help, or just add to your functions.php for i.e. variable products:

/* change text on variable products */
add_filter('variable_add_to_cart_text', 'woo_custom_cart_button_text1');
function woo_custom_cart_button_text1() {
return __('More Info', 'woocommerce');
}

With some additional CSS tweaks all buttons of your product boxes in a category page loop can be the same now.

Share:
This entry was posted in WordPress and tagged . Bookmark the permalink.

16 Responses to Replace “Add to Cart” Button in Products Category List With a Link to Single Product Page in Woocommerce

  1. Jenny says:

    Thank you – Thank you! I have been looking for this solution for months!

  2. Angel says:

    Its not working when I update to new woocommerce to version 2.1.

    What I need to change it to make it working..? Please help.. Thankss

  3. Jennifer says:

    Yes no longer working in WooCommerce version 2.1, please help!

  4. Ryan says:

    Change

    /* replace add to cart text on button */
    add_filter('add_to_cart_text', 'woo_custom_cart_button_text');
    function woo_custom_cart_button_text() {
    return __('More Info', 'woocommerce');
    } 

    to

    /* replace add to cart text on button */
    add_filter('woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text');
    function woo_custom_cart_button_text() {
    return __('More Info', 'woocommerce');
    }
  5. Angel says:

    Hy Ryan, that works for change the text only. When I click the button its still add to cart..
    This one below is not working now. Hope somebody can help.. πŸ™‚

    /* make all products go to product page */
    add_filter( 'woocommerce_product_add_to_cart_url', 'woo_more_info_link' );
    function woo_more_info_link( $link ) {
    global $product; // switches link in all cases, i.e. in plugins
    $link = get_permalink( $product->id );
    return $link;
    }
  6. how about this? πŸ™‚ πŸ˜‰

    /* replace add to cart text on button - Basically its just intialization*/
    add_filter('woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text');
    function woo_custom_cart_button_text() {
    return __('More Info', 'woocommerce');
    }
    
    /* this is the magic */
    add_filter( 'woocommerce_loop_add_to_cart_link', 'add_product_link' );
    
    function add_product_link( $link ) {       
    $link = '<a href="'.get_permalink().'" rel="nofollow">Product Details</a>';  
    
    return $link;
    }
    
  7. Jennifer says:

    Using the last method with “this is the magic”, it changes the button to text. Do you have a method to keep the button for the link?

  8. pravin says:

    You can check following code, that may help you πŸ™‚

    add_filter( 'woocommerce_loop_add_to_cart_link', 'add_product_link' );
    function add_product_link( $link ) {
    $link = '<a href="'.get_permalink().'" rel="nofollow">BUY NOW</a>';
    return $link;
    }
    
  9. Elsa Blomster says:

    The last solution still changes the button to a link πŸ™ How can it be kept as a button?

  10. Elsa Blomster says:

    Found the solution on this page

    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
    add_action( 'woocommerce_after_shop_loop_item', 'my_woocommerce_template_loop_add_to_cart', 10 );
    
    function my_woocommerce_template_loop_add_to_cart() {
        global $product;
        echo 'get_permalink( $product-&gt;id ) ) . '" method="get"&gt;
                ' . __('View More', 'woocommerce') . '
              ';
    }
  11. Pingback: How to change the Add To Cart Link and Text on WooCommerce Archive Page - Sure Fire Web Services Inc.

  12. Alex says:

    Hi,

    I just like to know how to disable the add to cart function, so i don’t want it to be removed from the page, but only that if you click it, it doesn’t get the product added to the cart.

    This code didn’t work. Anyone that can tell me the right code?

    /* remove add to cart class */
    add_filter('add_to_cart_class', 'woo_custom_cart_button_class');
    function woo_custom_cart_button_class() {
    return __('more_info_button', 'woocommerce');
    }
  13. Complete solution (from above)

    /* Read more button - instead of shopping cart (on product hover) 
    // =====================================================
    */
    
    add_filter('woocommerce_product_add_to_cart_text', function() {
    	return __('More information', 'woocommerce');
    });
    
    // make all products go to product page
    add_filter( 'woocommerce_loop_add_to_cart_link', function() {
        $link = sprintf( 'More information',
            esc_url( get_permalink() )
        );
        return $link;
    });
  14. That last link should be:

    $link = sprintf( 'More information'.esc_url(get_permalink() ));
  15. Allison says:

    I have a “Select Options” button on my category page. When I added a variable product, is then added a variable product options drop down under the “Select Options” button. I want to remove the variable options drop down and only have the “Select Options” button that takes user to product page. How do I remove the drop down?

  16. Alexander says:

    I have seen that most of the store owners got confused while removing or disable the add to cart button. Now for any shop page or product you can remove the the add 2 cart button. You just have to follow these simple steps. In woocommerce.php (located wp-content/plugins/woocommerce)

    function WpBlog() {
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart');
    return WooCommerce::instance();
    }

    Reference: https://www.wpblog.com/add-to-cart-button-in-woocommerce-store/

Leave a Reply

Your email address will not be published. Required fields are marked *