[Woocommerce] Tạo bảng thông số kỹ thuật sử dụng Advanced Custom Fields

Chào các bạn, nếu bạn đang tạo website bán các sản phẩm điện thoại thì chắc chắn cần một bảng thông số kỹ thuật như CPU, RAM, bộ nhớ, thông số màn hình, thông số camera, … đúng không? Tôi đã làm khá tốt bảng thông số kỹ thuật này và tôi muốn chia sẻ nó với bạn.

Mục đích của bài viết này là giúp những bạn chưa biết code hoặc biết một chút code có thể tự tạo phần thông số kỹ thuật cho website bán điện thoại của mình mà không phải trả tiền thuê hay nhờ người khác làm.

Thực ra cũng không quá phức tạp, bạn cứ làm theo từng bước như tôi hướng dẫn. Tuy nhiên, tôi đang sử dụng giao diện Flatsome cho hướng dẫn này nên bất kỳ ai sử dụng Flatsome có thể làm theo hướng dẫn tương tự và những người sử dụng thiết kế khác có thể liên hệ với tôi để được hướng dẫn thêm.

[Woocommerce] Tạo bảng thông số kỹ thuật sử dụng Advanced Custom Fields

Hướng dẫn tạo phần thông số kỹ thuật trên Flatsome

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

Bạn vào trang quản trị WordPress, vào phần Plugins – New Install – Gõ “Advanced Custom Field” vào ô tìm kiếm trong kho plugin miễn phí của WordPress. (Nếu đủ tiền mua bản PRO thì càng tốt, nhưng thực tế thì bản miễn phí cũng đủ giúp chúng ta làm bài này).

Sau khi bạn đã cài đặt thành công, bạn có thể kích hoạt plugin này để có thể sử dụng.

Bước 2: Tạo Filed Group Thông Số Kỹ Thuật

Đây là một Filed Group mà tôi đã chuẩn bị cho bạn. Tất cả những gì bạn phải làm là tải chúng xuống, nhập chúng vào plugin “Advanced Custom Field” và sử dụng chúng.

Tải xuống tại đây: https://drive.google.com/file/d/1qsMP3xUvHd3vMSLdgjVVlu59EUSmfXwv/view?usp=sharing

Sau khi tải xong nhóm trường, hãy vào Quản trị – Custom Field – Tools.

Sau khi nhập tệp ACF ở trên, kể từ giờ, khi bạn chỉnh sửa bất kỳ sản phẩm nào, nó sẽ thêm các trường mới để bạn nhập thông tin (nằm cuối bài), ví dụ:

Bây giờ nhập thông số kỹ thuật và thông tin khuyến mại cho sản phẩm. Nhập ít nhất 1 sản phẩm để dễ dàng nhận thấy sự thay đổi sau các bước tiếp theo.

Đây chỉ đơn giản là tạo trường tùy chỉnh cho Post Type = Product, tức là hệ thống cho phép bạn thêm trường tùy chỉnh để đưa nhiều dữ liệu vào sản phẩm trong backend, quan trọng hơn chúng ta phải gọi nó để hiển thị ra bên ngoài.

Bước 3: Hiển thị ra bên ngoài giao diện người dùng

Hiển thị bảng thông số kỹ thuật

Bạn có thể để datasheet này ở bất cứ đâu, nhưng theo tôi nó nên để ở sidebar cho đẹp.

Đối với chủ đề Flatsome, có tới 9 bố cục cho các trang sản phẩm khác nhau trong phần điều chỉnh bố cục của trang chi tiết sản phẩm Woocommerce. Do đó, nếu bạn quyết định sử dụng bất kỳ loại bố cục nào, bạn sẽ cần chọn tệp .php thích hợp để truy cập bảng thông số kỹ thuật. Ví dụ:

Chọn kiểu bố cục cho trang sản phẩm: Bố cục -> Tùy chỉnh -> Woocommerce (Cửa hàng) -> Product Page -> Product Layout

Chọn tệp .php xác định bố cục cho trang sản phẩm: Bố cục -> Chỉnh sửa -> Chọn chủ đề gốc Flatsome -> Woocommerce -> Single-product -> Layout

Ví dụ: Tôi chọn bố cục Right Sidebar Full Height cho trang sản phẩm, sau đó tôi cần tìm tệp product-right-sidebar-full.php để gọi mã hiển thị bảng thông số kỹ thuật:

Sao chép và dán tất cả mã bên dưới:

Dán tất cả mã ở trên ngay sau thẻ mở như hình dưới đây:

Bước 4: thêm một chút CSS cho đẹp

Chúng tôi vừa gọi mã để hiển thị nội dung của trường tùy chỉnh trong giao diện người dùng, nhưng bây giờ dữ liệu được gọi đang hiển thị một cách lộn xộn vì không có CSS:

Tiếp theo, CSS sao cho đúng và hiển thị đẹp!

CSS dành cho PC

Đi tới Giao diện – Tùy chỉnh – Kiểu – CSS tùy chỉnh và dán vào toàn bộ đoạn CSS này:

Lưu ý: Bạn tải ảnh biểu tượng dấu tích xanh từ link http://dienthoai3.ninhbinhweb.info/wp-content/uploads/2019/08/check@2x.png để upload lên host và url ảnh để thay thế thuộc tính nền của thẻ trong đoạn mã CSS ở trên.

CSS dành cho thiết bị di động

Bạn copy toàn bộ đoạn mã CSS bên dưới và dán vào Appearance – Customize – Style – Custom CSS – Custom CSS Mobile

Và kết quả là:

Tổng kết

Trên đây là bài hướng dẫn [Woocommerce] Tạo bảng thông số kỹ thuật sử dụng Advanced Custom Fields dành cho người dùng website giao diện Flatsome. Nếu có bất kỳ vấn đề nào có thể để lại bình luận bên dưới để cùng trao đổi nhé.

Cảm ơn các bạn đã quan tâm xem và ủng hộ leekhoa.com trong thời gian gần đây. Nếu bạn có nhu cầu thiết kế website bán hàng, thiết kế landing page,.v.v.. hãy liên hệ với mình để được hỗ trợ.

Review dịch vụ hosting/vps azdigi 1

1 bình luận về “[Woocommerce] Tạo bảng thông số kỹ thuật sử dụng Advanced Custom Fields”

Viết một bình luận