WooCommerce 单品页复制购物车按钮并实现自定义重定向

在许多定制化的 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 '<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', '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 的点击事件，并注入一个隐藏字段：

稿定AI

拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能

25

查看详情

/**
 * 通过 jQuery 在点击自定义按钮时注入隐藏字段
 */
function custom_add_to_cart_js_injector() {
    // 仅在单品页加载此脚本
    if ( is_product() ) {
        ?>
        <script type="text/javascript">
        jQuery( function($) {
            // 监听带有 'custom_redirect_button' 类的按钮点击事件
            $( document ).on( 'click', '.custom_redirect_button', function () {
                // 确保按钮未被禁用
                if ( ! $( this ).hasClass( 'disabled' ) ) {
                    // 在按钮后添加一个隐藏的 input 字段
                    // 这个字段的 name 和 value 将在后端用于识别重定向类型
                    $( this ).after( '<input type="hidden" name="custom-redirect" value="my-value" />' );
                }
            });
        });
        </script>
        <?php
    }
}
add_action( 'wp_footer', 'custom_add_to_cart_js_injector', 10 );

代码说明：

• 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 自身的钩子和过滤器，最大限度地减少了对核心代码的侵入，并确保了现有自定义功能的兼容性。无论是用于“加入报价单”、“加入愿望清单”还是其他特殊功能，这种模式都能提供灵活且可靠的解决方案。

以上就是WooCommerce 单品页复制购物车按钮并实现自定义重定向的详细内容，更多请关注php中文网其它相关文章！