在 woocommerce 商城开发中，有时我们需要在单品页面提供除默认“加入购物车”功能之外的额外操作，例如“加入报价单”或“立即购买并跳转到特定页面”。这些自定义按钮需要具备与原始加入购物车按钮相同的商品添加逻辑，但后续的页面重定向行为则需不同。本文将提供一个分步教程，指导您如何实现这一需求。
默认情况下，WooCommerce 的“加入购物车”按钮会将商品添加到购物车，并根据设置重定向到购物车页面或当前页面。当我们需要一个功能上与“加入购物车”一致，但在完成添加商品后重定向到不同页面的按钮时，面临的主要挑战是如何：
本教程将通过以下三个核心步骤来解决上述挑战：
首先，我们需要在 WooCommerce 单品页面添加一个新的按钮。为了确保新按钮能够触发标准的加入购物车逻辑，我们需要复制原始按钮的关键属性，特别是 name="add-to-cart"。我们将使用 woocommerce_after_add_to_cart_button 钩子，它允许我们在原始加入购物车按钮之后插入内容。
将以下代码添加到您的主题 functions.php 文件或自定义插件中：
/**
* 在 WooCommerce 单品页添加一个自定义的加入购物车按钮副本。
*/
function action_woocommerce_after_add_to_cart_button_custom() {
global $product;
// 自定义按钮文本
$button_text = __( '加入报价单', 'your-text-domain' ); // 请替换为您的文本域
// 确保当前是 WC_Product 对象
if ( is_a( $product, 'WC_Product' ) ) {
// 对于简单产品
if ( $product->is_type( 'simple' ) ) {
echo '<button type="submit" name="add-to-cart" value="' . esc_attr( $product->get_id() ) . '" class="single_add_to_cart_button button alt custom_redirect_button">' . $button_text . '</button>';
// 对于可变产品
} elseif ( $product->is_type( 'variable' ) ) {
// 可变产品不需要 value 属性，因为其 ID 会通过表单的其他字段提交
echo '<button type="submit" class="single_add_to_cart_button button alt custom_redirect_button">' . $button_text . '</button>';
}
}
}
add_action( 'woocommerce_after_add_to_cart_button', 'action_woocommerce_after_add_to_cart_button_custom', 10 );代码说明：
为了区分用户点击的是原始按钮还是我们添加的自定义按钮，我们需要在自定义按钮被点击时，动态地向表单中添加一个隐藏字段。这个隐藏字段将作为后续重定向逻辑的判断依据。
将以下代码添加到您的主题 functions.php 文件或自定义插件中：
/**
* 在自定义加入购物车按钮点击时添加隐藏输入字段。
*/
function action_wp_footer_add_custom_redirect_marker() {
// 仅在单品页面加载此脚本
if ( is_product() ) {
?>
<script type="text/javascript">
jQuery( function($) {
// 监听带有 'custom_redirect_button' 类的按钮点击事件
$( document ).on( 'click', '.custom_redirect_button', function () {
// 确保按钮未被禁用
if ( ! $( this ).hasClass( 'disabled' ) ) {
// 在按钮之后添加一个隐藏的输入字段
// 这个字段将随表单一起提交到服务器
$( this ).after( '<input type="hidden" name="custom-redirect" value="my-custom-action" />' );
}
});
});
</script>
<?php
}
}
add_action( 'wp_footer', 'action_wp_footer_add_custom_redirect_marker', 10 );代码说明：
最后一步是利用 WooCommerce 的 woocommerce_add_to_cart_redirect 过滤器来修改重定向 URL。这个过滤器在商品成功添加到购物车后触发，允许我们拦截并修改默认的重定向行为。
将以下代码添加到您的主题 functions.php 文件或自定义插件中：
/**
* 根据自定义按钮的点击，修改加入购物车后的重定向 URL。
*
* @param string $redirect_url 默认的重定向 URL。
* @param object $product 已添加到购物车的 WC_Product 对象。
* @return string 修改后的重定向 URL。
*/
function filter_woocommerce_add_to_cart_redirect_custom( $redirect_url, $product ) {
// 检查是否存在我们通过 jQuery 添加的隐藏字段
if ( isset( $_REQUEST['custom-redirect'] ) ) {
// 检查隐藏字段的值是否与我们预设的匹配
if ( $_REQUEST['custom-redirect'] == 'my-custom-action' ) {
// 设置自定义的重定向 URL。请将 '123' 替换为您希望重定向到的页面的实际 ID。
// 您也可以使用 get_permalink( get_page_by_path( 'your-custom-page-slug' )->ID );
$redirect_url = get_permalink( 123 ); // 例如，页面ID为123的页面
}
}
return $redirect_url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'filter_woocommerce_add_to_cart_redirect_custom', 10, 2 );代码说明：
通过以上三个步骤，您已成功在 WooCommerce 单品页面复制了一个“加入购物车”按钮，并为其配置了独立的重定向逻辑。这个解决方案不仅功能完善，而且高度可扩展，能够满足各种自定义需求，同时确保了与 WooCommerce 核心功能的良好兼容性。通过这种方式，您可以为用户提供更多样化的交互选项，提升购物体验。
以上就是WooCommerce 单品页复制加购按钮并实现自定义重定向的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
148
收藏
