Thủ thuật Theme Flatsome, Thủ thuật wordpress

Hướng Dẫn Tạo Tính Năng “Sản Phẩm Đã Xem” Cho Flatsome & Tất Cả Các Theme WordPress

Đăng vào Tháng 2 17, 2025 bởi admin

admin

17/02/2025

8 Phút đọc

47 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Giới thiệu về tính năng sản phẩm đã xem trong WordPress

Chức Năng Sản Phẩm Đã Xem Trong WordPress Là Gì?

Tính năng “Sản phẩm đã xem gần đây” trong WordPress, đặc biệt là với các website sử dụng WooCommerce, là chức năng giúp cho phép hiển thị danh sách các sản phẩm mà khách hàng đã truy cập trước đó. Mỗi khi người dùng ghé thăm trang chi tiết sản phẩm, hệ thống sẽ tự động lưu lại thông tin thông qua cookie hoặc session.

Hướng Dẫn Tạo Tính Năng "Sản Phẩm Đã Xem" Cho Flatsome & Tất Cả Các Theme WordPress

Khi người dùng tiếp tục duyệt website hoặc quay lại sau đó, họ sẽ thấy danh sách sản phẩm đã xem gần đây ở các vị trí như trang chủ, sidebar hoặc footer, giúp họ dễ dàng tìm lại những sản phẩm yêu thích mà không cần thực hiện lại quá trình tìm kiếm.

Trên các website bán hàng WordPress, đặc biệt với các giao diện phổ biến như Flatsome, tính năng này không chỉ giúp cải thiện trải nghiệm người dùng (UX) mà còn gia tăng tỷ lệ chuyển đổi (CRO). Khi khách hàng có thể nhanh chóng quay lại các sản phẩm đã xem, họ sẽ dễ dàng đưa ra quyết định mua sắm hơn, từ đó thúc đẩy doanh số bán hàng.

Ngoài ra, tính năng này còn mang lại lợi ích to lớn trong việc tối ưu SEO WordPress. Bằng cách giữ chân khách truy cập lâu hơn và tạo ra các liên kết nội bộ (internal link) tự động, công cụ tìm kiếm như Google sẽ đánh giá cao và ưu tiên hiển thị trang web của bạn trên các kết quả tìm kiếm.

Trong bài viết này, chúng tôi sẽ hướng dẫn chi tiết cách triển khai tính năng sản phẩm đã xem gần đây cho Flatsome và mọi theme WordPress khác, đảm bảo hoạt động mượt mà và đạt hiệu suất SEO tối ưu nhất.

Lợi ích của việc thêm tính năng sản phẩm đã xem vào WordPress

Tăng trải nghiệm người dùng: Người dùng có thể dễ dàng quay lại các sản phẩm họ quan tâm mà không mất thời gian tìm kiếm lại.
Tăng tỉ lệ chuyển đổi: Việc nhắc lại những sản phẩm đã xem giúp khách hàng đưa ra quyết định mua hàng nhanh chóng hơn.
Tối ưu SEO Onpage: Việc hiển thị sản phẩm đã xem gần đây giúp tăng cường internal link, giúp Google dễ dàng thu thập dữ liệu và cải thiện thứ hạng từ khóa.

Cách tạo tính năng sản phẩm đã xem cho Flatsome & WordPress

Dưới đây là các bước chi tiết để tạo tính năng sản phẩm đã xem bằng cách sử dụng cookie trong WordPress.

Bước 1: Tạo cookie lưu trữ sản phẩm đã xem

Đoạn mã dưới đây sẽ thiết lập cookie khi người dùng truy cập trang chi tiết sản phẩm. Bạn hãy thêm vào tệp functions.php của theme (ưu tiên Child Theme để tránh mất code khi cập nhật theme).

// Thiết lập cookie lưu trữ sản phẩm đã xem
function muathemewpgiare_set_recently_viewed_product() {
    if (!is_singular('product')) {
        return; // Chỉ chạy trên trang chi tiết sản phẩm
    }

    global $post;

    // Kiểm tra cookie hiện tại
    $viewed_products = isset($_COOKIE['muathemewpgiare_recently_viewed']) ? explode('|', wp_unslash($_COOKIE['muathemewpgiare_recently_viewed'])) : array();

    // Loại bỏ ID trùng lặp nếu có
    $viewed_products = array_diff($viewed_products, array($post->ID));

    // Thêm sản phẩm hiện tại vào đầu mảng
    array_unshift($viewed_products, $post->ID);

    // Giới hạn số lượng sản phẩm đã xem (ví dụ: 10 sản phẩm gần nhất)
    $viewed_products = array_slice($viewed_products, 0, 10);

    // Lưu cookie trong 30 ngày
    wc_setcookie('muathemewpgiare_recently_viewed', implode('|', $viewed_products), time() + 30 * DAY_IN_SECONDS);
}
add_action('wp', 'muathemewpgiare_set_recently_viewed_product');

