这次，小编来说说，“关于自定义WooCommerce的CSS样式的两种方法”。如果WooCommerce主题的价格不能隐藏的话，小编用的是把主题文件夹里的css文件夹里的style.css文件打开修改代码，然后把里面的文字代码color改成白色#FFFFF的颜色，在白底下价格和价格符号就变成透明了哦，相当于隐藏了独立站的商品价格和商品价格符号。内页要删除价格2个字的话可以寻找price开头的文件删除或者删除里面的price代码即可。如果直接改CSS不成功的话，再使用下面的方法二，加入相关代码，然后CSS修改应该就会成功了。
WooCommerce 内置了负责显示商品和购物流程的所有 CSS 样式，这样能确保在安装了WooCommerce，并进行了基本配置之后，就可以得到一个样式不错的商店。这很方便，然而大多数情况下，我们不会使用 WooCommerce 提供的基本样式，我们需要对 WooCommerce 的样式进行一些定制，让 WooCommerce 商店的外观和我们的主题更匹配。有两种方法可以对 WooCommerce 的样式进行定制。
WooCommerce 默认的样式文件
在WooCommerce 插件的 assets/css/ 文件夹中, 我们可以找到WooCommerce 默认的样式文件，分别是 woocommerce.scss 和 woocommerce.css.
woocommerce.css 压缩后的样式文件，此文件中包含了所有 WooCommerce 商店使用的基础 CSS 样式。woocommerce.scss 这是WooCommerce 样式的 SCSS 源文件，通过编译后产品上面woocommerce.css 文件。
上面的样式文件中，设计到宽度的样式使用了百分比自适应布局，以便适配大多数主题，当然，我们可以根据自己的实际需要调整。
方法一：覆盖默认的 CSS 文件修改WooCommerce 样式
为了避免升级问题，我们建议只把上面的文件作为参考，而不是直接修改上面提到的文件。如果你只想修改一小部分 WooCommerce 样式，之间通过 CSS 覆盖掉这部分样式就可以了，比如：添加下面的 CSS 到主题的样式文件中，修改 WooCommerce 的按钮为黑色。
a.button, button.button, input.button, #review_form #submit { background:black; }
在前端，为了方便自定义样式，WooCommerce 在 HTML 的 body 标签上添加了主题名称，页面类型等信息，我们可以使用此信息单独定义一些特殊页面的样式，这也是 WordPress 推荐的做法。
方法二：禁用 WooCommerce 默认样式，使用主题自定义的样式
如果你准备对 WooCommerce 样式做一些大的修改，使用方法一可能会增加很多工作量，多写很多不必要的代码。这时候，禁用 WooCommerce 默认的 CSS 样式，使用我们主题自定义的样式是个比较好的选择。添加下面的代码到主题的 functions.php 文件中即可实现这个修改。
// 逐个移除 WooCommerce 默认的样式文件 add_filter( 'woocommerce_enqueue_styles', 'wizhi_dequeue_styles' ); function wizhi_dequeue_styles( $enqueue_styles ) { unset( $enqueue_styles['woocommerce-general'] ); // 移除基础组件样式 unset( $enqueue_styles['woocommerce-layout'] ); // 移除布局 unset( $enqueue_styles['woocommerce-smallscreen'] ); // 移除小屏幕自适应优化 return $enqueue_styles; } // 或移除所有样式 add_filter( 'woocommerce_enqueue_styles', '__return_false' );
进行了上面的修改之后，我们的主题就不再使用 WooCommerce 默认的样式文件了，我们可以把 WooCoomerce 默认的样式文件中复制到自己的主题中进行响应的修改，如果你使用 SCSS，也可以直接修改 SCSS 文件，修改后，和主题样式文件一起，编译成包含了 WooCommerce 样式的主题样式文件。
woocommerce-Price-amount 颜色修改了，符号也修改了成透明的了完美。
原创文章，作者：SONIC SEO，如若转载，请注明出处：https://www.seo388.com/woocommerce-css/
微信扫一扫 
支付宝扫一扫 
