Cách nhận danh mục sản phẩm trong WooC Commerce

Khi thiết lập cửa hàng, tôi thường chọn tùy chọn thứ ba. sản phẩm và danh mục/danh mục phụ. Điều này có nghĩa là khách truy cập vào cửa hàng của tôi có thể chọn sản phẩm ngay từ trang chủ hoặc tinh chỉnh tìm kiếm của họ bằng cách nhấp qua kho lưu trữ danh mục sản phẩm

Tuy nhiên, có một thất bại với phương pháp này. Nó hiển thị các danh mục/danh mục con cùng nhau, không có sự tách biệt giữa hai danh mục. Điều này có nghĩa là nếu hình ảnh sản phẩm của bạn có kích thước khác với hình ảnh sản phẩm, thì bố cục có thể trông hơi lộn xộn. Ngay cả khi hình ảnh của bạn có cùng kích thước, nếu một trong các dòng trong trang lưu trữ bao gồm cả danh mục và sản phẩm, thì việc không có nút 'Thêm vào giỏ hàng' cho các danh mục sẽ khiến hàng đó trông lộn xộn, vì không phải tất cả các thành phần của nó đều có

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách hiển thị danh mục trong danh sách riêng trước khi hiển thị sản phẩm

Để làm điều này, chúng tôi sẽ làm theo bốn bước

1. Xác định mã mà WooC Commerce sử dụng để xuất các danh mục và danh mục con trên các trang lưu trữ
2. Tạo một plugin cho mã của chúng tôi
3. Viết hàm để đặt danh mục hoặc danh mục con trước danh sách sản phẩm
4. Tạo kiểu cho đầu ra

Nhưng trước khi bắt đầu, bạn sẽ cần cài đặt WooC Commerce với một số sản phẩm được thêm vào cũng như danh mục sản phẩm và danh mục phụ được thiết lập

Những gì bạn cần

Để làm theo, bạn sẽ cần

• cài đặt phát triển của WordPress
• một trình soạn thảo mã
• WooC Commerce đã cài đặt và kích hoạt
• sản phẩm đã thêm—Tôi đã nhập dữ liệu sản phẩm giả đi kèm với WooC Commerce;
• một chủ đề tương thích với WooC Commerce đã được kích hoạt—Tôi đang sử dụng Storefront

Trước khi chúng ta bắt đầu. Tùy chọn mặc định

Hãy xem những gì WooC Commerce cung cấp cho chúng tôi theo mặc định

Tôi đã bắt đầu bằng cách thêm một số hình ảnh vào danh mục sản phẩm và danh mục con của mình vì dữ liệu giả của WooC Commerce không bao gồm những hình ảnh đó. Tôi chỉ đơn giản sử dụng hình ảnh của một trong các sản phẩm từ mỗi danh mục hoặc danh mục con, như bạn có thể thấy trong ảnh chụp màn hình

Bây giờ, hãy xem cách WooC Commerce hiển thị danh mục sản phẩm và sản phẩm trên các trang lưu trữ

Nếu bạn chưa có, hãy mở Tùy biến, chọn tab WooC Commerce và nhấp vào Danh mục sản phẩm.  

Trong Hiển thị trang cửa hàng, hãy chọn Hiển thị danh mục & sản phẩm và trong Hiển thị danh mục, hãy chọn Hiển thị danh mục phụ & sản phẩm

Nhấp vào Xuất bản để lưu các thay đổi của bạn và truy cập trang cửa hàng trên trang web của bạn. Của tôi trông như thế này

Vì tôi có bốn danh mục và một lưới gồm ba hình ảnh cạnh nhau nên hai sản phẩm đầu tiên được hiển thị cùng với một trong các danh mục

Tôi muốn làm cho các danh mục và danh mục phụ của mình nổi bật hơn và chỉ cần trình bày chúng tách biệt khỏi danh sách sản phẩm. Vì vậy, hãy làm điều đó

Xác định mã mà WooC Commerce sử dụng để xuất danh mục và sản phẩm trong kho lưu trữ

Bước đầu tiên là xác định cách WooC Commerce xuất các danh mục và danh mục con. Vì vậy, hãy đi sâu vào mã nguồn WooC Commerce để tìm chức năng có liên quan

Tệp mà WooC Commerce sử dụng để hiển thị các trang lưu trữ là sản phẩm lưu trữ. php nằm trong thư mục mẫu 

Trong tệp đó, bạn có thể tìm thấy mã này, mã này xuất ra các danh mục và sản phẩm

1