Hướng Dẫn 2 Cách Code Sản Phẩm Đã Xem Trong Woocommerce

Hướng Dẫn 2 Cách Code Sản Phẩm Đã Xem Trong Woocommerce

Sản Phẩm Đã Xem là một trong những tính năng giúp giữ chân khách hàng lại ở Website của bạn, nó giảm tỷ lệ thoát trang của khách hàng và mang đến điểm số SEO cho website cao hơn đối với bài viết sản phẩm đó.

Hãy theo dõi Series Tự Học Làm Website của Nghiện Tin Học để biết thêm nhiều mẹo hay nhé!

Bài Hướng Dẫn Cách Code Sản Phẩm Đã Xem sau đây sẽ giúp bạn tối ưu việc này một cách tốt nhất. Mặc dù Woocomerce đã tích hợp sẵn phần sản phẩm đã xem này trong code chính, nhưng những vị trí cơ bản đó lại có phần không được hay trong mắt của bạn.

sản phẩm đã xem

Với những đoạn code đơn giản sau đây, bạn hoàn toàn có thể đặt chúng ở vị trí mà bạn thích. Hãy cùng với Siêu Nghiện thực hiện ngay nhé!

Hướng Dẫn 2 Cách Code Sản Phẩm Đã Xem Trong Woocommerce

Không cần quá giỏi về code bạn vẫn có thể làm được phần này. Để tạo ra phần sản phẩm đã xem và đặt nó vào các vị trí mà bạn muốn sẽ có 2 cách như sau:

Cách 1: Sử Dụng Shortcode Thông Qua FUNCTIONS.PHP

Cách này sẽ bao gồm 2 bước, bạn chỉ cần hiểu cách thức sau đó bạn hoàn toàn có thể tự điều chỉnh vị trí

Bước 1: Tạo Cookie Lưu ID Sản Phẩm Muốn Cho Vào Phần Sản Phẩm Đã Xem

Đoạn code sẽ được đặt trong functions.php của giao diện mà bạn đang sử dụng.

⚠️ Nên sử dụng Child Theme (Theme Con) để tiện cho việc cập nhật sau này.

// Tạo Cookies SP Đã Xem //
function set_cookies_viewed_sieunghien()
{
    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) > 8) { //chỉ cho phép lưu tối đa 8 sản phẩm
        array_shift($viewed_products);
    }
    wc_setcookie('woocommerce_recently_viewed', implode('|', $viewed_products));
}
add_action('wp', 'set_cookies_viewed_sieunghien');

Bước 2: Hiển Thị Phần Sản Phẩm Đã Xem Đúng Nơi Mong Muốn

Mình sẽ dùng điểm neo (Hook) để hiện thị danh sách các sản phẩm đã xem lên vị trí neo mà mình mong muốn. Tất cả các vị trí neo khác của Woocommerce bạn có thể xem trong bài viết này.

Cụ thể hơn mình sẽ chọn điểm neo có tên là woocommerce_after_single_product_summary, để phần các sản phẩm đã xem nằm ngay dưới đoạn giới thiệu sản phẩm (Product Summary) và phía trên phần mô tả sản phẩm (Descriptions). Đây cũng là vị trí mà nhiều sàn thương mại điện tử sử dụng nhất.

Đoạn code này được mình thêm vào sau đoạn code tạo cookies bên trên.

// Thêm SP Đã Xem Vào Trước Mô Tả Sản Phẩm //
add_action('woocommerce_after_single_product_summary','show_viewed_product_sieunghien',1);
function show_viewed_product_sieunghien(){
    $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="recently_view">
    <div class="container">
        <?php
            if (!empty($viewed_products)) {
                echo '<h2>Sản Phẩm Đã Xem</h2>';
                //Dành cho theme khác
                echo do_shortcode('[products type="row" limit="8" columns="4" ids="' . implode(',', $viewed_products) . '"]');
                //Dành cho riêng theme Flatsome
                echo do_shortcode('[ux_products style="normal" columns="4" slider_nav_style="circle" ids="' . implode(',', $viewed_products) . '"]'); 
            }
        ?>
    </div>
</div>
<?php
}

⚠️ Lưu ý 1: Nếu bạn không muốn vị trí hook woocommerce_after_single_product_summary, bạn có thể chọn một vị trí hook khác bằng cách thay vị trí hook đó bằng 1 cái khác là được. vd: woocommerce_before_single_variation

⚠️ Lưu ý 2: Ở dòng 1517Nếu bạn đang sử dụng theme Flatsome thì bạn hãy xóa đoạn dành riêng cho theme khác hoặc không xóa cũng được. Nếu bạn đang dùng theme khác hãy xóa dòng dành riêng cho theme Flatsome đi là được.

Cách 2: Ứng Dụng WP-QUERY Để Tạo Sản Phẩm Đã Xem Với Giao Diện Mặc Định Của Woocommerce

Với cách này bạn có thể mang nó gắn vào bất kì một chổ nào mà bạn thích chỉ việc gắn code lên. Và cách này bạn không cần phải can thiệp vào functions.php

// Tạo Sản Phẩm Đã Xem Với Giao Diện Mặc Định Woocommerce //
global $woocommerce;
$viewed_products = ! empty( $_COOKIE['woocommerce_recently_viewed'] ) ? (array) explode( '|', $_COOKIE['woocommerce_recently_viewed'] ) : array();
$viewed_products = array_filter( array_map( 'absint', $viewed_products ) );
?>
<?php 
$query_args = array(
	'posts_per_page' => 10, // 10 san pham moi nhat
	'post_status'    => 'publish', 
	'post_type'      => 'product', 
	'post__in'       => $viewed_products, 
	'orderby'        => 'rand' //random
);
$query_args['meta_query'] = array();
$query_args['meta_query'][] = $woocommerce->query->stock_status_meta_query();
$r = new WP_Query($query_args);
if ( $r->have_posts() ) {
	?>
	<div class="recent_title"> 
		<h2>SẢN PHẨM ĐÃ XEM</h2>  
	</div>
	<?php 
	while ( $r->have_posts() ) { $r->the_post();
		get_template_part( 'template-parts/content', get_post_type() ); // call template woocommerce
	}
}; 
wp_reset_postdata();

Bên trên là bài Hướng Dẫn Cách Code Sản Phẩm Đã Xem Trong Woocommerce. Hy vọng với các thủ thuật nhỏ này, bạn sẽ làm chủ được cách vận hành website bán hàng của mình một cách tốt nhất.

MADE BY NGHIỆN TIN HỌC