-3

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.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
Ankur
  • 11
  • 1
  • 1
  • What does the callback function `add_button` look like? Please edit your question to include the code instead of posting in the comments. – helgatheviking Jul 30 '16 at 22:40

1 Answers1

5

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; 
}
LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • Hey thanks for Answer. i am tring to change the css of that button echo ''; }; by using class as btn – Ankur Jul 31 '16 at 08:30
  • Css script .btn{margin-left: 5px; margin-top: -5px; position: relative; padding: 0.3em 1em; border: 2px solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: transparent; font-size: 20px; font-weight: 500; line-height: 1.7em !important; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } – Ankur Jul 31 '16 at 08:34
  • but still their is no changes in my button style – Ankur Jul 31 '16 at 08:34