如何在WooCommerce商品页将加入购物车按钮和变体选择器移至短描述上方

嘿，这个需求挺常见的，我给你分享个稳妥的实现方式——利用WooCommerce的钩子系统来调整元素位置，这种方法不用直接修改主题模板，能避免后续主题更新导致代码丢失的问题。

核心思路 #

WooCommerce商品页面的核心内容是通过woocommerce_single_product_summary这个钩子挂载的，默认的元素优先级顺序大概是：

• 商品标题（优先级5）
• 商品评分（优先级10）
• 商品价格（优先级15）
• 商品短描述（优先级20）
• Add To Cart按钮/Variation Selector（优先级30）

我们要做的就是先把Add To Cart相关元素从原来的位置移除，再把它挂载到价格和短描述之间。

具体实现代码 #

把下面的代码添加到你的子主题functions.php文件里（一定要用子主题，别直接改父主题！）：

// 移除默认位置的Add To Cart按钮及Variation选择器
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

// 将Add To Cart按钮及Variation选择器添加到价格与短描述之间
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 18 );

代码解释 #

• remove_action：移除原来挂载在woocommerce_single_product_summary钩子上的woocommerce_template_single_add_to_cart函数（这个函数同时包含了简单商品的Add To Cart按钮和可变商品的Variation Selector），最后的30是默认的优先级，必须和原钩子的优先级一致才能移除成功。
• add_action：把同一个函数重新挂载到同一个钩子上，但把优先级设为18——这个数值介于价格的15和短描述的20之间，这样元素就会显示在价格下方、短描述上方。

测试验证 #

保存代码后，刷新你的商品页面：

• 简单商品：Add To Cart按钮会出现在价格和短描述之间
• 可变商品：Variation Selector（属性选择下拉框）和Add To Cart按钮都会一起移动到目标位置

如果你的主题对商品页面结构做了自定义修改，可能需要调整优先级数值，或者检查主题是否重载了相关模板，但绝大多数情况下上面的代码都能生效。

内容的提问来源于stack exchange，提问作者Ged