Hiện 2 sản phẩm một hàng trên phiên bản di động trong Woocommerce

Theo mặc định thì Woocommerce chỉ hiện 1 cột sản phẩm ở phiên bản di động, với mong muốn chuyển thành 2 cột sản phẩm thì HongHaiNew.com có kinh nghiệm thực hiện theo từng bước như sau:

Bước 1: Thêm vào functions.php trong thư mục child Theme, tác dụng của bước này là thêm một class cho riêng phiên bản di động để từ đó viết Css riêng

function mobile_theme_body_class( $classes ){

if ( wp_is_mobile() ){
$classes[] = ‘hhn-mobile’;
}
else{
$classes[] = ‘hhn-desktop’;
}
return $classes;
}
add_filter(‘body_class’,’mobile_theme_body_class’);

Bước 2: Thêm đoạn Css sau vào child theme mà website của bạn đang sử dụng

.hhn-mobile #main .woocommerce-container ul.products .product,
.hhn-mobile #main .woocommerce ul.products .product {
width: 46% !important;
}

Kết Quả: Trang danh mục sản phẩm Woocommerce đã chia thành hai cột, hiện thị được nhiều sản phẩm hơn. Các bạn nếu có vướng mắc gì xin hãy để lại câu hỏi nha.