Sử dụng Advanced Custom Fields Plugin WordPress

Hiện tại đa số các web mình đang làm về bán hàng đều sử dụng Flatsome. Do đó, bài viết này sẽ hướng tới những ai đang sử dụng Flatsome là chính, còn bạn nào dùng theme khác mà biết chút code chắc xử lý cũng dễ thôi.

Sử dụng Advanced Custom Fields tạo bảng thông số kỹ thuật và khuyến mại

Bước 1: Cài đặt plugin Advanced Custom Field

Các bạn vào trang quản trị WordPress, sau đó vào mục Plugin > Cài mới, và tìm Plugin “Advanced Custom Fields” ở khung tìm kiếm miễn phí.

Bước 2: Import Field Group Thông số kỹ thuật và khuyến mại

Với file này các bạn chỉ việc Import vào và sử dụng thôi, không phải cấu hình trong Advanced Custom Fields nữa.

Tải Field Group về tại đây:

Sau khi tải về, để Import các bạn vào trang Quản trị > Custom Fields > Tools:

Ở trường Import Field Groups nhấp vào Chọn tệp trong Select File, sau đó tìm đến tệp vừa tải về phía trên để Import vào.

Sau khi Import xong, các bạn vào sửa bất kỳ sản phẩm nào trong phần Sản phẩm thì sẽ thấy có thêm các Field mới, các bạn chỉ cần nhập thông số cho sản phẩm là được.

Các Field được thêm mới này bao gồm Thông số kỹ thuật và tab thông tin khuyến mại, các bạn nhập thử 1 sản phẩm để có thể thực hiện được bước 3 phía dưới nhé.

Bước 3: Hiển thị Custom Field ra ngoài Front End

Hiện tại chúng ta mới chỉ tạo các trường cho phần Thông số kỹ thuật và Khuyến mại, ở bước này chúng ta sẽ làm cho nó hiển thị ra ngoài giao diện của sản phẩm.

Bước 3.1: Hiển thị Custom Field Thông số kỹ thuật ra ngoài Front End

Đối với theme Flatsome thì trong phần tùy biến Layout của trang chi tiết sản phẩm có 9 kiểu layout tất cả. Do đó, nếu bạn chọn kiểu layout nào thì phải vào đúng file .php của layout đó chèn code hiển thị bảng thông số kỹ thuật ra ngoài.

Để chọn kiểu layout cho trang sản phẩm các bạn chọn Giao diện > Tùy biến > Woocommerce > Product Page > Layout. Sau đó bạn chọn kiểu mà bạn muốn trong 9 kiểu đã cho.

Sau đó bạn vào Giao diện > Sửa, chọn theme gốc của Flatsome, ở menu bên phải chọn Woocommerce > Single-product > Layout.

Tùy theo bạn chọn kiểu Layout gì ở trên mà ở đây bạn chọn đúng file .php của layout đó, giả sử mình chọn layout Right Sidebar Full Height thì file .php là product-right-sidebar-full.php.

Các bạn copy toàn bộ đoạn code sau:

https://docs.google.com/document/d/1lwfEEsPyCb29puNu1Z4OdnG8teShPCDfh4iEzc63zE0/edit?usp=sharing

Sau đó dán toàn bộ đoạn code ở trên vào ngay sau thẻ mở <div id="product-sidebar" ... > như hình:

Bước 3.2: Hiển thị Custom Field Khuyến mại ra ngoài Front End

Các bạn làm tương tự ở trên, copy toàn bộ code ở phía dưới:

https://docs.google.com/document/d/1-49RxD0PgaWEw1ktt5pDEB4qif2GXk-09jETkq4xjao/edit?usp=sharing

Sau đó bạn vào Giao diện > Sửa, chọn theme gốc của Flatsome, ở menu bên phải chọn Woocommerce > Single-product rồi tìm tới file share.php và dán code ở trên cùng trước thẻ <?php

Sau khi làm xong, các bạn ra ngoài trang chủ vào sản phẩm mà các bạn đã thêm thông tin lúc đầu và F5 lại để kiểm tra xem 2 phần Thông số kỹ thuật và khuyến mãi đã hiện ra hay chưa nha.

Lưu ý: Với cách làm trên, chúng ta đã hoàn thành việc gọi hiển thị bảng thông số kỹ thuật cho wordpress sử dụng Advanced Custom Field.
Tuy nhiên, chúng ta sửa code trong theme gốc Flatsome khi update theme sẽ mất hết những thứ chúng ta làm. Do đó, các bạn copy folder "woocommerce" của theme gốc Flatsome đưa sang child theme là OK nha, lần sau update theme thoải mái. Bước này rất quan trọng đó.

Bước 4: Tùy biến CSS cho đẹp

Với các bước ở trên các bạn đã thực hiện được đưa các trường ra ngoài giao diện Backend. Tuy nhiên, chúng mới chỉ là hiển thị được ra ngoài, chứ nhìn như 1 mớ hỗn độn.

Do đó, việc tiếp theo chúng ta phải viết mã CSS cho nó để nó có thể hiển thị đẹp mắt hơn.

Bước 4.1: Tùy biến CSS cho PC

Các bạn vào Giao diện > tùy biến > Style > Custom CSS > Custom CSS, paste toàn bộ đoạn CSS này vào nha:

https://docs.google.com/document/d/1svV35RB-QcgiF_J_xvHufv8iycjOk3u91f1kRB3dy_4/edit?usp=sharing

Lưu ý: Các bạn tải ảnh icon check ở link https://hlcomputer.vn/wp-content/uploads/2021/11/check@2x.png về upload lên host và lấy url ảnh để thay vào thuộc tính background của thẻ <li> trong đoạn CSS trên nha.

Bước 4.2: Tùy biến CSS cho Mobile

Các bạn copy toàn bộ đoạn code CSS ở dưới paste vào Giao diện > Tùy chỉnh > Style > Custom CSS > Custom CSS Mobile:

https://docs.google.com/document/d/1svV35RB-QcgiF_J_xvHufv8iycjOk3u91f1kRB3dy_4/edit?usp=sharing ( đoạn code dưới cùng)

 

 

Đánh giá post

Trả lời

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 *