Code sản phẩm đã xem cho woocommerce

Bất kể người dùng nào khi họ vào website họ sẽ xem nhiều sản phẩm mặc dù họ mua ít hơn những gì họ xem. Đa số khách hàng xem xong rồi bỏ qua sản phẩm khác, có những khách hàng vô tình đang xem sản phẩm họ ưng ý nhưng một cách vô tình nào đó họ đã thoát trang. Hoặc cũng có thể họ muốn lưu lại những sản phẩm họ thích rồi sau đó mới xem lại một lượt, vậy làm cách nào để khách hàng có thể xem lại những sản phẩm mà họ đã xem?

Code sản phẩm đã xem cho woocommerce

Trong bài viết này mình sẽ hướng dẫn bạn cách xây dựng sản phẩm đã xem cho website của bạn để tăng tính chuyên nghiệp và giữ chân khách hàng ở lại website.

Set Cookie khi user ghé thăm trang chi tiết sản phẩm

Chèn code bên dưới vào function.php của theme (ưu tiên child theme nếu có).

function woo_set_user_visited_product_cookie()
{
    if (!is_singular('product')) {
        return;
    }
 
    global $post;
 
    if (empty($_COOKIE['woocommerce_recently_viewed'])) { 
        $viewed_products = array();
    } else {
        $viewed_products = wp_parse_id_list((array) explode('|', wp_unslash($_COOKIE['woocommerce_recently_viewed']))); 
    }
 
    $keys = array_flip($viewed_products);
 
    if (isset($keys[$post->ID])) {
        unset($viewed_products[$keys[$post->ID]]);
    }
 
    $viewed_products[] = $post->ID;
 
    if (count($viewed_products) > 22) {
        array_shift($viewed_products);
    }
 
    wc_setcookie('woocommerce_recently_viewed', implode('|', $viewed_products));
}
add_action('wp', 'woo_set_user_visited_product_cookie');

Với một ít code trên thì đã xử lý được phần cookie rồi. Tiếp tục là khởi tạo shortcode, đối với Flatsome thì em sẽ ưu tiên thêm 1 lựa chọn khác nữa là tạo thêm 1 element kéo thả vào header trong thời gian tới.

Khởi tạo shortcode sản phẩm đã xem

Code sau cũng bỏ vào function.php

add_shortcode('woo_recently_viewed_products', 'woo_2718_prod_viewed_atts');
function woo_2718_prod_viewed_atts() {
    ob_start();
    $viewed_products = !empty($_COOKIE['woocommerce_recently_viewed']) ? (array) explode('|', wp_unslash($_COOKIE['woocommerce_recently_viewed'])) : array();
    $viewed_products = array_reverse(array_filter(array_map('absint', $viewed_products)));
 
?>
    <div id="woo-recently--wrap">
 
        <div class="woo-container">
            <?php
            if (!empty($viewed_products)) {
               echo do_shortcode('[products type="row" limit="8" columns="6" ids="' . implode(',', $viewed_products) . '"]');
            } else {
                echo 'Không có sản phẩm xem gần đây';
            }
            ?>
        </div>
    </div>
 
<?php
    return ob_get_clean();
}

Ở trên mình tận dụng shortcode của woo để kéo ra cho nhanh

Columns ở dòng số 13 code trên:

1. Limit=”8″ có nghĩa là hiển thị tối qua 8 sản phẩm. -> thay số tùy bạn.
2. Columns=”6″ số cột là 6. -> thay tùy ý.

Hiển thị shortcode sản phẩm đã xem

Tiếp theo để hiển thị được sản phẩm đã xem thì bạn thêm shortcode sau vào nơi cần hiển thị, ví dụ như page!

[woo_recently_viewed_products]

Kết luận

Với một số dòng mình chia sẻ phía trên, website của bạn đã có thêm tính năng sản phẩm khách hàng vừa xem. Trông website sẽ chuyên nghiệp hơn rất nhiều.

Xem thêm: Cách thêm mục lục cho mô tả danh mục sản phẩm