修改WooCommerce产品页面相关产品图片大小和产品列表产品数量

修改WooCommerce产品页面相关产品图片大小和产品列表产品数量

作者:DIYzhan.com |  浏览:13506 |  0 条评论

WordPress做的外贸网站中安装了WooCommerce后,对WooCommerce的大部分设置,如产品,付款方式,物流,邮件等的设置是在WooCommerce->Settings那里设置,但有些默认的设置我们是无法通过这个方法来设置的,如related products的产品图片大小,related products的产品的显示数量,还有产品列表中显示的商品数量(有些主题可以在theme option那里设置,但很多主题没有这些设置选项),下面我们来讲下如何通过修改CSS和代码来实现修改related products的产品图片大小,related products的显示数量,还有产品列表中显示的商品数量。

Related product图片大小及数量

有些主题虽然说对woocommerce支持,但支持的不够好,比如在产品页面下面,有些主题的related product的图片显示得很大,模糊,并只显示2个related products。那我们怎么修改呢?wc_default_change_1

  1. 修改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%wc_default_change_2 wc_default_change_3
  2. 修改产品页面中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列显示;wc_default_change_4

修改产品列表中产品显示数量

在后台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 );

红色数字就是显示的商品数量;wc_default_change_5

 

 

原创文章,转载请注明: 转载自DIYzhan.com-从零开始自己做外贸网站和海外网络营销
本文链接地址:http://www.diyzhan.com/2014/06/some-settings-of-woocommerce/



标签:

相关推荐
更多

发表评论

>
在线客服演示

无觅相关文章插件,快速提升流量

长按扫我微信
需要帮助?
点击这里给我发消息