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

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

Related product图片大小及数量

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

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%；
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列显示；

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

在后台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/