php - 添加到购物车后添加一个按钮并将其重定向到 WooCommerce 中的一些自定义链接

Question

我在使用此钩子添加到购物车按钮后添加了一个按钮：

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

但是当我单击该按钮时，它正在执行添加到购物车按钮的功能。

如何自定义该按钮链接（到其他页面）？

提前致谢。

Answer 1

您需要以woocommerce_after_add_to_cart_button这种方式使用钩子来获得您所期望的：

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

将此代码片段粘贴到您的活动子主题或主题的 function.php 文件中。

然后，您必须（在代码中）替换正确的链接路径、按钮名称和主题 slug：

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

这应该有效。

---

这部分是你的问题，它是关于你的按钮的样式：

您可能需要将一些自定义 CSS 规则添加到位于活动子主题或主题中的 style.css 文件，以设置自定义按钮的外观（使用“btn-atc”类而不是“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; 
}