Bricks 让 WooCommerce 数量输入框与加入购物车按钮并排

问题现象

WooCommerce 单产品页的购买区默认布局是：数量输入框（Quantity）在上、加入购物车按钮（Add to Cart）在下，纵向堆叠。这在按钮文案较长（比如“加入购物车”四个字）或容器较窄时问题不大，但在桌面端产品信息栏里会显得很占高度，很多电商站希望两者水平并排——左边数量框，右边按钮，紧凑一行。

用 Bricks 的 WooCommerce 元素搭单产品模板时，这个购买区实际输出的是 WooCommerce 标准表单结构：

<form class="cart">
  <div class="quantity">…输入框…</div>
  <button type="submit">加入购物车</button>
</form>

所以不需要改模板、不需要钩子，纯 CSS 就能搞定。

解决代码

在 Bricks → 自定义代码（或子主题 style.css）中加入：

form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
}

.single-product .summary form.cart .quantity+button {
	margin-top: 0;
}

保存后刷新产品页，数量框和按钮就并排显示了。

原理说明

两段 CSS 各司其职：

• form.cart：把购买表单变成 Flex 容器，flex-wrap: wrap 保证窄屏（移动端）放不下时自动折行，不会挤爆布局；align-items: center 让数量框和按钮垂直居中对齐；gap: 1em 控制两者间距。
• .single-product .summary form.cart .quantity+button：WooCommerce 主题样式默认会给按钮加 margin-top 撑开纵向距离，这里用相邻兄弟选择器 + 精确命中数量框后面的按钮，把 margin-top 归零，避免并排时按钮被往下顶。

注意选择器里的 .single-product .summary 前缀是 WooCommerce 默认单产品页结构，如果你用 Bricks 模板重做了布局，结构可能不同——这时把选择器放宽成 form.cart .quantity+button 即可。

小结

这是一个典型的“样式层解决布局问题”的案例：Flex 是并排布局的首选方案，flex-wrap 顺手解决了响应式。全程不动 PHP、不动模板，纯 CSS 三五行，性价比极高。

同样的思路可以扩展到更多购买区定制：比如把“库存状态 + 数量 + 按钮”排成一行、给按钮加图标等，都是在 form.cart 这个容器上做文章。