0919 357 194 Chat facebook Z Chat zalo

Thêm thông tin chi tiết sản phẩm trong Woocommerce

Dạo này thấy anh em thường hỏi vấn đề thêm option (field) trong single của sản phẩm (thông tin thêm mà mặc định Woo không hỗ trợ). Hôm nay mình sẽ hướng dẫn các bạn thêm thông tin chi tiết sản phẩm trong Woocommerce (như hình dưới). Bài này chỉ dành cho những bạn chưa biết code nhiều và chưa làm được, cũng như không có ý tưởng. Còn các bạn đã biết rùi vui lòng không ném gạch nha.

Hướng dẫn cách thông tin chi tiết sản phẩm trong Woocommerce
Giao diện hiển thị thông tin chi tiết sản phẩm trong website

Thêm field mong muốn vào quản trị sản phẩm 

Thường thì rất nhiều bạn thêm bằng Advanced Custom Fields (ACF). Nhưng hôm nay mình sẽ chỉ cho các bạn thêm thông tin chi tiết sản phẩm trong Woocommerce bằng các trường, field, hook của Woo đã hỗ trợ sẵn nhé. (Không nên lạm dụng pluins, mình thì cực ghét plugin nhé).

Mỗi sản phẩm sẽ có mỗi cấu hình, options cũng như chương trình khuyến mãi,…khác nhau cho nên mình sẽ phải làm sao cho khách hàng (người sử dụng) có thể tùy biến trên mỗi sản phẩm nhé. Sản phẩm hôm nay sẽ như thế này (hình dưới cho các bạn dễ hình dung)

Trước tiên các bạn thêm đoạn code bên dưới vào file function.php. Mục đích là thêm các filed vào sản phẩm trong quản trị nhé (thêm: Text nhập Ghi chú giao hàng, Khuyến mãi và Trong hộp gồm có)

Để lưu các giá trị nhập vào, tiếp tục thêm code sau:

và đừng quên hook nó nhé

Như vậy, đã thêm được các field mong muốn vào quản trị sản phẩm. Các bạn F5 và edit sản phẩm hoặc thêm mới xem kết quả nhé.

Hiển thị thông tin chi tiết sản phẩm trong Woocommerce ra ngoài giao diện người dùng 

Tiếp theo làm sao để hiện thị ra ngoài front-end (giao diện người dùng). Ở đây mình sẽ cho xuất hiện tại vị trí như hình là dưới Giá và kế bên Slide hình sản phẩm nhé. Để không phá vỡ cấu trúc theme các bạn có thể override bằng child-theme. Nhưng mình sẽ hướng dẫn các bạn hook thẳng vào luôn nha. Nghĩa là code của bài này chỉ viết trong 1 file functions.php thôi nhé.

Tạo 1 function hiển thị front-end nhé (function này sẽ được hook vào vị trí muốn hiển thị)

Đừng quên hàm hook hiển thị ra nhé

Như vậy đã hoàn thành việc thông tin chi tiết sản phẩm trong Woocommerce rùi đó. Các bạn style là đẹp lung linh rùi. Đơn giản quá các nhỉ.

Lưu ý: Phần hiển thị Ưu đãi và Trong hộp mình sử dụng textarea để nhập. Cho nên khi nhập để tách biệt các mục đầu dòng thì phải sử dụng thêm dấu ; nhé. Và ở đoạn code hiển thị front-end mình có foreach thêm xíu nhé.

Lưu ý khi nhập textarea trong phần Ưu đãi và Trong hộp

Thật đơn giản phải không nào. Nếu có bất kỳ thắc mắc gì. Hoặc bạn đang lên ý tưởng xây dựng trang website hãy comment bên dưới để được tư vấn và giải đáp nhé.

Hoặc bạn cũng có thể liên hệ nhanh với Thanh Hoá Web chúng mình qua:

Hotline: 0919 357 194

Zalo: Nguyễn Thị Phương Anh

Page Facebook: Thiết kế website

Email: ntpa625@gmail.com

Địa chỉ: Nguyễn Huy Tự, Phương Lam Sơn, TP. Thanh Hoá.




    LIÊN HỆ VỚI CHÚNG TÔI

  • Địa chỉ: Nguyễn Huy Tự, P. Lam Sơn, Thành phố Thanh Hóa
  • Email: ntpa625@gmail.com
  • Website: www.webthanhhoa.net
  • Hotline: 0919 357 194 - 0978 621 625 - 035 390 6220 - 078 993 6632
  • Cảm ơn quý khách đã lựa chọn công ty chúng tôi.

Trả lời