Add a button after add to cart and redirect it to some custom link in WooCommerce

问题

I am adding a button after add to cart button using this hook:

add_action( 'woocommerce_after_add_to_cart_button', array($this, 'add_button'));

But when I click on that button it is doing the functionality of add to cart button.

How to customize that button link (to some other page)?

Thanks in advance.

回答1:

You need to use woocommerce_after_add_to_cart_button hook this way to get what you are expecting:

add_action( 'woocommerce_after_add_to_cart_button', 'add_custom_button', 10, 0 );
function add_custom_button() { 
    $my_custom_link = home_url('/my_page_slug/');
    echo '<a class="btn-atc" href="' . esc_url( $my_custom_link ) .'">' . __( "My text button", "my_theme_slug" )  . '</a>';
}; 

Paste this code snippet in function.php file of your active child theme or theme.

Then you will have to replace (in the code) the correct link path, button name and theme slug for:

• '/my_page_slug/'
• "My text button"
• "my_theme_slug"

This should work.

---

This section is OUT of your question and it's about styling your button:

You'll maybe need to add some custom CSS rules to the style.css file located in your active child theme or theme, for styling appearance of your custom button (Use "btn-atc" class instead of "btn"):

/* Based on your comment */

a.btn-atc {
    background-color: #eee !important; 
    border: 2px solid #999; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    font-size: 20px; 
    font-weight: 500; 
    line-height: 1.7em !important; 
    margin-left: 5px; 
    margin-top: -5px; 
    position: relative; 
    padding: 0.3em 1em; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    transition: all 0.2s; 
}
a.btn-atc:hover {
    background-color: #666 !important; 
    color: #fff !important; 
}

来源：https://stackoverflow.com/questions/38675675/add-a-button-after-add-to-cart-and-redirect-it-to-some-custom-link-in-woocommerc