如何为WooCommerce自动生成的购物页产品永久添加自定义CSS

你在浏览器开发者工具中调试的CSS属于临时本地修改，刷新页面后就会被重置，要永久生效可以选择以下三种方案，按推荐优先级排序：

• 方案1：WordPress内置自定义器添加（最推荐，无代码基础也能操作，不会随主题更新丢失）
  操作路径：登录WordPress管理后台，依次进入「外观」-「自定义」页面，在侧边栏找到「额外CSS」选项，把你调试好的产品区块居中CSS代码粘贴到输入框中，点击页面顶部的「发布」按钮即可永久生效。
  你可以直接粘贴你在开发者工具里验证有效的代码，参考结构如下：

  /* 产品区块居中样式 */
  .your-product-container-class {
      margin: 0 auto;
      /* 你调试好的其他居中相关属性，比如宽度、flex布局居中属性等 */
  }
  

• 方案2：子主题样式文件添加
  如果你习惯修改代码文件，请一定使用子主题操作，不要直接修改当前启用的父主题文件，否则主题更新时你的自定义修改会被全部覆盖。安装并启用对应主题的子主题后，将CSS代码粘贴到子主题目录下的style.css文件末尾，保存文件即可生效。
• 方案3：代码片段插件添加
  如果你不想修改主题文件，可以安装代码管理类插件，新建前端加载的CSS片段，将你写好的居中代码粘贴进去，启用片段即可，后续不管换主题还是更新主题，只要插件保留，样式就不会丢失。

注意：不要直接把自定义CSS写入父主题的核心样式文件、WooCommerce插件核心文件，这类文件在版本更新时会被直接覆盖，你的修改会完全丢失。

内容的提问来源于stack exchange，提问作者MD. NOBIR HASAN