如何在WooCommerce单品页复制加购按钮并实现自定义重定向

在构建复杂的woocommerce电商平台时，我们经常会遇到需要为产品页面添加额外功能按钮的需求。例如，除了标准的“加入购物车”按钮，可能还需要一个“加入报价”或“立即购买”按钮，其核心功能与“加入购物车”一致（例如，将产品添加到购物车，并触发所有相关的购物车商品数据处理钩子），但点击后需要重定向到特定的自定义页面，而非默认的购物车页面。直接修改woocommerce核心文件并非最佳实践，而简单地改变全局的“加入购物车”重定向逻辑也无法满足差异化需求。本文将提供一个优雅的解决方案，通过三个核心步骤实现这一功能。

1. 添加自定义功能按钮

首先，我们需要在单品页面上添加一个与现有“加入购物车”按钮功能相似的新按钮。为了不直接修改模板文件，我们可以利用WooCommerce提供的动作钩子woocommerce_after_add_to_cart_button，在现有加购按钮之后插入我们的新按钮。这个新按钮将包含一个独特的CSS类，以便后续通过JavaScript进行识别。

/**
 * 在WooCommerce单品页的“加入购物车”按钮后添加一个自定义按钮。
 *
 * 该按钮将复制现有加购按钮的功能，但包含一个独特的CSS类，
 * 用于后续JavaScript识别并实现自定义重定向。
 */
function custom_add_to_quote_button() {
    global $product;

    // 定义按钮文本
    $button_text = __( '加入报价', 'your-text-domain' ); // 建议使用文本域进行国际化

    // 确保当前是有效的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通过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', 'custom_add_to_quote_button', 10 );

代码说明：

稿定在线PS

PS软件网页版

99

查看详情

• global $product;：获取当前产品对象。
• $button_text：定义按钮上显示的文本。
• is_a( $product, 'WC_Product' )：检查当前页面是否加载了有效的WooCommerce产品。
• $product-youjiankuohaophpcnis_type( 'simple' ) 和 $product->is_type( 'variable' )：根据产品类型生成不同的按钮HTML。对于简单产品，name="add-to-cart"和value属性是必需的。对于可变产品，这些属性通常由WooCommerce的JavaScript处理。
• custom_redirect_button：这是一个关键的CSS类，用于在下一步中通过JavaScript识别此按钮。
• add_action( 'woocommerce_after_add_to_cart_button', 'custom_add_to_quote_button', 10 );：将我们的函数挂载到指定钩子，10是优先级。

2. 通过JavaScript注入识别信号

当用户点击我们自定义的按钮时，我们需要一种方式来告知服务器，这次的“加入购物车”操作应该触发自定义重定向，而不是默认重定向。我们通过JavaScript在按钮点击时动态添加一个隐藏的输入字段到表单中，作为服务器端的识别信号。

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

代码说明：

• is_product()：确保此脚本仅在WooCommerce产品单页加载，优化性能。
• jQuery( function($) { ... });：使用jQuery的DOM ready事件，确保页面加载完成后执行。
• $( document ).on( 'click', '.custom_redirect_button', function () { ... });：监听带有custom_redirect_button类的元素点击事件。使用事件委托 ($( document ).on(...)) 可以确保即使按钮是动态加载的也能捕获事件。
• $( this ).after( '<input type="hidden" name="custom-redirect" value="my-custom-redirect-flag" />' );：在被点击的按钮后插入一个隐藏的input字段。name="custom-redirect"和value="my-custom-redirect-flag"是服务器端用于识别的关键信息。

3. 实现条件重定向逻辑

最后一步是修改WooCommerce的重定向行为。WooCommerce提供了一个过滤器woocommerce_add_to_cart_redirect，允许我们修改产品添加到购物车后的重定向URL。我们将在这个过滤器中检查上一步通过JavaScript添加的隐藏输入字段，如果存在且值匹配，则执行自定义重定向。

/**
 * 根据是否存在自定义重定向标志，修改WooCommerce的加购重定向URL。
 *
 * 如果请求中包含特定的自定义重定向标志，则将重定向URL更改为预设的自定义页面。
 */
function custom_add_to_cart_redirect_url( $redirect_url, $product ) {
    // 检查请求中是否存在我们自定义的重定向标志
    if ( isset( $_REQUEST['custom-redirect'] ) ) {
        // 检查标志的值是否与我们预设的值匹配
        if ( $_REQUEST['custom-redirect'] == 'my-custom-redirect-flag' ) {
            // 设置自定义重定向URL
            // 请将 `123` 替换为您希望重定向到的页面的实际ID
            $redirect_url = get_permalink( 123 );
        }
    }

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

代码说明：

• add_filter( 'woocommerce_add_to_cart_redirect', 'custom_add_to_cart_redirect_url', 10, 2 );：挂载我们的函数到woocommerce_add_to_cart_redirect过滤器，10是优先级，2表示函数接受两个参数（$redirect_url和$product）。
• isset( $_REQUEST['custom-redirect'] )：检查POST或GET请求中是否存在名为custom-redirect的参数。
• $_REQUEST['custom-redirect'] == 'my-custom-redirect-flag'：验证参数的值是否与我们JavaScript中设置的值一致。
• $redirect_url = get_permalink( 123 );：如果条件满足，将重定向URL设置为指定页面的永久链接。请务必将123替换为您实际的目标页面ID。

注意事项

• 页面ID替换： 在第三步的代码中，get_permalink( 123 )中的123是一个占位符，您需要将其替换为您希望用户重定向到的实际WordPress页面的ID。您可以在WordPress后台编辑页面时，从浏览器地址栏中找到页面的ID（通常是post=ID）。
• 文本域： 在第一步的按钮文本中，使用了'your-text-domain'作为文本域。在实际项目中，请将其替换为您主题或插件的实际文本域，以便进行国际化。
• CSS类和值： custom_redirect_button类和my-custom-redirect-flag值是自定义的，您可以根据需要更改它们，但请确保在PHP和JavaScript代码中保持一致。
• 钩子优先级： add_action和add_filter函数的第三个参数是优先级。如果与其他插件或主题的代码发生冲突，您可以尝试调整这些优先级值。
• 保持原有功能： 这种方法的核心优势在于，新的按钮仍然通过WooCommerce的add-to-cart机制工作。这意味着所有绑定到woocommerce_add_cart_item_data等钩子的自定义购物车商品数据处理逻辑都会被完整保留并执行，确保了功能的一致性。
• 代码位置： 建议将这些代码片段添加到您主题的functions.php文件，或者创建一个自定义插件来管理这些功能，以确保在主题更新时代码不会丢失。

总结

通过上述三个模块化的步骤，我们成功地在WooCommerce单品页面实现了一个具有自定义重定向功能的“加入报价”按钮。这个解决方案不仅功能强大，而且遵循了WordPress和WooCommerce的最佳实践，通过钩子和过滤器扩展功能，避免了直接修改核心文件，从而确保了代码的可维护性和兼容性。这种方法允许开发者在保持WooCommerce核心功能完整性的同时，灵活地为用户提供多样化的交互体验。

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