添加到购物车后添加按钮，并将其重定向到WooCommerce中的某些自定义链接 [英] 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)?

请先谢谢。

推荐答案

您需要使用 woocommerce_after_add_to_cart_button >通过这种方式获得期望的结果：

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

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

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_theme_slug

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

这应该可行。

本部分不属于您的问题，它与按钮的样式有关：

您可能需要向活动子主题或主题中的style.css文件添加一些自定义CSS规则，以样式化自定义按钮（使用 btn-atc类而不是 btn）：

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

这篇关于添加到购物车后添加按钮，并将其重定向到WooCommerce中的某些自定义链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！