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

Question

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\'));


        

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