How to add View Product Detail Button Link Beside “Add To Cart” Button In WooCommerce?

Question

The " Add "View Product" button below add to cart button in WooCommerce archives pages " answer code allows to display an additional "View Product" button below add to cart button on archive pages.

How to get this additional button to be displayed beside add to cart button (not below)?

Any help is appreciated.

Answer 1

Add the follows code snippets in your active theme's functions.php -

add_action('woocommerce_loop_add_to_cart_link', 'add_a_custom_button', 99, 3 );
function add_a_custom_button( $add_to_cart_button, $product, $args = array() ) {
    if( $product->is_type('variable') || $product->is_type('grouped') ) return $add_to_cart_button;
    $custom_button = '<a class="button primary is-outline mb-0 is-small" style="margin-left: 5px !important;" href="' . esc_attr( $product->get_permalink() ) . '">' . __('DETAIL PRODUCT') . '</a>';
    return $add_to_cart_button . $custom_button;
}

Answer 2

It works for me. Need to add CSS to make them both on the place: The div you added (better not to use inline CSS:

    display: inline-block;
    width: 49%;

The "Add to cart" button:

display: inline-block;
width: 49%;
margin-left: 2%;

Use id for your added button, and also for the add to cart button. (see image below).

A better solution, but a bit harder to implement will be to wrap both in a div and use flex CSS

Answer 3

I think your template changes the hooks order. You can be more aggressive and add your button through this filter:

add_filter('woocommerce_loop_add_to_cart_link', 'add_my_custom_button', 20, 3);
function add_my_custom_button($html, $product, $args){
    if( $product->is_type('variable') || $product->is_type('grouped') ) return;
    $html .= '<div style="margin-bottom:10px;">
        <a class="button custom-button" href="' . esc_attr( $product->get_permalink() ) . '">' . __('DETAIL PRODUCT') . '</a>
    </div>';
return $html;
}