Part 2 – Thêm custom fields cho product sử dụng advanced custom fields [woocommerce]

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Part 2 – Thêm custom fields cho product sử dụng advanced custom fields [woocommerce]

Ở bài viết trước mình có chỉ dẫn cách thêm trường mới cho mặt hàng sử dụng tính năng tích hợp sẵn trong WooCommerce API. Tuy nhiên, bản tính chính là tạo custom fields cho post type trong wordpress. Các bạn có thể sử dụng wordpress api tự viết custom fields cho kiểu sản phẩm của Woocommerce có post_type="product" .
Hoặc với sự bổ trợ của các wordpress plugin tạo custom fields cho custom post type điển hình như Advanced Custom Fields. Và trong bài hôm nay mình sẽ hướng dẫn các bạn tạo thêm fields cho product với woocommerce sử dụng plugin này.

Cấu hình Advanced Custom Fields

Sau khi bạn đã cài đặt WooCommerce và Advanced Custom Fields, bạn có thể sẵn sàng tạo fields cho product rồi đấy.
Nếu bạn có đọc qua bài chỉ dẫn Advanced Custom Fields cơ bản, thì phần này không có gì mới. Chuyển đến trang tạo Custom fields, Nhập nhóm fields mới. Trong nhóm fields bạn sẽ tạo ra các dòng fields với mục đích sử dụng cho kiểu sản phẩm “product” của woocommerce mà bạn muốn.
Ví dụ mình thêm WYSIWYG field có nhãn “Tech Specs”. Tên field sẽ tự động đổi thành tech_specs .
acf woocommerce

Trước khi save group fields, bạn sẽ cực kỳ cần giới hạn sử dụng những custom fields này cho woocommerce product. Kéo xuống metabox Location, chọn kiểu “ product ” trong danh sách Post type giống như hình dưới.
thêm cusom fields với advanced custom fields cho sản phẩm woocommerce

Lưu lại nhóm fields bằng cách nhấn Publish/Update.

Hiển thị nội dung tab cho custom field

Trong tỉ dụ trên chúng ta đã tạo field “Tech Spec”, cho mỗi mặt hàng và trong phần quản trị các bạn sẽ thấy field này xuất hiện dạng WYSIWYG cho phép bạn thiết kế nội dung HTML.
acf-custom-field-woo

Để hiện thị nội dung của fields này bạn sử dụng hàm get_field , với field name:

 $content = trim( get_field( 'tech_specs' ) );  

Ví dụ sau đây tôi sẽ thêm product tab mới cho field “tech_specs”, bằng phương pháp sử dụng hook woocommerce_product_tabs để hiển thị nội dung của custom fields vào tab tạo bởi advanced custom fields.

 add_filter( 'woocommerce_product_tabs', 'my_theme_product_tabs' ); function my_theme_product_tabs( $tabs ) { // ensure ACF is available if ( !function_exists( 'get_field' ) ) return; $content = trim( get_field( 'tech_specs' ) ); if ( !empty( $content ) ) { $tabs[] = array( 'title' =>  'Technical Specifications', 'priority' =>  15, 'callback' =>  'my_theme_tech_specs' ); } return $tabs; } function my_theme_tech_specs() { echo get_field( 'tech_specs' ); }  

Hàm my_theme_product_tabs liên kết với filter woocommerce_product_tabs , cho phép chúng ta sửa/thêm nội dung tabs hiển thị trên trang mặt hàng chi tiết. Bạn khai báo cấu trúc của tab mới vào biến $tabs , cách dùng hook tạo tabs trong woocommerce mình đã nói rất cụ thể trong bài hướng dẫn tạo custom fields cho product các bạn cũng có thể có thể xem thêm.

Bây giờ bạn nhập chuỗi nội dung HTML vào field Tech Specs trong phần nhập sản phẩm rồi save lại. Sau đó mở trang mặt hàng này, bạn sẽ thấy tab mới được tạo thêm có tiêu đề là “Technical Specifications” và nội dung bạn nhập trong field.
Chú ý: tùy theo wordpress theme, cũng đều có thể theme của bạn đang sử dụng customize woocommerce template không cho hiển thị tabs nếu bạn cũng thấy được nội dung của fields, để thử xem code có hoạt động không chúng ta cũng đều có thể kích hoạt các theme mặc định của wordpress như twentytwelve.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

Bài viết Part 2 – Thêm custom fields cho product sử dụng advanced custom fields [woocommerce] được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang