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 即可。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

小结

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

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

常见误区

并排布局注意两点：一是别只给按钮加 flex，要给包裹它们的 form.cart 容器加，否则数量框和按钮还是各自的块级流；二是用 flex-wrap 兜底响应式——窄屏放不下时自动换行，不会挤变形。纯 CSS 三五行搞定，不动 PHP、不动模板，性价比极高。同样的思路能扩展到「库存状态 + 数量 + 按钮」排成一行、给按钮加图标等购买区定制，都是在 form.cart 这个容器上做文章。

常见问题（FAQ）

Q：为什么加了 flex 还是上下排？ A：要给包裹数量框和按钮的 form.cart 容器加 flex，不是只给按钮加。

Q：窄屏挤变形怎么办？ A：加 flex-wrap，放不下时自动换行，不会挤压变形。

Q：需要改 PHP 或模板吗？ A：不需要，这是纯 CSS 解决布局问题，三五行搞定。

Q：还能定制更多购买区吗？ A：能，库存+数量+按钮排一行、按钮加图标等都在 form.cart 容器上调整。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程