WordPress：如何将“选择选项”/“加入购物车”按钮移至产品标题下方

• 先用浏览器开发者工具（按F12或右键页面选「检查」），定位产品标题和「选择选项/加入购物车」按钮的HTML元素，记下它们的类名（比如标题可能是.product-title，按钮容器可能是.product-form）。
• 根据布局类型选择对应的CSS代码，替换成你实际的类名后添加到网站的自定义CSS中：

情况1：flex布局导致顺序错乱 #

如果产品区域用了flex布局，通过order属性调整顺序：

/* 让标题排在前面，按钮紧随其后 */
.product-title {
  order: 1;
}
.product-form {
  order: 2;
  width: 100%; /* 可选，确保按钮容器占满宽度 */
}

情况2：浮动/块级布局错位 #

若按钮被浮动或默认排版打乱，重置布局并调整间距：

.product-form {
  float: none; /* 取消可能的浮动 */
  clear: both; /* 清除浮动影响 */
  margin-top: 15px; /* 调整和标题的间距，按需修改数值 */
}

情况3：强制修正位置（兜底方案） #

如果上面的方法无效，用相对定位微调：

.product-form {
  position: relative;
  top: auto;
  left: auto;
  margin-top: 20px; /* 按需调整间距 */
}

• 添加CSS的路径：进入网站后台，找到「外观」->「自定义」->「额外CSS」，粘贴代码后保存即可。

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