WooCommerce单品页面修改需求：增加尺寸选择与数量框垂直间距

Hey Rick，这事儿很简单，不用折腾复杂的代码，给你几个安全易维护的方案：

• 方法一：添加自定义CSS（最推荐）
  WooCommerce的单品页面元素都有标准的CSS类，你只需要给对应的元素加间距就行。打开WordPress后台，进入「外观」→「自定义」→「额外CSS」，粘贴下面的代码：

  /* 在尺寸选择组件下方添加垂直间距 */
  .single-product .variations {
      margin-bottom: 1.5rem; /* 数值可以按需调整，1rem大概是16px */
  }
  
  /* 或者给数量输入框上方加间距，选一个就行 */
  .single-product .quantity {
      margin-top: 1.5rem;
  }
  

  保存后刷新页面就能看到效果了。如果类名不对（比如主题自定义了样式），可以用浏览器的开发者工具（按F12）右键点击尺寸选择器，选择「检查」，找到它的正确CSS类，替换上面的.variations就行。

• 方法二：用子主题的style.css
  如果你习惯用子主题，直接把上面的CSS代码粘贴到子主题的style.css文件末尾就行，这样主题更新不会丢失修改。

• 方法三：用插件添加CSS
  如果你不想碰代码，可以装个类似「Simple Custom CSS」的插件，在插件的设置里粘贴上面的CSS代码即可。

这些方法都是非侵入式的，不会修改WooCommerce或主题的核心文件，非常安全。

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