Cách hiển thị danh mục trong Website WooCommerce

cach-hien-thi-danh-muc-trong-woocommerce

Cách hiển thị danh mục trong Website WooCommerce – WooCommerce cung cấp đến bạn vài tùy chọn về những gì bạn hiển thị tại trang lưu trữ bạn sở hữu:

  • sản phẩm
  • Danh mục (tại trang cửa hàng) hoặc danh mục phụ (tại trang danh mục)
  • Cả sản phẩm, chủng loại

Khi bạn đang cài đặt website thương mại điện tử, thông thường bạn sẽ chọn tùy chọn thứ ba, sản phẩm, danh mục / danh mục phụ. Điều này ngụ ý khách truy cập được chọn sản phẩm ngay từ trang chủ or tinh chỉnh tìm kiếm thông qua nhấp qua để lưu trữ danh mục sản phẩm.

Ở hướng dẫn này, bạn sẽ tìm hiểu cách hiển thị danh mục tại danh sách riêng trước khi hiển thị sản phẩm.

  • Phân biệt mã WooCommerce được sử dụng để xuất danh mục cùng danh mục con tại trang lưu trữ
  • Tạo plugin cho mã
  • Viết hàm để đặt danh mục hoặc danh mục con trước danh sách sản phẩm
  • Phong cách đầu ra

Chuyển đến WooCommerce> Cài đặt , chọn tab Sản phẩm, tiếp đó chọn tùy chọn Hiển thị. Với mỗi tùy chọn Hiển thị trang cửa hàng hay Hiển thị danh mục mặc định, hãy chọn Hiển thị cả hai.

cach-hien-thi-danh-muc-trong-woocommerce

Nhấp nút Lưu thay đổi để lưu.

cach-hien-thi-danh-muc-trong-woocommerce

Lưu ý: Tất cả mã được đề cập tiếp đây phải là vị trí ở hàm.php (có sẵn ở thư mục giao diện)

Hiển thị danh mục sản phẩm WooCommerce

cach-hien-thi-danh-muc-trong-woocommerce

Vì vậy, có hàm WooCommerce_product_c Category () xuất ra danh mục or danh mục con trước khi chạy vòng lặp tạo ra sản phẩm. Chức năng cắm, nghĩa là ghi đè nó ở giao diện.

cach-hien-thi-danh-muc-trong-woocommerce

Liệt kê các danh mục con của danh mục sản phẩm thương mại Woo

Đây là cách bạn dễ dàng có được danh mục con từ danh mục sản phẩm WooCommerce nhờ sử dụng chức năng tùy chỉnh tận dụng lợi thế slug sản phẩm mẹ.

cach-hien-thi-danh-muc-trong-woocommerce

Ở đoạn mã trên, đối tượng WP_Term lấy loại sản phẩm gốc. Tiếp theo, nó nhận được ID con ở danh sách. Cuối cùng, danh mục con được hiển thị ở HTML thông qua việc chạy vòng lặp thông qua danh sách ID con.

Xem thêm: Plugin bảo trì wordpress

Hiển thị Mô tả Danh mục WooCommerce

cach-hien-thi-danh-muc-trong-woocommerce

Đoạn mã trên phải được đặt ở tệp mẫu WooCommerce mà bạn sử dụng để hiển thị chi tiết sản phẩm. Ở đoạn mã này, bộ lọc ‘wp_get_post_terms’ được gọi khi bộ đệm có thuật ngữ bắt buộc, bộ lọc sẽ vượt qua thuật ngữ cùng danh sách $ args. Ngoài ra, bộ lọc được gọi trước danh sách thuật ngữ rồi sẽ vượt qua danh sách khác.

Một plugin tùy chỉnh để hiển thị danh mục sản phẩm thương mại WooC

Quá trình hiển thị danh mục con cho danh mục sản phẩm WooCommerce ở trên được thực hiện thông qua mã nội tuyến được thêm ở tệp tin.php.

Vài trường hợp chủ sở hữu cùng nhà Làm website WooCommerce không muốn sử dụng mã nội tuyến, chủ yếu là ở đó họ không muốn tiết chế với mã Good hay ở trường hợp tùy chỉnh rộng rãi bị trật bánh nhờ thêm mã vào hàm.php.

Đối với người dùng như vậy, sự thay thế tuyệt vời là đóng gói toàn bộ chức năng này vào plugin nào đó. Quá trình này rất đơn giản, bạn có thêm lợi ích từ việc tắt chức năng này bằng cách tắt plugin.

Hãy bắt đầu!

Ở thư mục wp-content / plugins bên bạn, tạo thư mục mới rồi đặt cái tên duy nhất cho nó. Tôi đang gọi tài liệu lưu trữ tại nền tảng đám mây. Ở đó, tạo tệp mới, lần nữa với tên duy nhất. Tôi đang sử dụng cùng tên: socialseo-sản phẩm.php

Mở tệp bên bạn rồi thêm mã này vào nó.

cach-hien-thi-danh-muc-trong-woocommerce

Tại tệp plugin bên bạn, thêm điều này:

cach-hien-thi-danh-muc-trong-woocommerce

Thêm mã này vào hàm:

cach-hien-thi-danh-muc-trong-woocommerce

cach-hien-thi-danh-muc-trong-woocommerce

Đoạn mã trên xác định đối tượng được truy vấn hiện tại, định nghĩa ID nó là  $ Parentid. Nó sử dụng  get_terms ()  để xác định thuật ngữ với mục hiện được truy vấn là bản gốc. Đối với mỗi thuật ngữ, nó sẽ hiển thị hình ảnh danh mục thông qua sử dụng  WooCommerce_subcatgeory_thumbnail () , theo sau là tên danh mục ở liên kết đến kho lưu trữ.

Ở thư mục plugin bên bạn, tạo thư mục có tên css rồi tại, tạo tệp có tên style.css.

Giờ tệp plugin bên bạn có tên socialseo-product.php. Thêm mã sau đây

Ở đoạn mã trên, wp_register_style đồng ý bạn thêm tệp style.css riêng bạn chứa mã CSS tùy chỉnh mà bạn sử dụng để hiển thị danh mục phụ.

Phần kết luận

Danh mục sản phẩm là yếu tố nổi bật thuộc WooCommerce, tuy nhiên cách chúng được hiển thị nhìn chung không hoàn hảo. Ở hướng dẫn này, bạn đã tìm ra cách tạo plugin tạo ra danh mục sản phẩm or danh mục con độc lập với danh sách sản phẩm rồi tiếp đó bạn đã tạo kiểu cho danh sách danh mục bạn muốn.