WooCommerce 单产品页复制“加入购物车”按钮并实现自定义重定向

在构建复杂的电子商务网站时，我们可能需要在 woocommerce 单产品页面提供多种“加入购物车”功能，例如一个标准的“加入购物车”按钮和一个用于“加入报价清单”的按钮。后者的核心需求是复制标准“加入购物车”按钮的所有功能（包括任何自定义的购物车商品数据处理），但点击后应重定向到特定的自定义页面，而不是默认的购物车页面。本文将详细介绍如何通过三个关键步骤实现这一功能。

步骤一：添加自定义“加入购物车”按钮

首先，我们需要在现有“加入购物车”按钮的下方添加一个新的按钮。为了不直接修改 WooCommerce 模板文件，我们利用 WooCommerce 提供的动作钩子 (woocommerce_after_add_to_cart_button) 来插入我们的自定义按钮。这个新按钮将与原按钮具有相同的 name 和 value 属性（对于简单产品），以确保触发标准的加入购物车流程。关键在于为其添加一个独特的 CSS 类（例如 custom_redirect_button），以便后续通过 JavaScript 进行区分。

以下是添加新按钮的代码示例：

// 添加新的/额外的按钮
function action_woocommerce_after_add_to_cart_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属性，因为其值由JS动态传递
            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', 10 );

这段代码会在原“加入购物车”按钮之后插入一个新的提交按钮。对于简单产品，它会包含 name="add-to-cart" 和 value (产品ID)，确保触发正常的加入购物车逻辑。对于可变产品，它仅复制按钮结构，value 会在表单提交时由 JavaScript 动态处理。最重要的是，我们为这个新按钮添加了 custom_redirect_button 类，这是我们后续识别它的关键。

步骤二：区分按钮点击事件

由于两个按钮都触发相同的加入购物车机制，我们需要一种方式来区分是哪个按钮被点击了，以便应用不同的重定向逻辑。这可以通过 JavaScript (jQuery) 实现。当带有 custom_redirect_button 类的按钮被点击时，我们动态地向表单中添加一个隐藏的输入字段。

以下是添加 JavaScript 代码的示例：

// 将 jQuery 添加到页脚
function action_wp_footer() {
    // 仅在单产品页面加载
    if ( is_product() ) {
        ?>
        <script type="text/javascript">
        jQuery( function($) {           
            // 当自定义重定向按钮被点击时
            $( document ).on( 'click', '.custom_redirect_button', function () {
                // 确保按钮未被禁用
                if ( ! $( this ).hasClass( 'disabled' ) ) { 
                    // 在按钮后添加一个隐藏的输入字段
                    $( this ).after( '<input type="hidden" name="custom-redirect" value="my-value" />' );
                }
            });
        });
        </script>
        <?php
    }
}
add_action( 'wp_footer', 'action_wp_footer', 10 );

这段 JavaScript 代码会在页面加载完成后执行。它监听所有带有 custom_redirect_button 类的按钮的点击事件。当这些按钮被点击且未被禁用时，它会在当前按钮之后插入一个隐藏的 zuojiankuohaophpcninput type="hidden" name="custom-redirect" value="my-value" /> 字段。这个字段的值 (my-value) 将在表单提交时随数据一起发送到服务器，作为我们区分按钮的标识符。

稿定AI

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

25

查看详情

步骤三：实现自定义重定向逻辑

最后一步是利用 WooCommerce 的 woocommerce_add_to_cart_redirect 过滤器来根据我们添加的隐藏字段的值，条件性地修改重定向 URL。这个过滤器在产品成功加入购物车后触发，允许我们自定义用户将被重定向到的页面。

以下是实现自定义重定向逻辑的代码示例：

// 重定向
function filter_woocommerce_add_to_cart_redirect( $redirect_url, $product ) {   
    // 检查是否存在自定义重定向标识符
    if ( isset( $_REQUEST['custom-redirect'] ) ) {      
        // 如果标识符的值与我们设定的值匹配
        if ( $_REQUEST['custom-redirect'] == 'my-value' ) { 
            // 设置要重定向到的自定义 URL（例如，页面 ID 为 1 的页面）
            // 请将 1 替换为您的目标页面 ID
            $redirect_url = get_permalink( 1 ); 
        }
    }

    return $redirect_url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'filter_woocommerce_add_to_cart_redirect', 10, 2 );

这段 PHP 代码挂钩到 woocommerce_add_to_cart_redirect 过滤器。它首先检查 $_REQUEST 超全局变量中是否存在 custom-redirect 字段。如果存在且其值等于我们预设的 my-value，那么就意味着是我们的自定义按钮被点击了。此时，我们将 $redirect_url 修改为目标自定义页面的 URL（例如，通过 get_permalink(1) 获取 ID 为 1 的页面的永久链接）。

注意事项

• 页面 ID 替换： 在步骤三的代码中，get_permalink(1) 中的 1 是一个示例页面 ID。您需要将其替换为您希望重定向到的实际页面的 ID。您可以在 WordPress 后台编辑页面时，在浏览器地址栏中找到页面的 post= 参数来获取其 ID。
• 代码位置： 所有的 PHP 代码都应该放置在您的主题的 functions.php 文件中，或者最好是放置在一个自定义插件中，以确保在主题更新时代码不会丢失。JavaScript 代码可以通过 wp_footer 钩子直接输出，或者更推荐的方式是将其放入一个外部 .js 文件中，并通过 wp_enqueue_script 函数正确地引入。
• CSS 样式： 新添加的按钮默认会继承 WooCommerce 的按钮样式。如果需要，您可以为 custom_redirect_button 类添加自定义 CSS 样式，使其在视觉上与原始按钮有所区别。
• 兼容性： 这种方法通过模拟原始“加入购物车”的表单提交行为，并仅在重定向环节进行干预，因此它能够很好地兼容 WooCommerce 的核心功能以及大多数依赖于标准加入购物车流程的自定义钩子（例如，添加购物车商品数据的钩子）。
• 安全性： 在处理用户输入和重定向 URL时，始终确保使用 WordPress 提供的安全函数（如 esc_attr()）进行数据清理和验证。

总结

通过上述三个步骤，我们成功地在 WooCommerce 单产品页面上复制了一个“加入购物车”按钮，并为其赋予了自定义的重定向行为，同时完整保留了原始按钮的购物车处理逻辑。这种方法灵活且易于维护，是实现复杂电子商务功能的一个有效途径。

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