Replace add to cart button with a read more linked to product page on shop pages in WooCommerce 3

Question

I am using woocommerce and I have the following issue:

• The products are displayed in the homepage with their price and add to cart button.
• Add to cart button redirects to cart page.
• The image of each product redirects to product page.

An important thing is to allow customers to be able to read the description of the product before adding it to cart.

Is there a way to replace add to cart button with read more in order to redirect from homepage to each product's page where the add to cart button will appear?

Answer 1

Replacing the button add to cart by a link to the product in Shop and archives pages for woocommerce 3+:

add_filter( 'woocommerce_loop_add_to_cart_link', 'replacing_add_to_cart_button', 10, 2 );
function replacing_add_to_cart_button( $button, $product  ) {
    $button_text = __("View product", "woocommerce");
    $button = '<a class="button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';

    return $button;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested on WooCommerce 3+ and works. You can customize the text of button and you will get something like:

Answer 2

Add these to your functions.php file in the theme folder

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');

Answer 3

In case it helps, this worked for me to apply this solution only to simple products, since variable products don't "add to cart" on archive pages anyway. This way it can be clearer that a product has more options (if it is variable). I also changed the text of "select options" to "more options" in the example below (since not all products in my case would be purchasable even after viewing the single product page's url, which is another non-topical idea for this thread):

// changes the "select options" text. Forget who to give credit to for this.
add_filter( 'woocommerce_product_add_to_cart_text', function( $text ) {
global $product;
if ( $product->is_type( 'variable' ) ) {
    $text = $product->is_purchasable() ? __( 'More Options', 'woocommerce' ) : __( 'Read more', 'woocommerce' );
}
return $text;
}, 10 );

/**
 * remove add to cart buttons on shop archive page
 */

add_filter( 'woocommerce_loop_add_to_cart_link', 'replacing_add_to_cart_button', 10, 2 );
function replacing_add_to_cart_button( $button, $product  ) {
if ( $product->is_type( 'simple' ) ) {
$button_text = __("View product", "woocommerce");
$button = '<a class="button" href="' . $product->get_permalink() . '">' . 
$button_text . '</a>';
}
return $button;
}

Answer 4

I got the same problem i had a donation product, so it had a custom price i.e. you could make any amount of donation so in the shop page i replaced the add to cart button for that product to "Details" which would redirect it to product single page from where user could make any donation. I used this code. The code goes in your theme's or child theme's functions.php file

function filter_woocommerce_loop_add_to_cart_link( $quantity,$product ) {  
$product_id = $product->get_id();
$title = $product->get_title();
$sku = $product->get_sku();
if($product_id == get_option( 'woocommerce_donations_product_id' )){
    //var_dump($title);
    //var_dump($sku);
    //var_dump($quantity);
    $simpleURL = get_permalink();
    //var_dump($simpleURL);
    $quantity='<a href="'.$simpleURL.'" data-quantity="1" class="product_type_simple ajax_add_to_cart" data-product_id="'.$product_id.'" data-product_sku="'.$sku.'" aria-label="Read more about “'.$title.'”" rel="nofollow"><span class="filter-popup">Détails</span></a>';
    //var_dump($quantity);
}
return $quantity;
//exit();
};
// add the filter 
add_filter( 'woocommerce_loop_add_to_cart_link','filter_woocommerce_loop_add_to_cart_link', 10, 2 );