Hiển thị số lượng sản phẩm trên một hàng với woocommerce

Mặc định woocommerce hiển thị 4 sản phẩm trên một hàng với kích thước chiều rộng tối đa của website.

Nhưng nếu wordpress theme thiết kế giao diện theo kiểu responsive, sẽ hiển thị đa dạng tương thích trên nhiều thiết bị cho nhiều kích thước width khác nhau, lúc đó woocommerce sẽ hiển thị số lượng sản phẩm căn cứ theo độ rộng co vào của theme.

Nhưng nếu theme không hỗ trợ giao diện responsive, dù web chạy trên mọi thiết bị có kích thước khác nhau thì số lượng cột sản phẩm liệt kê trong catelog hay page shop đều không thay đổi.

Thay đổi số lượng sản phẩm trên một hàng – woocommerce

Để thay đổi số lượng hiển thị các sản phẩm trên một hàng, chúng ta sử dụng hook loop_shop_columns.

// Change number or products per row to 3
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
	function loop_columns($num) {
		return 3; // 3 products per row
	}
}

Ví dụ trên mình chỉ định 3 sản phẩm trên một dòng. Kết quả:

Bạn sẽ thấy hook này được gọi trong template content-product.php để xác định số lượng cột trong danh sách liệt kê sản phẩm của woocomerce dạng GRID.
Tại dòng 22 trong file content-product.php

$woocommerce_loop['columns']=apply_filters('loop_shop_columns',4);

Bạn có thể sửa lại giá trị mặc định này.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook