Hiển thị sản phẩm liên quan trong bài viết blog theo cấu trúc trang tùy biến
Hiển thị các sản phẩm có liên quan là một ý tưởng thực sự tuyệt vời khi cung cấp nhiều sản phẩm hơn mà khách truy cập cũng có thể quan tâm tại trang Bài đăng đơn hoặc bất kỳ trang nào khác trên trang web của bạn.
Tuy nhiên, khi tìm cách thực hiện điều đó, bạn không có quá nhiều lựa chọn, đặc biệt nếu bạn định tạo mẫu Trang sản phẩm duy nhất. Đôi khi, mọi thứ có thể trở nên khó khăn hơn một chút khi bạn cần thêm các sản phẩm có liên quan vào mẫu Bài đăng đơn.
Tuy nhiên, có một công cụ chắc chắn có thể hỗ trợ bạn giới thiệu các sản phẩm liên quan đến WooCommerce. Nó được gọi là JetEngine và đã có sẵn trong gói CrocoBlock, vì vậy bạn không cần thực hiện thêm bất kỳ thao tác nào để hoàn thành công việc.
Trong bài đăng này, chúng tôi muốn chia sẻ hướng dẫn chi tiết về cách thêm các sản phẩm WooCommerce có liên quan vào mẫu trang Bài đăng đơn được xây dựng bằng Elementor. Vui lòng làm theo hướng dẫn bên dưới để hiển thị các sản phẩm liên quan.
Thêm sản phẩm liên quan bằng SKU
- Khi bạn hoàn thành nhiệm vụ này, hãy đảm bảo bạn đã cập nhật plugin JetEngine lên v.1.1.1 hoặc cao hơn. Điều này là cần thiết để bạn có quyền truy cập vào các tùy chọn cụ thể hơn, cho phép bạn tự do hơn trong việc hiển thị các sản phẩm WooCommerce động có liên quan.
- Tải metabox bằng liên kết này về ổ cứng của bạn. Nó chứa mẫu JSON cho hộp meta mới với các bộ lặp bên trong nó. Sau đó vào JetEngine Dashboard > Skins Manager > Import Skin > Tải file trên lên và import
3. Điều hướng đến “JetEngine > Danh sách” và tạo mẫu cho một sản phẩm (với hình ảnh thu nhỏ động, liên kết và nội dung khác). Lưu mẫu để bảo tồn các thay đổi.
4. Bây giờ hãy điều hướng đến “Sản phẩm” trong Bảng điều khiển WordPress. Tại đây hãy điền SKU cho từng sản phẩm tồn tại trên trang web của bạn. Trường SKU bạn cần điền nằm ở khối “Chung > Khoảng không quảng cáo” trong “Dữ liệu sản phẩm”.
5. Sau khi tất cả ID SKU được tạo, vui lòng điều hướng đến bài đăng mà bạn muốn thêm các sản phẩm liên quan. Ở đây chỉ định SKU sản phẩm cho từng sản phẩm trong bộ lặp “Danh sách sản phẩm liên quan”.
6. Bây giờ chúng ta đã sẵn sàng thêm danh sách vào mẫu “Bài đăng đơn”. Để thực hiện việc này, vui lòng điều hướng đến “CrocoBlock > My Library” (hoặc, trong trường hợp bạn đang sử dụng Elementor PRO, việc này có thể được thực hiện trong “Elementor Template > Theme Builder”).
7. Tạo mẫu mới cho Bài đăng đơn bằng cách sử dụng các tiện ích nội dung cần thiết. Sau đó, thả tiện ích Lưới danh sách vào mẫu để hiển thị danh sách có Sản phẩm WooCommerce trên trang Bài đăng đơn.
8. Trong “Nội dung > Chung > Danh sách”, chọn mẫu cho một sản phẩm bạn đã tạo bằng JetEngine. Chỉ định số lượng cột cần thiết, số bài đăng để hiển thị, v.v.
9. Nhấp vào Post Query Block và tại đây thêm một mục mới bằng cách nhấp vào nút “Add Item”.
10. Chọn Meta Query trong danh sách thả xuống “Posts Query Type”.
11. Nhập giá trị Key cho truy vấn. Nó nên như vậy _sku trong trường hợp bạn cần truy vấn sản phẩm theo SKU. Xin lưu ý rằng đây là meta Query mặc định cho tất cả các trường SKU trong cơ sở dữ liệu.
12. Xin lưu ý rằng đây là macro tùy chỉnh và để nó hoạt động, bạn cần thêm mã dưới đây vào tập tin function.php trước. Sau đó, quay lại, chọn In trong Operator và xác định giá trị cho toán tử bằng cách sử dụng mã macro, tại ô Value > Nhấn vào biểu tượng Dynamic Tag > Macros > Chọn Jet_Related_Products .
<?php
add_filter( 'jet-engine/listings/macros-list', 'jet_register_custom_macros' );
add_filter( 'jet-engine/listing/grid/widget-hide-options', 'jet_add_related_hide_option' );
/**
* Add new macros to default macros list
*
* %jet_related_products% - macros name
*
*/
function jet_register_custom_macros( $macros_list ) {
$macros_list['jet_related_products'] = 'jet_related_products';
return $macros_list;
}
/**
* Add jet_hide_if_no_related callback into widget hide options.
*
* @param array $options Existing options list
* @return array
*/
function jet_add_related_hide_option( $options ) {
$options['jet_hide_if_no_related'] = __( 'Hide if no related', 'text-domain' );
return $options;
}
/**
* Hide Listing Grid widget if no related products.
* Return true if widget should be visible and false if hidden.
*
* @return boolean
*/
function jet_hide_if_no_related() {
$related = jet_related_products();
if ( ! $related ) {
return false;
} else {
return true;
}
}
/**
* Macros callback function
*/
function jet_related_products() {
$result = array();
$products = get_post_meta( get_the_ID(), 'related-products-list', true );
if ( ! $products ) {
return '';
}
foreach ($products as $product) {
if ( ! empty( $product['product_sku'] ) ) {
$result[] = $product['product_sku'];
}
}
return implode( ',', $result );
}13. Bây giờ bạn cần đặt cài đặt “Widget Visibility”. Trong trường hợp bài đăng không có bất kỳ SKU sản phẩm nào trong các trường meta, bạn không cần trường này để hiển thị bất kỳ thứ gì (theo mặc định, nó hiển thị các sản phẩm được thêm gần đây). Để tránh điều đó, chỉ cần chọn “Hide Widget if > Query Is Empty” từ danh sách thả xuống để ẩn truy vấn trong những trường hợp như vậy. Bạn cũng có thể chọn “Ẩn nếu không có tùy chọn liên quan” và trong trường hợp danh sách không hiển thị trừ khi có bất kỳ sản phẩm liên quan nào đáp ứng truy vấn đã đặt.
Thêm sản phẩm liên quan bằng ID sản phẩm
Một cách khác để hiển thị các sản phẩm liên quan là sử dụng ID sản phẩm. Để làm điều đó, xin vui lòng làm theo các bước được mô tả dưới đây. Các bước làm cũng tương tự như trên:
- Trước tiên, vui lòng tạo một listing item mới để sử dụng khi bạn hiển thị các sản phẩm liên quan bằng JetEngine.
- Chỉnh sửa lại đoạn mã trong tệp Functions.php ở trên, thay thế toàn bộ SKU thành ID còn lại giữ nguyên
- Tạo một hộp meta mới (tương tự như hộp meta có sẵn trong mẫu dưới dạng JSON cho SKU). Ví dụ: chúng ta có thể tạo một hộp meta mới với ‘danh sách sản phẩm liên quan’ ID và ở đây thêm một bộ lặp với trường Loại văn bản và đặt tên cho nó ‘ID sản phẩm’.
3. Bây giờ, hãy điều hướng đến các bài đăng mà chúng tôi sẽ thêm các sản phẩm liên quan bằng ID. Điền ID sản phẩm vào các trường tương ứng.
Bạn có thể xem ID của từng sản phẩm bằng cách di chuột qua từng sản phẩm trên “Sản phẩm > Tất cả sản phẩm” trong Bảng điều khiển WordPress.
4. Sau đó, mở mẫu Bài đăng để chỉnh sửa và tại đây thả tiện ích Listing Grid vào cấu trúc của trang.
5. Tại General tab, chỉ định mẫu cho sản phẩm bạn đã tạo bằng JetEngine.
6. Mở khối Posts Query và tại đây thêm một mục mới bằng cách nhấp vào nút “Add Item”.
7. Chọn “Posts & Author parameters” trong danh sách thả xuống tại ô Type và tại ô Include post ID nhấn vào biểu tượng Dynamic Tag > Macro > Chọn Jets_Related_Products.
8. Bây giờ các sản phẩm liên quan được hiển thị cho bài viết. Và bạn cũng có thể điều chỉnh khả năng hiển thị của danh sách sản phẩm trong khối “Visibility Widget”.
Hy vọng hướng dẫn này sẽ giúp bạn thêm các sản phẩm liên quan vào các trang Single Post được xây dựng bằng Elementor, giúp bạn tăng lượt chuyển đổi trên Website của bạn.
