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

相关推荐

  • Mysql数据库的备份和还原

    mysql数据库备份还原操作图文流程,网站服务器搬家技巧,做到这几步,让网站搬家不再难。   步骤1,进入数据库管理中心,选中要备份的数据库,点击导出。   步骤2,点击数据库导出,选择自定义,选择所有数据库表。 步骤3,选中数据库表后,点击:执行,就会自己下载保存。 步骤4,已经看到下载后的数据库表文件:文件名.sql格式。 步骤5,接…

    2019年3月14日 免费建站教程
    11.2K
  • 分享织梦文章内容加入相关推荐和翻页的代码

    分享织梦文章内容加入相关推荐和翻页的代码。 小编粗略写的,写得不好请见谅,萌新程序猿一枚。 <div><div><div><div><div id=”pages” class=”page”></div></div>{dede:p…

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

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

    2019年11月25日 免费建站教程
    01.1K
  • 环境搭建 – apache和nginx哪个快?哪个性能高?

    关于建站前的环境搭建,本人是先去购买服务器,然后买的是linux系统的服务器,安装的是centos系统(一般是7的版本,6的版本太低了)。然后用linux面板,输入代码指令安装宝塔系统,如下: yum install -y wget && wget -O install.sh http://download.bt.cn/install/ins…

    2019年8月5日
    01.6K
  • 免费在线问答插件,使用WordPress建站的朋友,不要错过哦

    这款免费的Word Press 在线问答插件,名字叫:DW Question & Answer 免费问答社区插件下载地址:链接: https://pan.baidu.com/s/1WB6nn2VP75kkODfu1XMbSw 提取码: 5gm5    好看吗?你们觉得呢?而我的话,就觉得还不错哦。虽然和收费的有点差距,但是还不错了啦。 最近…

    2019年4月6日 免费建站教程
    11.5K
  • 纠结,WordPress忘记密码了!这次我来介绍几种解决方法

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

    2019年5月24日
    01.3K
  • 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.1K
  • 2019域名可备案后缀有哪些呢?

    购买域名前,SEOer和站长们是否有想过购买的域名是否能备案呢?是否有考虑过这个问题?如果没有的话,可以参考下本文中写到的可备案的后缀哦。 2019年网站域名可备案后缀到底有哪些呢? 目前在国内注册的无论是新域名还是老域名,均需要实名制,实名登记后才可以解析。在国外域名商注册的不在此限,但有被禁止访问的风险。 实名并不代表备案,实名后,如果需要使用国内主机,…

    2019年9月28日
    01.1K
  • WordPress升级显示另一更新正在进行解决方法

    就在刚刚,在登录小嵘SEO技术博客后台看到WordPress 5.2.3 版本推送出来了,于是果断的开始升级更新,结果我看半天没有反映,于是就刷新了一下,那么问题也就随之而来了。 WordPress 在升级的过程中,如果你刷新页面或者关闭页面会造成WordPress 升级不成功,而当我们再次升级时就可能会遇到这样或者那样的问题。就刚刚小嵘SEO技术博客升级 …

    2019年10月9日 免费建站教程
    01.8K
  • WordPress菜单插件安装推荐

    这次,小编来推荐几款WordPress菜单插件给大家。 菜单栏呢,它不仅可以作为浏览内容的导航工具,它还可以用来吸引访问者的注意力。换句话说,仅仅具有导航功能的菜单通常是不够的,可能还需要添加一些插件来使它更加生动。 在本文中,小编选择了2019年WordPress的10个最佳菜单插件。 1)MaxMegaMenu MaxMegaMenu可以自动替换word…

    2019年6月14日 免费建站教程
    01.2K
  • 在php中php-fpm 的重启与终止操作命令

    这次,小编来给大家说说,关于“在php中php-fpm 的重启与终止操作命令”。希望对大家维护linux服务器的过程中有所帮助哦。 php 中php-fpm 的重启、终止操作命令: service nginx restart service php-fpm restart 查看php-fpm进程数:ps aux | grep -c php-fpm 查看运行内…

    2020年5月7日
    01.3K
  • 关于织梦DEDE友情链接调用的方法与技巧

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

    2019年9月5日
    01.1K