Tạo Mẫu Danh Sách Sản Phẩm Tùy Chỉnh JetEngine

Bước 1: Cài đặt các Plugin cần thiết

1. WooCommerce: Đảm bảo rằng WooCommerce đã được cài đặt và kích hoạt, vì đây là plugin cần thiết để quản lý sản phẩm.
2. JetEngine: Cài đặt và kích hoạt plugin JetEngine của Crocoblock. Plugin này cho phép bạn tạo các loại bài viết tùy chỉnh, phân loại, và nội dung động.

Bước 2: Tạo Mẫu Danh Sách Sản Phẩm Tùy Chỉnh

1. Đi tới JetEngine > Listings: Trên bảng điều khiển WordPress, điều hướng tới JetEngine > Listings và nhấn vào “Add New.”
2. Chọn Loại Bài Viết: Chọn “Products” làm loại bài viết. Điều này cho JetEngine biết rằng bạn đang tạo một mẫu cho sản phẩm WooCommerce.
3. Listing View: Chọn dạng xem danh sách như “Grid” (Lưới) hoặc “List” (Danh sách). Đây sẽ là bố cục cơ bản của cách các sản phẩm của bạn được hiển thị.
4. Thiết kế Mẫu Danh Sách Sản Phẩm: Sử dụng trình chỉnh sửa Elementor (hoặc trình dựng trang mà bạn ưa thích) để thiết kế danh sách sản phẩm. Bạn có thể kéo và thả các widget như:
   • Hình ảnh sản phẩm: Hiển thị hình ảnh chính của sản phẩm.
   • Tiêu đề sản phẩm: Hiển thị tiêu đề của sản phẩm.
   • Giá sản phẩm: Hiển thị giá của sản phẩm.
   • Nút Thêm vào Giỏ hàng: Bao gồm nút “Add to Cart”.
   • Đánh giá sản phẩm: Hiển thị đánh giá trung bình của sản phẩm.

Bước 3: Sử dụng Các Trường Động

JetEngine cho phép bạn sử dụng các trường động để lấy dữ liệu từ các sản phẩm WooCommerce của bạn. Cách thực hiện:

1. Dynamic Field Widget: Thêm widget Dynamic Field vào mẫu danh sách của bạn.
2. Source: Đặt nguồn là “Post/Term/User Object Field.”
3. Object Field: Chọn trường bạn muốn hiển thị, như _price cho giá sản phẩm, _sku cho SKU, hoặc _stock_status cho tình trạng hàng tồn kho.
4. Tùy chỉnh: Thiết kế các trường động để phù hợp với phong cách của trang web của bạn.

Bước 4: Tạo Lưới Danh Sách

1. Đi tới JetEngine > Listing Grids: Tại đây bạn có thể tạo bố cục lưới cho danh sách sản phẩm của mình.
2. Thêm Lưới Danh Sách: Chọn mẫu danh sách tùy chỉnh mà bạn đã tạo ở các bước trước.
3. Tùy chỉnh Cài đặt Lưới: Điều chỉnh số cột, khoảng cách và các cài đặt lưới khác để phù hợp với nhu cầu thiết kế của bạn.

Bước 5: Hiển thị Danh Sách Sản Phẩm

1. Tạo hoặc Chỉnh sửa Trang: Đi tới trang nơi bạn muốn hiển thị danh sách sản phẩm.
2. Thêm JetEngine Listing Grid: Sử dụng trình chỉnh sửa Elementor hoặc trình chỉnh sửa Gutenberg để thêm widget/block JetEngine Listing Grid vào trang.
3. Chọn Lưới của Bạn: Chọn lưới danh sách mà bạn đã tạo ở bước trước để hiển thị danh sách sản phẩm WooCommerce tùy chỉnh.

Bước 6: Tùy chỉnh thêm (Tùy chọn)

• Filters: Thêm JetSmartFilters (một plugin khác của Crocoblock) để cho phép người dùng lọc sản phẩm theo thuộc tính như giá, danh mục, hoặc thẻ.
• Pagination: Thêm phân trang vào lưới danh sách sản phẩm của bạn để cải thiện điều hướng.
• Trường Tùy Chỉnh: Nếu bạn có các trường tùy chỉnh cho sản phẩm, hãy đảm bảo chúng được tích hợp vào mẫu danh sách của bạn bằng các tùy chọn nội dung động của JetEngine.

Bước 7: Kiểm tra và Đăng tải

• Xem trước: Trước khi đăng tải, xem trước danh sách sản phẩm của bạn để đảm bảo mọi thứ hiển thị và hoạt động như mong đợi.
• Đăng tải: Khi hài lòng, hãy đăng tải trang, và danh sách sản phẩm WooCommerce tùy chỉnh của bạn sẽ hoạt động.