Hiển thị bảng thuộc tính sản phẩm và bật chế độ lưu trữ các sản phẩm cùng thuộc tính

Đóng góp bởi: Lê Thiện 47 lượt xem Đăng ngày 07/08/2024

Khi sản phẩm của bạn có nhiều thuộc tính, bạn muốn hiện các thuộc tính đó ra trang chi tiết sản phẩm theo dạng bảng liệt kê, và khi bấm liên kết các giá trị của thuộc tính nó sẽ chuyển về trang archive lưu trữ các sản phẩm cùng thuộc tính. Hôm nay, mình cùng tìm hiểu vấn đề này nhé.

 Giuseart.com – Hiển thị bảng các thuộc tính sản phẩm trong woocommerce

1. Thêm code vào function

Vào Quản trị – Giao diện – Sửa theme (Theme File Editor) – Function.php. Sau đó viết thêm đoạn code sau:

Bạn có thể thay đổi vị trí hiển thị của bảng thuộc tính này bằng cách sửa hook woocommerce_product_meta_start ở dòng cuối cùng thành vị trí mong muốn. Code của mình đang để là ở ngay đầu phần product meta.

2. Thêm code CSS trang trí cho bảng thuộc tính

Thêm đoạn code sau vào Giao diện – Tùy biến – Style – Custom CSS:

Vậy là đã hoàn thành việc hiển thị bảng thuộc tính thành công.

3. Cấu trúc lại đường dẫn cho trang archive thuộc tính

Sau khi hiển thị bảng thuộc tính thì khi bấm link thuộc tính bất kỳ sẽ ra url dạng filter=taxanomy=”pa_abc”&term=”xyz”…

Tuy nhiên, khi bấm link sẽ không ra được trang archive tổng hợp các sản phẩm có chung thuộc tính đó, chúng ta cùng xử lí tiếp để đưa slug trang archive về dạng: tên-miền/dung-tich/1000ml

Thêm code sau vào file function.php nhé

4. Cập nhật Permalink (đường dẫn tĩnh)

Bạn vào Quản trị – Cài đặt – Cài đặt đường dẫn tĩnh (Permalink) – Cập nhật lại mà không cần thay đổi bất cứ tùy chọn nào.

Mục đích của việc này để giúp WordPress nhận đường dẫn mới cho trang archive thuộc tính.

Lưu ý: Bạn có thể phải đưa cấu trúc permalink về mặc định hoặc tắt các plugin SEO (hoặc plugin cấu hình permalink) để cấu trúc permalink không bị can thiệp bởi các plugin khác dẫn đến xung đột.

5. Bước cuối: Cho phép lưu trữ

Bạn vào Quản trị – Sản phẩm – Thuộc tính – Sửa thuộc tính. Sau đó, chọn dấu tick cho mục “Cho phép lưu trữ?” để bật tính năng xem trang tổng hợp các sản phẩm có cùng thuộc tính.

 Giuseart.com – Cho phép lưu trữ để xem các sản phẩm có cùng thuộc tính

Chúc các bạn thực hiện thành công nhé, nếu có sai sót hay cần góp ý gì, vui lòng liên hệ chỉ bảo giúp mình nhé!

Để lại một bình luận

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 *

Mẫu web mới đăng

Mời bạn xem một số mẫu web mới đăng của Toptheme.info | NinhBinhweb

Giá full source: Liên hệ
Giá full source: Liên hệ
Giá full source: Liên hệ
Giá full source: Liên hệ
Giá full source: Liên hệ