1

Most of the articles on the internet are about How to remove / replace the "view product" or "read more" button.
I couldn't find something related to allowing both buttons working together.

I am interested in having both buttons working in parallel ( at the same time ). The first button to be displayed should be "View product" (to be opened on the same page) then underneath "Add to Cart"

At the moment, my store only displays the Add to cart button. I am using Storefront theme ( + custom child theme ).

Would anyone be so kind and tell me how to do this?

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
NoiTrade88
  • 43
  • 1
  • 1
  • 5

1 Answers1

7

Use this custom function hooked in woocommerce_after_shop_loop_item action hook, to add your custom button linked to the product (except variable and grouped product types):

add_action('woocommerce_after_shop_loop_item', 'add_a_custom_button', 5 );
function add_a_custom_button() {
    global $product;

    // Not for variable and grouped products that doesn't have an "add to cart" button
    if( $product->is_type('variable') || $product->is_type('grouped') ) return;

    // Output the custom button linked to the product
    echo '<div style="margin-bottom:10px;">
        <a class="button custom-button" href="' . esc_attr( $product->get_permalink() ) . '">' . __('View product') . '</a>
    </div>';
}

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

Tested and still perfectly works on WooCommerce 3.7.x (with last storefront theme):

on shop page

Embedding your styles (related to author comments):

add_action('wp_head', 'custom_button_styles', 9999 );
function custom_button_styles() {
    if( is_shop() || is_product_category() || is_product_tag() ):

    // The styles
    ?>
    <style>
        .button.custom-button { background-color: white !important;
            color: black !important; border: 2px solid #4CAF50 !important; }
        .button.custom-button:hover { background-color: black !important;
            color: white !important; border: 2px solid black !important; }
    </style>
    <?php
    endif;
}

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

Tested and works.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • amazing, it works. Thank you so much ! Another question, is it possible to edit the background color and the text color of this button alone? thanks – NoiTrade88 Oct 28 '17 at 14:38
  • as well, I observed that there is quite a gap in between the 2 buttons, can this distance be reduced? thanks – NoiTrade88 Oct 28 '17 at 14:43
  • thank you, the system doesn't allow me to post a new question ( new account ) , besides this original question was down-voted. – NoiTrade88 Oct 28 '17 at 14:48
  • so I added this in style.css ( in the child theme ): custom-button { background-color: white; color: black; border: 2px solid #4CAF50; /* Green */ } However, nothing shows up – NoiTrade88 Oct 28 '17 at 15:01
  • il ne fonctionne pas. I'm thinking if there is a problem with the class name of the button. Would it be possible to name this new custom button for example .custom-button1 ? something like this . – NoiTrade88 Oct 28 '17 at 15:17
  • @NoiTrade88 I have updated my answer adding a function for styling the buttons… I have tested on storefront theme and it works… – LoicTheAztec Oct 28 '17 at 15:41