在许多定制化的 woocommerce 网店中，可能需要为产品提供除了标准“加入购物车”并跳转到购物车页面之外的选项，例如“加入报价单”并跳转到报价单页面。这种需求的核心挑战在于，既要复制“加入购物车”按钮的所有后端功能（例如处理自定义购物车商品数据），又要能够灵活地控制其重定向行为。本教程将详细介绍如何通过三步实现这一目标：添加一个功能类似的按钮、动态地为该按钮的提交行为添加一个标识，以及利用 woocommerce 的重定向过滤器来响应这个标识。
1. 添加自定义功能按钮
首先，我们需要在单品页上添加一个与现有“加入购物车”按钮功能相似的新按钮。为了不直接修改模板文件，我们可以利用 WooCommerce 提供的动作钩子，例如 woocommerce_after_add_to_cart_button，在现有按钮下方插入新按钮。这个新按钮将包含一个独特的 CSS 类，以便后续通过 JavaScript 进行识别。
以下代码演示了如何为简单商品和可变商品添加一个名为“我的新文本”的按钮副本：
/**
* 在“加入购物车”按钮下方添加一个新按钮
*/
function custom_add_to_cart_duplicate_button() {
global $product;
// 定义按钮文本
$button_text = __( '我的新文本', 'woocommerce' );
// 确保当前是 WooCommerce 产品页
if ( is_a( $product, 'WC_Product' ) ) {
// 针对简单商品
if ( $product->is_type( 'simple' ) ) {
echo '';
// 针对可变商品
} elseif( $product->is_type( 'variable' ) ) {
// 可变商品不需要 value 属性，因为其 ID 会通过表单的其他字段传递
echo '';
}
}
}
add_action( 'woocommerce_after_add_to_cart_button', 'custom_add_to_cart_duplicate_button', 10 );代码说明：
- 我们使用了 woocommerce_after_add_to_cart_button 钩子，确保新按钮出现在标准“加入购物车”按钮之后。
- 新按钮的 type="submit" 和 name="add-to-cart" 属性使其能够触发与原始按钮相同的“加入购物车”逻辑。
- 关键在于 custom_redirect_button 这个 CSS 类。它将作为我们识别这个特定按钮的唯一标识，用于下一步的 JavaScript 处理。
2. 动态注入重定向标识
为了区分用户点击的是原始“加入购物车”按钮还是我们新添加的按钮，我们需要在用户点击新按钮时，向表单提交的数据中添加一个特殊的标识。这可以通过 JavaScript (jQuery) 实现，在按钮被点击时动态地插入一个隐藏的 input 字段。
以下代码展示了如何在页脚添加 jQuery 脚本，以监听 custom_redirect_button 的点击事件，并注入一个隐藏字段：
/**
* 通过 jQuery 在点击自定义按钮时注入隐藏字段
*/
function custom_add_to_cart_js_injector() {
// 仅在单品页加载此脚本
if ( is_product() ) {
?>
代码说明：
- wp_footer 钩子用于在页脚加载 JavaScript，确保 DOM 元素已完全加载。
- is_product() 函数确保脚本只在单品页上执行。
- 当 custom_redirect_button 被点击且未禁用时，一个名为 custom-redirect 且值为 my-value 的隐藏 input 字段会被添加到表单中。这个字段将随表单一起提交到服务器。
3. 实现条件式重定向逻辑
最后一步是利用 WooCommerce 的 woocommerce_add_to_cart_redirect 过滤器来检查提交的数据中是否存在我们注入的隐藏字段。如果存在且值匹配，我们就将重定向 URL 修改为我们自定义的目标页面。
/**
* 根据自定义标识修改“加入购物车”后的重定向 URL
*/
function custom_add_to_cart_conditional_redirect( $redirect_url, $product ) {
// 检查是否存在我们自定义的重定向标识
if ( isset( $_REQUEST['custom-redirect'] ) ) {
// 如果标识的值与我们设置的 'my-value' 匹配
if ( $_REQUEST['custom-redirect'] == 'my-value' ) {
// 设置自定义的重定向 URL
// get_permalink(1) 是一个示例，表示重定向到 ID 为 1 的页面
// 您可以替换为任何有效的 URL 或页面 ID
$redirect_url = get_permalink( 1 );
}
}
return $redirect_url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'custom_add_to_cart_conditional_redirect', 10, 2 );代码说明：
- woocommerce_add_to_cart_redirect 过滤器允许我们修改产品添加到购物车后的默认重定向 URL。它接收当前重定向 URL 和产品对象作为参数。
- 我们通过 $_REQUEST['custom-redirect'] 检查之前通过 JavaScript 注入的隐藏字段是否存在。
- 如果存在且其值是 my-value，则意味着用户点击的是我们的自定义按钮，此时我们将 $redirect_url 更新为 get_permalink(1)（请将 1 替换为您希望重定向到的页面 ID 或使用其他方法获取 URL）。
注意事项
- 保留核心功能： 这种方法的核心优势在于，新的按钮仍然触发了标准的 WooCommerce “加入购物车”流程。这意味着所有依赖于 woocommerce_add_to_cart 动作或其他相关钩子的自定义功能（例如添加购物车商品数据 woocommerce_add_cart_item_data）都将正常工作。
- 目标页面 ID： 在第三步中，get_permalink(1) 是一个示例。在实际应用中，您应该将其替换为您的自定义目标页面的实际 ID。您也可以通过页面标题、slug 或其他配置选项来动态获取页面 ID。
- 按钮样式： 新添加的按钮默认会继承 WooCommerce 的按钮样式。如果需要独特的视觉效果，可以通过 CSS 为 .custom_redirect_button 类添加自定义样式。
- 测试： 在生产环境中使用之前，务必在开发环境中进行全面测试，以确保所有功能按预期工作，特别是与现有自定义代码的兼容性。
- 可变商品： 对于可变商品，虽然新按钮也带有 single_add_to_cart_button 类，但其 value 属性通常由 WooCommerce 的 JavaScript 在选择变体后动态更新。本教程中的代码已考虑了这一点，对于可变商品，我们不为按钮直接设置 value 属性，而是依赖 WooCommerce 自身的机制来处理变体 ID。
总结
通过上述三步策略，我们成功地在 WooCommerce 单品页上复制了一个“加入购物车”按钮，并为其实现了自定义的重定向逻辑。这种方法不仅功能强大，而且具有良好的扩展性，因为它利用了 WooCommerce 自身的钩子和过滤器，最大限度地减少了对核心代码的侵入，并确保了现有自定义功能的兼容性。无论是用于“加入报价单”、“加入愿望清单”还是其他特殊功能，这种模式都能提供灵活且可靠的解决方案。
