关于自定义WooCommerce的CSS样式的两种方法

这次,小编来说说,“关于自定义WooCommerce的CSS样式的两种方法”。如果WooCommerce主题的价格不能隐藏的话,小编用的是把主题文件夹里的css文件夹里的style.css文件打开修改代码,然后把里面的文字代码color改成白色#FFFFF的颜色,在白底下价格和价格符号就变成透明了哦,相当于隐藏了独立站的商品价格和商品价格符号。内页要删除价格2个字的话可以寻找price开头的文件删除或者删除里面的price代码即可。如果直接改CSS不成功的话,再使用下面的方法二,加入相关代码,然后CSS修改应该就会成功了。

关于自定义WooCommerce的CSS样式的两种方法
关于自定义WooCommerce的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 样式的主题样式文件。

小编修改了这个主题里的css字体颜色
小编修改了这个主题里的css字体颜色

woocommerce-Price-amount 颜色修改了,符号也修改了成透明的了完美。

 

原创文章,作者:SONIC SEO,如若转载,请注明出处:https://www.seo388.com/woocommerce-css/

(2)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020年6月8日 21:37
下一篇 2020年6月12日 16:58

相关推荐

  • 转载:CentOS6.5服务器配置建站环境详细流程

    CentOS6.5服务器配置建站环境详细流程 之前的Win主机上挂了十几个WordPress网站,客户普遍反映后台操作已经慢到不行。于是我租了一台新的云主机,这次下决心要搞定Linux 主机了,同样的配置,Linux跑WordPress肯定要快不少,而且也不会碰到Win主机下的各种怪问题。花了两天时间折腾,终于搞定建站环境,把第 一个WordPress网站给…

    2019年3月14日
    0912
  • 记1次网站搬家操作步骤

    记1次网站搬家操作步骤: 这次小编来给大家说说,云虚拟主机如何把网站搬家到云服务器。 步骤如下: 1)先从原来的空间商那边,把网站备份好,一份是网站页面文件的备份,另外一份是网站数据库的备份sql文件; 2)下载网站页面备份文件,下载网站数据库备份文件到电脑本地; 3)需要搭建好服务器,小编用的是宝塔面板。 4)举例:小编现在要搬家的网站是 soft999….

    2019年11月5日 免费建站教程
    0808
  • fastadmin忘记后台密码如何解决?

    这次,小编来分享一下,关于“fastadmin忘记后台密码如何解决?” 希望对大家有所帮助,谢谢。 首先,我们先进入数据库。 然后,修改数据库。具体如下: 数据库修改fa_admin表的两个字段 密码 (password):c13f62012fd6a8fdf06b3452a94430e5 密码盐(salt):rpR6Bv 修改完这两项后,登录密码就变成了 1…

    2019年11月4日
    02.1K
  • 建站工具?推荐WordPress和Dede,两款开源程序

    建站工具?推荐Wordpress和Dede,两款开源程序 WordPress主要是做博客类型的网站,而使用不同的模板可以做出不同的效果,也可以做企业站和商城,后期操作更新维护比较简单。 Dede主要是做企业类型的网站,但是需要改代码的地方比较多,相对于Wordpress是比较复杂那么一些些。 WP   织梦(Dede)

    2019年3月15日
    11.0K
  • 如何连接Linux系统的服务器?用X-shell吧!

    买的服务器直接登录不好使?不能直接输入密码?密码输入有问题?那就用工具登录服务器吧! 方便快捷的服务器连接工具:Xshell       下面博主给大家提供下载连接: 06Xshell-6.exe 下载地址: 链接:https://pan.baidu.com/s/1S-FAHd7FTObsrMaz1sQBSg提取码:uias复制…

    2019年6月12日
    0885
  • 纠结,WordPress忘记密码了!这次我来介绍几种解决方法

    不经意中,忘掉wordpress的登陆密码了,无语啊。正巧在后台管理又没都还没设定电子邮件,既然到处苦寻解决方案,还行终于找到…… ! 1. WordPress内嵌的找加登陆密码方式 当你的admin账号的电子邮件地址是恰当的, 你就依据一般的找回密码流程, 在Wordpress的登陆页点一下”密码忘了?” 随后键入admin或电子邮箱地址. 然后, 你能接…

    2019年5月24日
    01.0K
  • 分享一些轻量级的论坛搭建源码

    这次,小编来给大家 “分享一些轻量级的论坛搭建源码”。希望能帮助大家搭建属于自己的轻量级论坛网站。 如果你想做一个博客,或者论坛,其实装个轻论坛即可。接下来,小编给大家介绍一些轻论坛程序,全套源码都有,大家自己选择。 Flarum http://flarum.org/ Carbon Forum https://www.94cb.com/ Wecenter h…

    2019年11月18日
    01.4K
  • WordPress在线表单制作步骤教程

    原来wordpress做在线表单那么简单的,下载Contact Form 7插件,启用,插入短代码,表单完成。 如下图所示:    

    2020年2月23日 免费建站教程
    01.2K
  • 使用宝塔面板如何更换网站域名?

    使用宝塔面板如何更换网站域名?最近有朋友问到我这个问题,小编就写个小教程给小伙伴看吧。很简单的啦。 首先进入宝塔面板。 点击 “网站“。 然后点击网站的域名,如下图: 点击进去域名之后,能看到该网站所解析绑定的域名,然后 现在框里输入要替换的域名,如下图: 在这个框里输入要替换的域名,然后把之前的域名删除了,就可以替换网站域名了。 点击操作下面的垃圾桶小图标…

    2019年12月5日 免费建站教程
    01.7K
  • 浅析域名被墙了的解决办法

    这次,小编来给大家简单地介绍一下 “域名被墙了的解决办法”。希望对广大的站长和SEOer有所帮助。 关于域名被墙的三大状态,如下: 域名被墙 如果域名ping的通却打不开网站(排除服务器宕机),用代理可以打开一般说明域名被封了。假如域名下的网站非法信息多,敏感,又不整改,会直接被GFW墙掉,结果就是访问域名是打不开的。但是解析是正常的。此时域名在国内是无法使…

    2019年10月16日 免费建站教程
    01.5K
  • 关于织梦DEDE友情链接调用的方法与技巧

    这次小编来分享几个织梦友情链接标签技巧。 DEDE织梦的友情链接标签正确的调用格式如下: 织梦dedecms友情链接调用方法: {dede:flink type=’textall’ row=’24’} [field:link /] {/dede:flink} 表示显示前24条从后台添加友情链接全部用文字显示 t…

    2019年9月5日
    0857
  • WordPress如何配置Https,可以使用阿里云免费SSL证书

    WordPress如何配置Https,可以使用阿里云免费SSL证书。 先登录自己的阿里云账号,然后进入购买免费证书地址:https://common-buy.aliyun.com/?spm=5176.2020520154.cas.3.66daIevhIevh8M&commodityCode=cas#/buy 免费的就够用了,付费的Https 协议证书…

    2019年3月21日 免费建站教程
    1941