WooCommerce购物车页：更新购物车按钮旁添加自定义代码的对应钩子

你需要的目标钩子为 woocommerce_cart_actions

钩子位置匹配说明 #

这个钩子的源码挂载点刚好紧邻「更新购物车」按钮的后方，完全落在右侧布局区域内，不会插入到左侧优惠券的专属div容器中，和你要求的位置完全匹配：

• 购物车操作行的DOM结构本身就是为左右布局设计的：
  • 最外层容器为woocommerce-cart-form__actions，主题默认通过Flex弹性布局实现左右两端对齐
  • 左侧区块为优惠券专属div，woocommerce_cart_coupon钩子就挂载在这个div内部，因此挂在这里的内容会始终出现在左侧优惠券区域
  • 右侧区块包含「更新购物车」按钮，woocommerce_cart_actions钩子就挂载在这个按钮的后方，因此挂在这里的内容会自动和更新按钮保持同一行的右侧对齐效果

正确使用代码示例 #

add_action( 'woocommerce_cart_actions', 'addcode' );
function addcode() {
    // 在这里写需要挂载在右侧的自定义内容，支持任意HTML结构
    echo 'hello';
}

之前测试钩子的位置偏差原因对照 #

• woocommerce_cart_contents：挂载在购物车产品列表的单产品行循环内部，属于产品列表的前置位置，整体过靠上
• woocommerce_after_cart_contents：挂载在所有产品行循环结束的节点，位置早于优惠券输入行所在的操作区块，整体过靠上
• woocommerce_after_cart_table：挂载在整个购物车表单的闭合标签之后，位置晚于优惠券、更新按钮的操作行，直接邻近购物车金额汇总区块，整体过靠下

可选样式适配 #

如果使用的主题没有内置上述Flex布局，需要自定义样式实现左右对齐效果，可补充以下CSS：

.woocommerce-cart-form__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

提示：Storefront这类标准WooCommerce主题已经内置了上述对齐样式，无需额外添加。

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