本文旨在提供一个在 WooCommerce 单品页复制“加入购物车”按钮并将其重定向至自定义页面的教程。通过在现有按钮下方添加一个功能相同的副本，并结合 JavaScript 动态注入标识和 PHP 过滤器，我们能够根据用户点击的按钮类型，在产品添加到购物车后将其引导至不同的目标页面，同时确保所有核心购物车功能（如自定义购物车商品数据）得以保留。
在许多定制化的 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 的点击事件，并注入一个隐藏字段：
Poixe AI
统一的 LLM API 服务平台，访问各种免费大模型
75 查看详情 
/** * 通过 jQuery 在点击自定义按钮时注入隐藏字段 */function custom_add_to_cart_js_injector() { // 仅在单品页加载此脚本 if ( is_product() ) { ?> jQuery( function($) { // 监听带有 'custom_redirect_button' 类的按钮点击事件 $( document ).on( 'click', '.custom_redirect_button', function () { // 确保按钮未被禁用 if ( ! $( this ).hasClass( 'disabled' ) ) { // 在按钮后添加一个隐藏的 input 字段 // 这个字段的 name 和 value 将在后端用于识别重定向类型 $( this ).after( '' ); } }); }); <?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中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/729330.html
微信扫一扫 
支付宝扫一扫 
