关于自定义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/

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

相关推荐

  • 宝塔面板phpMyAdmin打不开如何解决?

    这次,小编来给大家说说,关于 “宝塔面板phpMyAdmin打不开如何解决?” 第一种常见的情况是:服务器在购买后,888端口没有开放与放行,空间商那边的安全组,把888端口开放就好了,就解决宝塔面板phpMyAdmin打不开的问题了。 如果打开了888端口还是打不开phpMyAdmin的话,那就很可能是第二种情况,环境冲突。 第二种常见的情况是:服务器在购…

    2019年11月24日 免费建站教程
    05.1K
  • 记一次:亿速云服务器搭建

    记一次:亿速云服务器搭建 1)注册亿速云账号: PC版: https://www.yisu.com/reg?s=0PC3N 手机版: https://m.yisu.com/reg?s=0PC3N 2)购买服务器 购买服务器后,得到相关的服务器IP地址与服务器连接密码; 新手建议购买389元的香港服务器(首次购买可以领券便宜30元,也就是说359元/1年的服务…

    2019年11月6日 免费建站教程
    04.2K
  • WordPress在线表单制作步骤教程

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

    2020年2月23日 免费建站教程
    01.9K
  • 2020年3月10日阿里云注册与优惠价服务器购买推荐

    2020年3月10日阿里云注册与优惠价服务器购买推荐。 阿里云消费满额可领淘宝红包。3.2-3.31有效消费金额累计满3000元可领淘宝现金红包,仅限报名用户参与。 3月2日-31日有效消费金额累计满3000元,即可获取领取淘宝红包机会! 4月7日满足条件用户可直接来活动页面上领取淘宝红包! 1.到这里注册阿里云账号; https://account.ali…

    2020年3月10日
    01.3K
  • 如何解决WordPress正在执行例行维护,请一分钟后回来卡住的问题

    这次,小编来给大家说说 关于 ”如何解决Wordpress正在执行例行维护,请一分钟后回来卡住的问题”。希望对做Wordpress网站的站长有所帮助,这个也是Wordpress更新维护中比较常见的问题之一了。 我们应该如何解决这个常见的Wordpress问题呢?如下: 我们在对wordpress主程序、wordpress主题或者wordpress插件升级的时…

    2019年12月18日
    01.6K
  • 域名的详细命名规则是怎么样的呢?

    这次,小编来给大家说说一个基础小知识:“域名的详细命名规则”。选择域名与购买域名是做网站的第一步,也是比较重要的一步。 域名的详细命名规则:1、只提供英文知字母(a-z,不区分大小写)、数字(0-9)、以及”-“(英文中的连词号,即中横线),不能使用空格及特殊字符(如!、$、&、? 等)。2、”-“不能…

    2020年4月26日
    01.5K
  • Linux远程连接ssh工具FinalShell-Xshell替代神器

    做为站长经常会与服务器打交道,经常有些新手在使用Linux服务器的时候,不知所措,不懂得如何远程连接Linux,今天为大家介绍一款可以替代xshell的国产SSH工具。 最近发现了一款同类产品FinalShell,还是一块良心国货。初步体验了一下,确实是良心之作。且免费(通用版),支持国货。 FinalShell是一体化的的服务器,网络管理软件,不仅是ssh…

    2019年3月14日 免费建站教程
    02.5K
  • 关于WordPress博客类网站速度优化攻略

    今天,小编来给大家说说 “关于WordPress博客类网站速度优化攻略”。希望对于用wordpress开源程序来建站的小伙伴有所帮助。 使用Wordpress搭建的网站普遍打开速度太慢,针于SEO来讲提升网站打开速度才能获得好的体验。如何提升Wordpress网站打开速度,让WP博客程序实现速度秒开,经过研究实践终于突破了速度这一难题。 要提升Wordpre…

    2019年12月15日 免费建站教程
    01.2K
  • 建站工具?推荐WordPress和Dede,两款开源程序

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

    2019年3月15日
    11.6K
  • 分享一些轻量级的论坛搭建源码

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

    2019年11月18日
    03.0K
  • 宝塔BT面板云备份实操:七牛云云存储使用攻略

    这次,小编给大家带来的是,“宝塔BT面板云备份实操:七牛云云存储使用攻略”。希望能帮助想用云备份网站的SEO站长小伙伴们。 宝塔免费板也可以免费下载七牛云云备份插件的哦,完全是免费的,大家不用担心,免费云储存量有10G,备份网站松松的够用。 现在最新的版本是:宝塔Linux面板7.03 。可通过计划任务,将您的网站或数据库打包备份到七牛云的对象存储空间中,下…

    2019年11月25日 免费建站教程
    01.5K
  • 网站的域名应该如何选购? 越短越好 ?

    网站的域名应该如何选购? 越短越好 ?答案是肯定的,越短越好被记住,约受欢迎。但是价格会越高。域名的选择也是SEO优化的重要一环,也是SEO的基础。 国内的网站一般选择com, cn或者net结尾的比较好 (提醒:最好的国内使用后缀还是com和cn,新浪微博会员第三方接口只接受com和cn后缀的),比较受搜索引擎蜘蛛欢迎。而域名长度当然是越短越好,越容易被记…

    2019年3月20日
    11.7K