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.

itzmekhokan · Accepted Answer · 2019-09-03T08:52:53.747

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;
}

edited Sep 03 '19 at 08:52

answered Sep 02 '19 at 09:11

itzmekhokan

2,597
2
9
9

@ClaimJohn, I just updated my code snippet for your theme. I think it should work now. Just replace the previous one with above. – itzmekhokan Sep 03 '19 at 05:21
it working but not display inline bro how to solve this problem !! thanks – Claim John Sep 03 '19 at 08:00
Can you send me a link with the applied code. So I can check – itzmekhokan Sep 03 '19 at 08:14
@ClaimJohn, as I can see from your previous site link, it's display button in inline. Can you show me any screen shot that exactly you want. – itzmekhokan Sep 03 '19 at 08:26
i want to display like that – Claim John Sep 03 '19 at 08:40
@ClaimJohn I just added inline style in custom anchor and updated the above code. Please check it. Is it exactly you want. – itzmekhokan Sep 03 '19 at 08:54

Shir Gans · Answer 2 · 2019-09-01T08:04:07.080

0

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

edited Sep 01 '19 at 08:04

answered Sep 01 '19 at 07:53

Shir Gans

1,976
3
23
40

sorry i'm wrong i have edited my question ! please help me solve thanks – Claim John Sep 01 '19 at 07:57
If you can send me a message with URL I will be able to check – Shir Gans Sep 01 '19 at 08:29

score 0 · Answer 3 · answered Sep 01 '19 at 11:18

0

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;
}

answered Sep 01 '19 at 11:18

Shir Gans

1,976
3
23
40

i want both buttons display inline bro please help me solve ! – Claim John Sep 01 '19 at 14:25
`Uncaught ArgumentCountError: Too few arguments to function ` – Claim John Sep 01 '19 at 14:32
`Stack trace: #0 wp-includes/class-wp-hook.php(286): add_my_custom_button('
– Claim John Sep 01 '19 at 14:33

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

3 Answers3