[ Hướng dẫn tạo sản phẩm đã xem trong Woocommerce ]

Trong woocommerce họ đã thiết kế sẵn widget hỗ trợ hiển thị sản phẩm đã xem nhưng chỉ có thể hiển thị ở trang chi tiết và giao diện, vị trí lại không như bạn muốn. Ở bài viết này Phong Mỹ Design sẽ hướng dẫn tạo sản phẩm đã xem trong Woocommerce tùy chỉnh dành cho bạn, cùng theo dõi nhé.

Hướng dẫn tạo sản phẩm đã xem trong Woocommerce

Để tạo sản phẩm đã xem trong Woocommerce chúng ta cần 2 giai đoạn, đầu tiên sẽ tạo Cookies lưu trữ id các sản phẩm đã xem, sau là code hiển thị giao diện.

Khởi tạo cookies lưu trữ ID sản phẩm

Bạn thêm đoạn code này vào functions.php của giao diện đang sử dụng

//TẠO COOKIES
function set_cookies_viewed_phongmyvn()
{
    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) > 10) { //chỉ cho phép lưu tối đa 10 sản phẩm
        array_shift($viewed_products);
    }
    wc_setcookie('woocommerce_recently_viewed', implode('|', $viewed_products));
}
add_action('wp', 'set_cookies_viewed_phongmyvn');

Tạo giao diện hiển thị

Ở đây chúng ta có 2 cách để sử dụng, cách đầu tiên sử dụng shortcode mặc định của Woocommerce và shortcode của Flatsome. Tất nhiên đoạn code này sẽ liền dưới đoạn code tạo Cookies bên trên.

Ở cách 1, mình sử dụng hook woocommerce_after_single_product_summary để hiển thị danh sách sản phẩm đã xem, bạn có thể sử dụng Hook khác cũng được nhé – Xem danh sách hook. Nếu bạn muốn sử dụng cách 1 này ở các trang khác thì có thể xem thêm các hook của các trang như danh mục sản phẩm Woocommerce hoặc bất cứ Hook nào trên WordPress và thay thế vào.

//CÁCH 1 THÊM SP ĐÃ XEM VÀO CHI TIẾT SẢN PHẨM = SHORTCODE
add_action('woocommerce_after_single_product_summary','show_viewed_product_phongmyvn',1);

function show_viewed_product_phongmyvn(){
    $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="6" ids="' . implode(',', $viewed_products) . '"]');
                //Dành cho riêng theme Flatsome
                echo do_shortcode('[ux_products style="normal" columns="6" slider_nav_style="circle" ids="' . implode(',', $viewed_products) . '"]'); 
            }
        ?>
    </div>
</div>
<?php
}

Ở cách 2 này, mình sử dụng code wp_query + lấy giao diện mặc định của Woocommerce luôn nên bạn có thể bê đi đâu tùy thích, chỉ việc gắn code vào nơi cần hiển thị. 

// CÁCH 2 - THÊM VIEW = TEMPLATE PART MẶC ĐỊNH CỦA 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 VỪA 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();

Thành phẩm

Trên đây là bài Hướng dẫn tạo sản phẩm đã xem trong Woocommerce, chúc bạn thành công. Để xem thêm nhiều Thủ Thuật WordPress hay khác hãy ghé thăm blog thường xuyên nhé.

Nếu bạn đang cần tìm một đơn vị hỗ trợ thiết kế website chuẩn SEO chuyên nghiệp thì có thể liên hệ Phong Mỹ Design theo thông tin bên dưới để được hỗ trợ tư vấn chi tiết.