WooCommerce 页面 css 文件

Posted 2023-03-06

【中文标题】WooCommerce 页面 css 文件

【英文标题】：WooCommerce page css file

【发布时间】：2016-09-27 10:36:39

【问题描述】：

我正在尝试重新排列我的 WooCommerce 页面的布局，特别是单个产品页面。但我找不到 CSS 代码在哪里。我正在寻找：

class="woocommerce-tabs wc-tabs-wrapper"

woocommerce-tabs wc-tabs-wrapper 的 css 文件。

【问题讨论】：

能否提供您网站的链接？编辑你的问题……

我在本地做，但 wordpress\wp-content\plugins\woocommerce\templates\single-product\tabs 类在 tabs.php 中，我只想更改它的 css 文件跨度>

永远不要覆盖位于插件文件夹中的 woocommerce 文件！！！ （见我的回答）。

【参考方案1】：

woocommerce CSS 文件位于 woocommerce 插件文件夹中：

woocommerce > 资产 > css > woocommerce.css woocommerce > 资产 > css > woocommerce-layout.css

覆盖 WooCommerce CSS 规则： 但是，如果您想覆盖此规则，最好将您要更改的规则复制到位于活动子主题或主题内的 style.css 文件中，如果需要，将 !important 属性添加到这些覆盖规则中。 同样在某些主题中，他们自定义了此规则。因此，在这种情况下，您需要在父活动主题的 css 文件中找到该规则……

编辑 woocommerce 模板文件：您需要将位于 woocommerce 插件内的 templates 文件夹复制到您的活动子主题或主题文件夹，然后重命名为 woocommerce：

Overriding Templates via a Theme

注意：在某些高级主题中，这个woocommerce 文件夹已经存在，因为他们已经自定义了这个模板……

【讨论】：

作为在任何地方添加 !important 的替代方法，您可以将具有更高/更晚优先级的样式表排入队列，以便它在 woocommerce 样式表之后 出现。

@helgatheviking 是的，我完全同意。但这对于初学者来说只是一个更复杂的事情。谢谢:)