修改WooCommerce产品页面相关产品图片大小和产品列表产品数量
作者:DIYzhan.com |
浏览:27703 |
评论已关闭 条评论
在WordPress做的外贸网站中安装了WooCommerce后,对WooCommerce的大部分设置,如产品,付款方式,物流,邮件等的设置是在WooCommerce->Settings那里设置,但有些默认的设置我们是无法通过这个方法来设置的,如related products的产品图片大小,related products的产品的显示数量,还有产品列表中显示的商品数量(有些主题可以在theme option那里设置,但很多主题没有这些设置选项),下面我们来讲下如何通过修改CSS和代码来实现修改related products的产品图片大小,related products的显示数量,还有产品列表中显示的商品数量。
Related product图片大小及数量
有些主题虽然说对woocommerce支持,但支持的不够好,比如在产品页面下面,有些主题的related product的图片显示得很大,模糊,并只显示2个related products。那我们怎么修改呢?
- 修改related product的图片的大小:首先我们找到网站目录里面/wp-content/plugins/woocommerce/assets/css这个文件夹,找到文件woocommerce-layout.css,下载到本地使用Dreamweaver(或者Notepad++)打开,搜索找到 “woocommerce-page .upsells.products ul li.product img,.woocommerce-page .upsells.products ul.products li.product img”这句话,把这句话后面的width:100%, 修改成width:50%,保存;然后上传覆盖网站里面原来的woocommerce-layout.css文件即可;注意:如果你的Woocommerce这个插件升级了,那么原来做的修改将会被改回原来的width:100%;
- 修改产品页面中related products的显示数量:在后台Appearance->Editor进入主题编辑器,点击主题的functions.php进入编辑,在functions.php中添加以下代码,并保存即可;
// Redefine woocommerce_output_related_products() function woocommerce_output_related_products() { woocommerce_related_products(8,2); // Display 8 products in rows of 2 }
注意:这段代码要在”?>”这个PHP的标识符之前,在我分享的主题vantage中没有以”?>“这个结束,大家可以在结尾的时候加上;代码中红色数字8,是显示产品个数,2是显示列数;另外,这个主题只能显示2列相关产品,多列会排版混乱,自己调试下显示4,6,8个,2列显示;
修改产品列表中产品显示数量
在后台Appearance->Editor进入主题编辑器,点击主题的functions.php进入编辑,在functions.php中添加以下代码,并保存即可;
// Display 30 products per page. Goes in functions.php
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 30;' ), 20 );
原创文章,转载请注明: 转载自DIYzhan.com-从零开始自己做外贸网站和海外网络营销
本文链接地址:https://www.diyzhan.com/2014/06/some-settings-of-woocommerce/
本站遵循CC协议署名-非商业性使用-相同方式共享
转载请注明来自:DIYzhan.com-从零开始自己做外贸网站和海外网络营销
相关推荐
- 一张图看懂WordPress外贸网站的布局与设置
- Posted on 08月21日
- 整合WhatsApp到WordPress外贸网站: 添加WhatsApp聊天工具
- Posted on 01月15日
- 给使用Woocommerce短码生成的产品列表页面添加翻页功能
- Posted on 11月30日
- 自定义一个WordPress外贸网站首页
- Posted on 03月12日
评论已关闭。