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

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

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
Hướng dẫn tạo sản phẩm đã xem trong Woocommerce

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

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

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.

Thông tin liên hệ, hỗ trợ trực tuyến - PHONG MỸ DESIGN

CÔNG TY TNHH TMDV PHONG MỸ

Hotline / Zalo: 0973.01.02.58 - 0987.34.52.58

Email: info@phongmy.vn

Website: www.phongmy.vn

Địa chỉ: 160/10A Đ.ấp Thới Tây 2, ấp Thới Tây 2, Xã Tân Hiệp,H.Hóc Môn, TP.HCM

MST: 0316093547

BẠN CẦN TƯ VẤN THÊM ?

Luôn đặt mình vào vị trí của khách hàng nên chúng tôi hiểu rằng: hỗ trợ thông tin chính xác & nhanh chóng là điều cực kỳ quan trọng.
Nếu bạn cần sự trợ giúp chúng tôi sẵn sàng phục vụ.