Woocommerce Question posted in
The official Woocommerce documentation can be found here.

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

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)?

Image here !

Any help is appreciated.

Tags:

3

Answers


  1. 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

    enter image description here

    Login or Signup to reply.
  2. 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;
}
    Login or Signup to reply.
  3. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search