Hướng dẫn hiển thị sub-category trong WooCommerce một hàng riêng biệt

Hiển thị subcategory và sản phẩm riêng biệt-leekhoa.com

Trong WooCommerce đã có tích hợp sẵn phần hiển thị danh mục với tùy chọn hiển thị sản phẩm hoặc hiển thị hạng mục con và sản phẩm. Nếu bạn muốn tối ưu trải nghiệm người dùng thì việc hiển thị cả danh mục con sẽ giúp khách hàng dễ dàng tìm kiếm sản phẩm theo nhu cầu hơn. Tuy nhiên, việc hiển thị mặc định này khá rối khi cả danh mục con và sản phẩm nằm chung trên một hàng.

Hướng dẫn hiển thị hạng mục con và sản phẩm trong Woocommerce

Các phiên bản Woocommerce về sau này đã cho phép người dùng được quyền lựa chọn hiển thị sản phẩm và hạng mục con trong từng hạng mục mà không cần phải đụng nhiều đến code nữa.

Cách để hiển thị hạng mục con và sản phẩm trong cùng một category trong woocommerce cơ bản như sau:

Bước 1: Bạn vào phần tùy biến -> WooCommerce -> Hạng mục sản phẩm.

Cách hiển thị hạng mục con và sản phẩm trong woocommerce

Bước 2: Tại phần tùy biến bạn sẽ thấy 2 lựa chọn đầu tiên là “Hiển thị trang cửa hàng” và “Hiển thị danh mục”. Cả 2 phần này bây giờ có thể cho phép bạn lựa chọn chỉ hiển thị sản phẩm hoặc hiển thị hạng mục con hoặc hiển thị cả sản phẩm và hạng mục con.

Nếu muốn hiển thị các hạng mục và sản phẩm con trong cùng một category thì bạn chọn “Hiển thị hạng mục phụ & sản phẩm”.

Giải thích:

  • Hiển thị trang cửa hàng: Tức là trang chính của cửa hàng, trang tổng hợp tất cả các sản phẩm và category trên website của bạn. Lựa chọn của bạn chỉ áp dụng đối với trang cửa hàng, các trang danh mục không ảnh hưởng.
  • Hiển thị danh mục: Tức là các lựa chọn chỉ hiển thị trong từng danh mục (category).

Nếu muốn lựa chọn hiển thị đồng bộ thì bạn chọn cả 2 phần giống nhau.

Sau khi lựa chọn hiển thị hạng mục phụ và sản phẩm. Kết quả hiển thị ở trang danh mục sản phẩm sẽ như sau:

Hiển thị danh mục con và sản phẩm trong woocommerce flatsome

Bạn có thể thấy, phần hạng mục con của category Nước hoa đã hiển thị ra với “Nước hoa Charme, Nước hoa nam & Nước hoa nữ”. Tuy nhiên, cấu trúc mặc định của WooCommerce khá rối khi hạng mục phụ hiển thị liền mạch với sản phẩm. Điều này khiến trải nghiệm người dùng đôi khi không thoải mái.

Vậy, nếu bạn muốn hiển thị tách biệt phần hạng mục phụ và sản phẩm trong cùng một category như thế nào?

Cách hiển thị hạng mục phụ tách biệt với sản phẩm trong category

Có 2 cách phổ biển hiện nay.

  • Một là bạn làm như ở trên, sau đó tùy biển code trong source website lại một chút. Cách làm này chỉ dành cho bạn nào biết code và am hiểu về cách chỉnh sửa website.
  • Hai là sử dụng shortcode giúp hiển thị sub-category thủ công.

Ở bài này mình sẽ hướng dẫn bạn cách 2, đơn giản cho người không rành code. Ok bắt tay làm nào.

Bước 1: Bạn không cần phải thực hiện các tùy biến lựa chọn “Hiển thị hạng mục phụ & sản phẩm” như ở phần trên. Cứ để “Hiển thị sản phẩm” như mặc định.

Cách làm này sẽ chỉ áp dụng cho từng category được chỉnh sửa.

Bước 2: Bây giờ bạn muốn hiển thị cho phần Category nào thì vào category đó, và bấm “Sửa danh mục” trên thanh admin bar. Ở đây mình muốn hiển thị cho category chính là “Nước hoa”.

Hiển thị subcategory và sản phẩm riêng biệt-leekhoa.com 3

Bước 3: Tại phần chỉnh sửa, bạn sẽ thấy các mục như “Description“, “Top Content” hay “Bottom Content“. Đây là những phần bạn có thể thêm tùy biến vào trang danh mục đó.

Hiển thị subcategory và sản phẩm riêng biệt-leekhoa.com 2

Bước 4: Copy đoạn shortcode sau và dán vào một trong 3 lựa chọn ở bước 3. Mình sẽ dán vào phần “Top Content” do phần “Description” mình sẽ dùng để viết mô tả cho danh mục.

Ghi chú:

  • Trong đoạn shortcode trên có 2 phần bạn cần quan tâm. Một là số 16 và hai là số 4.
  • Parent=”16″: số 16 là ID của category chính. Như khi mình bấm vào sửa danh mục Nước hoa thì trên url sẽ xuất hiện ID “..?taxonomy=product_cat&tag_ID=16&post_type=product”. Mỗi category có một ID khác nhau nên bạn lưu ý điền đúng nhé.
  • Column=”4″: Tức là bạn muốn hiển thị các hạng mục phụ thành bao nhiêu cột. Bạn có thể thay thế thành 3, 5, hay nhiều hơn tùy vào cấu trúc website của bạn.

Và đây là thành quả:

Và bạn có thể thêm một chút Css để làm đẹp và thoáng website hơn.

Như vậy là đã xong. Chúc các bạn thành công!

Hiển thị subcategory và sản phẩm riêng biệt-leekhoa.com
Đánh giá post

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *