本文以預設主題 twentytwelve 為例，講解如何控制相關產品 （Related Products） 的影像尺寸和分欄。

影像尺寸

官方檔案 Using appropriate image dimensions to avoid distortion / pixellation 詳細描述了 WooCommerce 所使用的圖片尺寸、如何設定以及最常遇到的產品圖片模糊的解決方法，上傳產品圖片前先了解一下這篇文章的內容，可以省去很多麻煩。

簡單的說 WooCommerce 產品圖片有三種尺寸

  • Single Product Image：是最大的縮圖，用在產品詳情頁面展示產品大圖
  • Catalog Images：用在 shop 首頁、相關產品、交叉銷售和增量銷售中
  • Product Thumbnails：最小的縮圖，用在購物車頁、購物車小工具，產品詳情頁大圖下方那一堆小圖也是這個尺寸

WC-product-image-sizes

如果你覺得網店圖片看起來不對勁，先來檢驗所設定的尺寸是否正確。

控制相關產品顯示數量

相關產品預設使用 Catalog Images（150×150） 尺寸，分兩欄顯示總共 2 個產品，在 twentytwelve 下的效果非常捉急。

wc_related_product_thumb

首先改成一行顯示三個產品，總共顯示 3 個相關產品，下述所有程式碼都應放在主題的 functions.php 中

add_filter( 'WooCommerce_output_related_products_args', 'wc_custom_related_products_args' );
function wc_custom_related_products_args( $args ){
	$args = array(
		'posts_per_page' => 3,
		'columns' => 3,
		'orderby' => 'rand'
	);
	return $args;
}

只更改數量無法達到我們想要的效果，還需要修改樣式表，在主題的 style.css 裡新增如下樣式

.WooCommerce .related ul li.product, 
.WooCommerce .related ul.products li.product, 
.WooCommerce-page .related ul li.product, 
.WooCommerce-page .related ul.products li.product{
	width:30%;
}

最後效果如下，圖片清晰度上升，但仍然被縮放，因為圖片的尺寸是 150×150，而我們設定寬度為 33%，實際產生的展示尺寸為 188×188，這就是圖片模糊的原因。

related-product-2

改變圖片尺寸

想進一步提升清晰度，換個圖片尺寸，最直接的方式是去後臺修改 catalog images 尺寸。這裡我們想使用 300×300 的 single product image 尺寸，透過程式碼來更改。

if ( ! function_exists( 'WooCommerce_template_loop_product_thumbnail' ) ) {
	function WooCommerce_template_loop_product_thumbnail() {
		echo WooCommerce_get_product_thumbnail( 'shop_single');
	}
}

清晰度得到了很大提升

product-image-4

可選的圖片尺寸

在上面的程式碼中，圖片尺寸名稱是 shop_single，下面列出所有可選的引數

  • shop_catalog
  • shop_single
  • shop_thumbnail

———WordPress 預設尺寸———-

  • thumb
  • medium
  • large
  • post_thumbnail

透過 add_image_size 註冊的尺寸也可以在這裡使用。