// Thiết lập cookie lưu trữ sản phẩm đã xem

function muathemewpgiare_set_recently_viewed_product() {

if (!is_singular('product')) {

return; // Chỉ chạy trên trang chi tiết sản phẩm

}

global $post;

// Kiểm tra cookie hiện tại

$viewed_products = isset($_COOKIE['muathemewpgiare_recently_viewed']) ? explode('|', wp_unslash($_COOKIE['muathemewpgiare_recently_viewed'])) : array();

// Loại bỏ ID trùng lặp nếu có

$viewed_products = array_diff($viewed_products, array($post->ID));

// Thêm sản phẩm hiện tại vào đầu mảng

array_unshift($viewed_products, $post->ID);

// Giới hạn số lượng sản phẩm đã xem (ví dụ: 10 sản phẩm gần nhất)

$viewed_products = array_slice($viewed_products, 0, 10);

// Lưu cookie trong 30 ngày

wc_setcookie('muathemewpgiare_recently_viewed', implode('|', $viewed_products), time() + 30 * DAY_IN_SECONDS);

}

add_action('wp', 'muathemewpgiare_set_recently_viewed_product');

Bước 2: Tạo shortcode hiển thị sản phẩm đã xem gần đây

Sau khi thiết lập cookie, chúng ta cần tạo một shortcode để hiển thị các sản phẩm đã xem.

Thêm đoạn mã này vào functions.php để tạo shortcode:

// Tạo shortcode hiển thị sản phẩm đã xem gần đây
function muathemewpgiare_recently_viewed_shortcode() {
    // Lấy danh sách sản phẩm từ cookie
    $viewed_products = isset($_COOKIE['muathemewpgiare_recently_viewed']) ? explode('|', wp_unslash($_COOKIE['muathemewpgiare_recently_viewed'])) : array();

    // Kiểm tra nếu không có sản phẩm đã xem
    if (empty($viewed_products)) {
        return '<p>Không có sản phẩm nào bạn đã xem gần đây.</p>';
    }

    // Đảm bảo chỉ lấy các ID hợp lệ
    $viewed_products = array_filter(array_map('absint', $viewed_products));

    // Hiển thị danh sách sản phẩm
    return do_shortcode('[products limit="8" columns="4" ids="' . implode(',', $viewed_products) . '"]');
}
add_shortcode('muathemewpgiare_recently_viewed', 'muathemewpgiare_recently_viewed_shortcode');

// Tạo shortcode hiển thị sản phẩm đã xem gần đây

function muathemewpgiare_recently_viewed_shortcode() {

// Lấy danh sách sản phẩm từ cookie

$viewed_products = isset($_COOKIE['muathemewpgiare_recently_viewed']) ? explode('|', wp_unslash($_COOKIE['muathemewpgiare_recently_viewed'])) : array();

// Kiểm tra nếu không có sản phẩm đã xem

if (empty($viewed_products)) {

return '<p>Không có sản phẩm nào bạn đã xem gần đây.</p>';

}

// Đảm bảo chỉ lấy các ID hợp lệ

$viewed_products = array_filter(array_map('absint', $viewed_products));

// Hiển thị danh sách sản phẩm

return do_shortcode('[products limit="8" columns="4" ids="' . implode(',', $viewed_products) . '"]');

}

add_shortcode('muathemewpgiare_recently_viewed', 'muathemewpgiare_recently_viewed_shortcode');

Bước 3: Hiển thị sản phẩm đã xem ở vị trí mong muốn

Sau khi tạo shortcode, bạn có thể đặt shortcode này ở bất kỳ đâu trên website:

Ví dụ: Để hiển thị sản phẩm đã xem trên trang chủ, trang bài viết, hoặc trang sản phẩm, hãy chèn dòng sau vào nơi bạn muốn hiển thị:

[muathemewpgiare_recently_viewed]

1	[muathemewpgiare_recently_viewed]

Bạn cũng có thể thêm shortcode trực tiếp vào widget, footer, sidebar, hoặc bất kỳ khu vực nào hỗ trợ shortcode.

Bước 4: Tùy chỉnh số lượng sản phẩm đã xem hiển thị

Nếu muốn thay đổi số lượng sản phẩm hiển thị, bạn chỉnh sửa thông số limit="8" trong hàm do_shortcode().
Ví dụ: Hiển thị 12 sản phẩm đã xem gần đây:

return do_shortcode('[products limit="12" columns="4" ids="' . implode(',', $viewed_products) . '"]');

1	return do_shortcode('[products limit="12" columns="4" ids="' . implode(',', $viewed_products) . '"]');

Kết luận

