Change add-to-cart button for simple products in Woocommerce shop page

Question

I tried adding a jquery to change the html and the link, But it's not really working due to the ajax_add_to_cart.

jQuery(document).ready(function($) {
    var url = $('li.product-type-simple .product-category').attr('href');
    $(this).find('.add-to-cart-button').attr('href', url).html('View Details');
});

When you notice in this page it shows Select Options:

I want that in it will display as View Details and will redirect to the product page.

But adding this in functions.php is making the product cannot be purchased:

add_filters( 'woocommerce_is_purchasable', false, $this );

I also added this but it's not working.

// added by Vahn
/*PUT THIS IN YOUR CHILD THEME FUNCTIONS FILE*/

/*STEP 1 - REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */

function remove_loop_button(){
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
}
add_action('init','remove_loop_button');



/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action('woocommerce_after_shop_loop_item','replace_add_to_cart');
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode('<br>[button link="' . esc_attr($link) . '"]Read more[/button]');
}

//end added

LoicTheAztec LoicTheAztec · Accepted Answer · 2018-03-01T10:37:34

You should try the following code (where you can change or customize the button if needed). But if your theme is making already customization on this, it could not work:

add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_loop_add_to_cart_button', 30, 2 );
function replace_loop_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;
}

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

Tested and works.

Change add-to-cart button for simple products in Woocommerce shop page

1 Answers