WooCommerce调整插件标签与按钮的显示顺序求助

方法一：CSS Flex布局调整 #

如果之前的CSS尝试无效，大概率是选择器权重不足或未利用flex的order属性控制元素顺序。操作步骤如下：

1. 打开浏览器开发者工具（F12），定位以下元素的类名：

   • 立即购买按钮（或其容器）的class
   • Gratisfaction积分标签（或其容器）的class
   • 两者的共同父容器（通常是产品页的添加到购物车表单，class类似form.cart）

2. 在主题的自定义CSS（外观→自定义→额外CSS）中添加代码，替换为实际类名：

/* 将父容器设置为垂直flex布局 */
.woocommerce div.product form.cart {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 可选：调整元素间的间距 */
}

/* 让立即购买按钮排在加入购物车按钮之后 */
.quick-buy-actual-class { /* 替换为你的立即购买按钮/容器类名 */
  order: 1;
}

/* 让积分标签排在立即购买按钮之后 */
.gratisfaction-actual-class { /* 替换为你的积分标签/容器类名 */
  order: 2;
}

/* 加入购物车按钮默认排在最前（order默认值为0） */
.single_add_to_cart_button {
  order: 0;
}

如果flex布局不生效，可临时添加!important测试（优先调整选择器权重，不推荐长期使用）：

.woocommerce div.product form.cart {
  display: flex !important;
  flex-direction: column !important;
}

方法二：PHP钩子优先级调整（更可靠） #

若CSS无法解决（比如元素动态加载或插件强制修改布局），可通过调整WooCommerce钩子的执行优先级改变输出顺序：

1. 查找插件钩子细节：

   • 打开Quick Buy插件主文件（如quick-buy-now-button-for-woocommerce.php），搜索add_action('woocommerce_after_add_to_cart_button'，找到回调函数名和默认优先级（示例：add_action('woocommerce_after_add_to_cart_button', 'qbnfw_quick_buy_button', 20);）
   • 查看Gratisfaction插件代码，确认其输出积分标签的钩子（通常也是woocommerce_after_add_to_cart_button），优先级一般更低（如10）

2. 在子主题的functions.php中添加代码（或使用Code Snippets插件）：

// 移除Quick Buy插件的默认钩子（替换为实际函数名和优先级）
remove_action('woocommerce_after_add_to_cart_button', 'qbnfw_quick_buy_button', 20);

// 重新添加钩子，设置比Gratisfaction更低的优先级（数值越小越先执行）
add_action('woocommerce_after_add_to_cart_button', 'qbnfw_quick_buy_button', 5);

调整后，Quick Buy按钮会在积分标签之前输出，自然排在上方。

注意：修改主题文件前建议备份，优先使用子主题避免更新丢失代码；若不确定回调函数名，可通过print_r( $GLOBALS['wp_filter']['woocommerce_after_add_to_cart_button'] );输出钩子列表查看。

内容的提问来源于stack exchange，提问作者María Andrea Molina Miranda