Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)
What You’ll Be Creating
WooCommerce cung cấp cho bạn một vài lựa chọn như những gì bạn có thể hiển thị trên các trang lưu trữ của bạn:
- sản phẩm
- danh mục (trên trang bán hàng chính) hoặc danh mục phụ (trên những trang danh mục)
- sản phẩm và danh mục
Khi tôi thiết lập một cửa hàng, tôi thường dùng lựa chọn thứ 3: sản phẩm và danh mục/danh mục thứ cấp. Có nghĩa là khách xem cửa hàng của tôi có thể chọn sản phẩm ngay trang chủ hoặc điều chỉnh chọn lựa tìm kiếm thông qua danh mục lưu trữ (archive) sản phẩm.
Tuy nhiên, có một vấn đề với cách tiếp cận này: nó cùng lúc hiển danh mục/danh mục phụ, không có sự tách biệt giữ hai loại. Điều này có nghĩa là nếu ảnh sản phẩm của bạn có nhiều kích thước khác nhau, thì bố cục sẽ trở nên lộn xộn. Thậm chí nếu hình ảnh của bạn cùng kích thước, nếu một trong các dòng của trang archive có cả danh mục và sản phẩm, thì sự thiếu vắng nút ‘Add to Cart’ của danh mục làm cho dòng đó trông thiếu gọn gàng, không như những hàng có các thành phần có cùng kích thước như nhau.
Trong bài hướng dẫn này, tôi sẽ chỉ bạn làm sao để hiển thị danh mục thành danh sách tách biệt trước khi hiển thị sản phẩm.
Để thực hiện điều này, chúng ta sẽ theo 4 bước:
- Xác định code của WooCommerce sử dụng để xuất danh mục và danh mục phụ trên những trang archive.
- Tạo một plugin cho code của chúng ta.
- Viết một hàm để đưa danh mục hoặc danh mục phụ lên trước khi liệt kê sản phẩm.
- Trang trí cho kết quả.
Nhưng trước khi bắt đầu, bạn sẽ cần một bản cài đặt WooCommerce với vài sản phẩm được thêm vào, và danh mục sản phẩm và danh mục phụ được bổ sung.
Tóm Tắt
Điều bạn sẽ cần
Để theo dõi, bạn sẽ cần:
- Một phần thiết lập phát triển cho WordPress.
- Một trình biên tập code.
- WooCommerce đã được cài đặt và kích hoạt.
- Sản phẩm được thêm vào – Tôi đã nhập vào những sản phẩm ảo có sằn từ WooCommerce; chi tiết làm sao để thực hiện, hãy xem hướng dẫn này:
- Một theme tương thích với WooCommerece đã kích hoạt – Tôi sử dụng Storefront.
Trước khi chúng ta bắt đầu: Các tuỳ chọn mặc định
Hãy xem WooCommerce có gì cho chúng ta lúc ban đầu nào.
Tôi bắt đầu bổ sung vài hình ảnh cho các danh mục sản phẩm và danh mục phụ, vì dữ liệu ảo của WooCommerce không bao gồm chúng. Tôi chỉ sử dụng một hình ảnh đơn giản của các sản phẩm cho mỗi danh mục hoặc danh mục phụ, bạn có thể nhìn vào ảnh chụp màn hình:
Giờ hãy nhìn xem cách WooCommerce hiển thị danh mục sản phẩm và sản phẩm trong những trang archive.
Nếu bạn chưa thực hiện, hãy đến WooCommerce > Settings, chọn tab Products, và sau đó chọn tuỳ chọn Display. Cho mỗi tuỳ chọn của Shop Page Display và Default Category Display, chọn Show both:
Chọn nút Save changes để lưu những thiết lập mới và trở về trang bán hàng của bạn. Của tôi trông thế này:
Vì tôi có ba loại sản phẩm và hình ảnh các dạnh mục của tôi có cùng kích thước với hình ảnh sản phẩm của tôi, bố cục có vẻ khá gọn gàng. Nhưng ở đây là một trong số phần lưu trữ danh mục sản phẩm.
Bởi vì danh mục này có 2 danh mục phụ, sản phẩm đầu tiên được hiển thị bên cạnh chúng, ở dạng grid có 3 mục theo chiều rộng. Tôi muốn các danh mục và danh mục phụ của mình nổi bật hơn, và được hiển thị tách biệt khỏi danh sách liệt kê sản phẩm. Vậy hãy làm điều đó.
Xác định Code WooCommerce Sử Dụng để Xuất Danh Mục và Sản Phẩm trong Archives
Bước đầu tiên là xác định xem WooCommerce xuất danh mục và danh mục phụ như thế nào. Vì vậy hãy xét kỹ phần mã nguồn của WooCommerce để tim ra các hàm có liên quan.
File mà WooCommerce sử dụng để hiển thị trang archive là archive-product.php, nó nằm trong thư mục templates.
Trong file này, bạn có thể thấy đoạn code này, nó xuất danh mục và sản phẩm ra.
Vậy có một hàm woocommerce_product_subcategories() xuất ra những danh mục và danh mục phụ trước khi việc chạy vòng lặp xuất các sản phẩm được thực hiện.
Hàm này là plugginable, có nghĩa là chúng ta có thể override nó trong theme mới của ta. Thật không may là điều đó không hiệu quả khi WooCommerce đã có style dựng sẵn cho việc xoá các item, nó sẽ xuất hiện ở ngay đầu mỗi hàng với hiển thị mặc định.
Vậy thay vì thế, chúng ta sẽ tắt chức năng hiển thị danh mục và danh mục phụ trên trang archive, để chỉ cho sản phẩm được hiển thị. Sau đó chúng ta sẽ tạo một hàm mới, nó sẽ xuất các danh mục và danh mục phụ của sản phẩm, và chạy hook vào hành động woocommerce_before_shop_loop, chắc rằng chúng ta ưu tiên cao độ vì thế nó được gọi sau các hàm được hook vào trong hành động này.
Lưu ý: Bởi vì WooCommerce bổ sung clear vào những sản phẩm thứ ba trong phần liệt kê, nên chúng tôi không thể dùng hàm woocommerce_product_subcategories() hoặc một phiên bản đã điều chỉnh của nó để hiển thị các danh mục. Điều này xảy ra vì nó đã xoá đi danh mục thứ 3, thứ 6 và cứ thế hoặc sản phẩm được liệt kê, thậm chí khi chúng ta dùng hàm này để hiển thị các danh mục riêng biệt. Chúng ta có thể override nó, nhưng đơn giản hơn là chỉ cần viết hàm của riêng chúng ta.
Vậy hãy tạo một plugin để làm điều đó.
Tạo plugin.
Trong thư mục wp-content/plugins, tạo một folder mới và cho nó một cái tên độc nhất. Tôi goi tên plugin của mình là tutsplus-separate-products-categories-in-archives. Bên trong đó, tạo một file mới, cũng đặt tên duy nhất nhé. Tôi sử dụng cùng tên: tutsplus-separate-products-categories-in-archives.php.
Mở file của bạn và bổ sung đoạn code sau:
Có lẽ bạn muốn chỉnh sửa thông tin của author vì đây là plugin do bạn tạo ra. Lưu file của bạn lại và kích hoạt plugin thông qua trang quản trị của WordPress.
Viết hàm của chúng ta
Bây giờ hãy viết hàm đó nào. Nhưng trước khi bắt đầu, hãy tắt phần liệt kê danh mục trong màn hình quản trị. Đi đến WooCommerce > Settings, chọn tab Products, và chọn tuỳ chọn Display. Cho mỗi tuỳ chọn Shop Page Display và Default Category Display, chọn Show products. Lưu thay đổi của bạn.
Trang bán hàng của bạn giờ trông thế này:
Trong file plugin của bạn, bổ sung:
Giờ thêm đoạn code này vào trong hàm:
Hãy xem qua hạm này làm gì:
- Nó xác định đối tượng được truy vấn hiện thời và định nghĩa id của nó cho biến số
$parentid. - Nó sử dụng hàm
get_terms()để xác định các điều kiện với những item đang được truy vấn như là các item cao cấp của nó. Nếu đây là trang bán hàng chính, thì nó sẽ trả về danh mục cấp lớn nhất, nếu nó là trang lưu trữ, nó sẽ trả về những danh mục phụ. - Sau đó nó kiểm tra xem có bất cứ điều kiện nào tồn tại, trước khih chạy vòng lặp
foreachvà một thành phầnul. - Cho mỗi điều kiện, nó tạo ra một thành phần
li, và sau đó xuất ra ảnh cho danh mục sử dụng hàmwoocommerce_subcatgeory_thumbnail(), sau đó là tên của danh mục trong một liên kết trỏ đến archive của nó.
Giờ lưu file của bạn lại và tải lại trang bán hàng chính. Của tôi trông thế này đây:
Danh mục được hiển thị, nhưng chúng cần được trang trí. Tiếp theo hãy thực hiện điều này:
Trang trí cho danh sách liệt kê danh mục
Để bạn có thể bổ sung trang trí, chúng ta cần một stylesheet bên trong plugin, nó sẽ cần được enqueue.
Trong thư mục plugin, tạo một folder tên css, và bên trong đó, tạo một file tên gọi style.css
Giờ trong file plugin của bạn, bổ sung phần này ngay phía trên hàm bạn đã tạo ra:
Nó enqueue đúng với stylesheet bạn vừa mới tạo.
Giờ mở stylesheet ra và bổ sung đoạn code sau: WooCommerce theo phong cách mobile-first (ưu tiên cho thiết bị di động), vì thế chúng ta cũng sẽ làm như vậy.
Tôi đã copy chính xác widths (chiều rộng) và margins (biên độ) từ nhưng style được WooCommerce sử dụng.
Giờ bạn kiểm tra trang bán hàng chính lần nữa. Của tôi đây:
Đây là trang lưu trữ cho danh mục Music:
Và đây là hình dạng của nó trên màn hình nhỏ hơn.
Tóm tắt
Những danh mục sản phẩm là một tính năng tuyệt với của WooCommerce, nhưng cách chúng hiển thị chưa phải là lý tưởng. Trong bài hướng dẫn này, bạn đã học được cách để tạo một plugin để xuất danh mục và danh mục phụ của sản phẩm tách biệt với phần liệt kê sản phẩm, và sau đó bạn đã trang trí cho phần liệt kê danh mục.
Bạn nên sử dụng code để xuất một danh sách các danh mục hoặc danh mục phụ ở đâu đó trên trang (ví dụ ở dưới sản phẩm) bằng việc sử dụng hook để thêm chức năng vào một action hook khác bên trong template của WooCommerce.
Nếu bạn đang vận hành một shop và bạn đang tìm cách mở rộng, hoặc bạn đang tìm kiếm vài plugin bổ sung có liên quan đến WooCommerce, đừng chần chừ hãy xem plugin nào có sẵn trên Envato Market.
Advertisement
Did you find this post useful?
Yes
No
Cancel
Submit
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Rachel McCollin
