Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tăng tốc độ WordPress
    • Tối ưu website WordPress
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Wordpress plugins » Hiển thị số lượng sản phẩm trên một hàng với woocommerce

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

Thứ Năm, 11/09/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

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.
Thay đổi số lượng cột sản phẩm woocommerce

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.
so-luong-hang-cot-san-pham-woocommerce

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.
not-support-responsive

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ả:
grid-products-change-columns

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.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Hướng dẫn xây dựng trang web bán hàng sử dụng WooCommerce
  2. Sửa thông báo khi nhấn nút Add to cart cho WooCommerce.
  3. Hướng dẫn tạo variation product trong woocommerce
  4. Tạo thêm custom fields cho product trong woocommerce
  5. Tùy biến nút add to cart với woocommerce – phần 2
  6. Thay đổi tiêu đề nút add to cart trong woocommerce
  7. Tùy biến Product thumbnail – thay đổi ảnh đại diện của sản phẩm trong woocommerce
  8. Thêm States vào Woocommerce – Lựa chọn thanh toán cho một vùng của quốc gia
  9. Nhập thêm quốc gia mới sử dụng trong woocommerce
  10. Tùy biến search form với WooCommerce

Chuyên mục: Wordpress, Wordpress plugins Tìm kiếm: web bán hàng, Woocommerce, wordpress plugins

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Comments

  1. Huỳnh văn lai says

    Thứ Sáu, 01/12/2017 at 5:42 chiều

    web mình bị lỗi không đều trên trang chủ thì làm sao vậy ad?
    http://giamsat24hvn.com ad xem giúp mình với vẫn chưa khắc phục được sự cố

    • Hoàng Quách says

      Thứ Sáu, 01/12/2017 at 6:33 chiều

      Bạn làm theo các bước mình hướng dẫn nhé

    • Hoàng Quách says

      Thứ Ba, 19/12/2017 at 7:38 sáng

      Lỗi này có thể do CSS, hoặc dùng PHP để tách hàng xuống với số lượng 1 hàng được chỉ định. Bạn xem ví dụ này nhé:

      <?php
      $i = 0;
      // Thanks to PaoloVIP for the suggestion to add round() for loops with an odd # of results
      if ( have_posts() ) : while ( have_posts() ) : the_post();
        if ($i == 0) echo '<div id="left">';
        if ($i == (round($wp_query->post_count / 2))) echo '</div><div id="right">';
          the_content(); // or whatever custom content you desire
        if ($i == round($wp_query->post_count)) echo '</div>';
        $i++;
      endwhile; endif;
      ?>
      
  2. nguyenduy says

    Thứ Tư, 25/07/2018 at 3:42 chiều

    Ad cho hỏi, themple luc đầu e tải về thì trang chủ hiển thị 4 sản phẩm trên cùng 1 hàng ngang, nhưng khi e viết code vào để thêm sản phẩm, khi thêm vào thì nó sản phẩm thành 1 hàng dọc, chứ hk phải 4 sản phẩm trên 1 hàng ngang như lúc đầu, mong ad giúp đỡ.

  3. Huế Nguyễn says

    Thứ Năm, 30/08/2018 at 12:32 sáng

    mình đăng nhều sản phẩm lên danh mục nhưng khi xem thì 1 trang chỉ hiện thị 1 sản phẩm, mình muốn hiển thị nhiều thì phải làm sao? mong bạn giúp đỡ. Thanks!

  4. Vũ Bá Hải says

    Thứ Năm, 02/04/2020 at 12:33 chiều

    MÌnh có 1 web sản phẩm nhưng khi view mobile chỉ hiển thị 1 sản phẩm trê hàng, giờ muốn đổi thành 2 thì làm thế nào?

    • Hoàng Quách says

      Thứ Bảy, 04/04/2020 at 9:19 sáng

      Bạn xem bài viết này nhé https://www.hoangweb.com/develop/php/cach-phat-hien-thiet-bi-nguoi-dung-mobile-bang-php

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.