Bạn đã hoàn thành việc tạo tính năng sản phẩm đã xem gần đây cho Flatsome và tất cả các theme WordPress khác.

Tính năng này không chỉ giúp nâng cao trải nghiệm người dùng mà còn hỗ trợ mạnh mẽ cho chiến lược SEO bằng cách tăng thời gian người dùng ở lại trang và cải thiện cấu trúc liên kết nội bộ.

Nếu bạn gặp khó khăn trong quá trình triển khai hoặc muốn tối ưu thêm, hãy để lại bình luận bên dưới để được hỗ trợ nhanh chóng.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Hướng dẫn code vòng quay may mắn wordpress cực đẹp

Để tạo một vòng quay may mắn (Lucky Wheel) trên trang web WordPress, bạn có thể sử dụng mã PHP dưới đây. Bài viết này...
Hướng dẫn code chức năng di chuột vào ảnh này sẽ ra ảnh khác

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo hiệu ứng di chuột vào ảnh để hiển thị một ảnh khác, một...
Hướng Dẫn Code Chức Năng Điểm Danh Đủ Số Ngày Để Đọc Nội Dung Bài Viết WordPress

Trong bài viết này, chúng ta sẽ hướng dẫn cách tạo một chức năng điểm danh cho bài viết trên WordPress. Mục đích của chức...
Hướng Dẫn Code Tạo Sản Phẩm Thường Mua Cùng Với ACF và WooCommerce

Mục LụcGiới thiệu về tính năng sản phẩm đã xem trong WordPressChức Năng Sản Phẩm Đã Xem Trong WordPress Là Gì?Lợi ích của việc thêm...
Hướng Dẫn Chặn Click Chuột Phải và Sao Chép Nội Dung Trong WordPress

Chặn Click Chuột Phải và Ngăn Sao Chép Nội Dung Trong WordPress là một biện pháp bảo vệ nội dung website rất hữu ích. Điều...
Sharecode gửi email nếu ai đăng nhập vào trang admin wordpress (Phần 1)

Nếu bạn đang quản trị một trang web WordPress và muốn tăng cường bảo mật, việc theo dõi những lần đăng nhập vào trang quản...
Cách Vô Hiệu Hóa Lazy Load Hình Ảnh Mặc Định Trong WordPress 5.5

Kể từ phiên bản 5.5, WordPress đã tích hợp sẵn tính năng lazy load hình ảnh nhằm cải thiện tốc độ tải trang. Đây là...
Tối Ưu Tốc Độ Website Lazy Load Ảnh Nền WordPress

Mục LụcGiới thiệu về tính năng sản phẩm đã xem trong WordPressChức Năng Sản Phẩm Đã Xem Trong WordPress Là Gì?Lợi ích của việc thêm...
Hướng Dẫn Tạo Carousel 3D Trong WordPress Bằng Shortcode

Mục LụcGiới thiệu về tính năng sản phẩm đã xem trong WordPressChức Năng Sản Phẩm Đã Xem Trong WordPress Là Gì?Lợi ích của việc thêm...
Hướng dẫn cách Chặn Index Subpages Trong WordPress Để Tối Ưu SEO

Trong quá trình làm SEO cho website WordPress, việc để các subpages (trang con của phân trang) bị Google index có thể gây ra vấn...
Hướng dẫn tạo tài khoản Admin WordPress thông qua theme

Vì một lý do nào đó, bạn có thể bị mất quyền truy cập vào tài khoản Admin WordPress của mình. Nếu không am hiểu...
Sharecode Hướng Dẫn Tạo Shortcode Kiểm Tra Đơn Hàng Trong WordPress

Nếu bạn đang sử dụng WooCommerce và muốn khách hàng dễ dàng kiểm tra trạng thái đơn hàng của họ ngay trên website, hãy sử...
Hướng dẫn sử dụng Flatsome Studio

Flatsome Studio là một công cụ mạnh mẽ có sẵn trên tất cả các trang, bài đăng và khối mà UX Builder hỗ trợ. Nó...
Hướng dẫn code chức năng xem đủ thời gian để hiển thị nội dung trong wordpress

Mục LụcGiới thiệu về tính năng sản phẩm đã xem trong WordPressChức Năng Sản Phẩm Đã Xem Trong WordPress Là Gì?Lợi ích của việc thêm...
Hướng Dẫn Tạo Chức Năng Gửi Link Tải Về Qua Email Trong WordPress

Trong bài viết này, chúng ta sẽ xây dựng một chức năng cho phép người dùng tải về một file hoặc tài liệu sau khi...
Loại bỏ Akismet CSS để tăng tốc độ load

Gần đây, Akismet đã âm thầm chèn một đoạn CSS trực tiếp vào mã HTML của WordPress nhằm hỗ trợ hiển thị widget thống kê...