WooCommerce 单产品页复制加购按钮并实现自定义重定向教程

在构建复杂的 WooCommerce 网店时，有时我们需要在单产品页面提供额外的购买或询价选项，例如一个“添加到报价”按钮，它应具备与“添加到购物车”按钮类似的功能，但在点击后重定向到不同的页面。本教程将指导您如何实现这一需求，确保所有自定义购物车项数据等相关钩子依然正常工作。

1. 添加自定义加购按钮

首先，我们需要在现有“添加到购物车”按钮下方添加一个新的按钮。这可以通过 WooCommerce 提供的动作钩子 woocommerce_after_add_to_cart_button 来实现，避免直接修改模板文件。新按钮将与原始按钮共享大部分功能，但会额外添加一个用于后续识别的 CSS 类。

// 在添加到购物车按钮后添加新的自定义按钮
function custom_add_to_quote_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' ) ) {
            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_quote_button', 10 );

代码说明：

• 我们使用 woocommerce_after_add_to_cart_button 钩子，它会在原始加购按钮渲染后执行。
• 新按钮的 name 属性仍为 add-to-cart，value 为产品 ID（简单产品），这确保了 WooCommerce 能够识别并处理其为加购操作，从而触发所有相关的购物车钩子（如 woocommerce_add_to_cart_item_data）。
• 关键在于我们为新按钮添加了一个独特的类 custom_redirect_button，这将用于在前端通过 JavaScript 识别它。

2. 通过 JavaScript 识别自定义按钮点击

为了区分原始加购按钮和我们新添加的自定义按钮，我们需要在自定义按钮被点击时，通过 JavaScript 动态地向表单中添加一个隐藏字段。这个隐藏字段将作为后端重定向逻辑的判断依据。

将以下 jQuery 代码添加到您的主题的 functions.php 文件中，或者通过外部 JS 文件引入（推荐）。

稿定AI绘图

稿定推出的AI绘画工具

36

查看详情

// 在页面底部添加 jQuery 脚本
function custom_redirect_script_to_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-quote-value" />' );
                }
            });
        });
        </script>
        <?php
    }
}
add_action( 'wp_footer', 'custom_redirect_script_to_footer', 10 );

代码说明：

• wp_footer 钩子确保 JavaScript 代码在页面底部加载，避免阻塞页面渲染。
• is_product() 条件确保脚本只在单产品页面执行，优化性能。
• 当带有 custom_redirect_button 类的按钮被点击时，一段 <input type="hidden" name="custom-redirect" value="my-quote-value" /> 会被添加到表单中。这个 name 和 value 将是我们后端判断的关键。您可以将 my-quote-value 替换为任何您希望的值。

3. 实现条件性重定向逻辑

最后一步是利用 WooCommerce 的 woocommerce_add_to_cart_redirect 过滤器来拦截默认的重定向行为，并根据我们添加的隐藏字段来决定是重定向到购物车页面还是自定义页面。

// 过滤添加到购物车后的重定向 URL
function custom_add_to_cart_redirect_logic( $redirect_url, $product ) {   
    // 检查是否存在自定义重定向标记
    if ( isset( $_REQUEST['custom-redirect'] ) ) {      
        // 如果标记的值与我们预设的值匹配
        if ( $_REQUEST['custom-redirect'] == 'my-quote-value' ) { 
            // 设置自定义重定向 URL (例如：页面ID为1的页面)
            $redirect_url = get_permalink( 1 ); // 请将 '1' 替换为您希望重定向到的页面ID或直接提供URL
        }
    }

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

代码说明：

• woocommerce_add_to_cart_redirect 过滤器允许我们修改添加到购物车操作完成后的重定向 URL。
• 我们检查 $_REQUEST['custom-redirect'] 是否存在，并且其值是否与我们在 JavaScript 中设置的 my-quote-value 匹配。
• 如果匹配，则将 $redirect_url 更新为我们自定义的页面链接。get_permalink( 1 ) 是一个示例，其中 1 是您目标页面的 ID。您可以将其替换为任何有效的页面 ID 或直接硬编码一个 URL，例如 'https://yourwebsite.com/your-custom-page/'。
• 如果 custom-redirect 字段不存在或值不匹配，函数将返回原始的 $redirect_url，这意味着默认的重定向行为（通常是购物车页面）将保持不变。

注意事项与总结

• 代码放置位置： 所有的 PHP 代码都应该放置在您的子主题的 functions.php 文件中，或者通过一个自定义插件来管理。直接修改父主题文件会导致更新时代码丢失。
• 页面 ID： 在 get_permalink( 1 ) 中，请务必将 1 替换为您实际希望重定向到的目标页面的 ID。您可以在 WordPress 后台编辑页面时，从浏览器地址栏中获取页面 ID。
• CSS 样式： 新添加的按钮默认会继承 WooCommerce 的按钮样式。您可能需要为 custom_redirect_button 类添加额外的 CSS 样式，使其在视觉上与原始加购按钮有所区分，例如：

  .single_product .custom_redirect_button {
      background-color: #0073aa; /* 示例颜色 */
      color: #fff;
      /* 其他样式调整 */
  }

  登录后复制
• 兼容性： 本方案利用了 WooCommerce 的核心功能和钩子，通常具有良好的兼容性。然而，如果您的网站使用了大量自定义代码或第三方插件，请务必在开发或测试环境中进行充分测试。
• 功能复制： 这种方法的核心在于新按钮依然触发了标准的 WooCommerce “添加到购物车”操作。这意味着所有依赖于此操作的钩子（如 woocommerce_add_to_cart_item_data）都会正常执行，确保了购物车项数据的完整性。

通过以上步骤，您已经成功在 WooCommerce 单产品页面复制了一个“添加到购物车”按钮，并为其配置了独立的自定义重定向功能，同时保持了原始加购按钮的默认行为。

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