Add “View Product” button bellow add to cart butto

问题:

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?

回答1:

Use this custom function hooked in woocommerce_after_shop_loop_item action hook, to add your custom button linked to the product:

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 function.php file of your active child theme (or theme) or also in any plugin file.

Tested and works.

---

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.