Nhiều site cần hiển thị lượt xem wordpress trong sản phẩm nhưng rong WordPress lại không hỗ trợ sẵn phần này. Do đó nếu muốn có bạn phải cài thêm các plugin khác gây tình trang nhiều plugin quá sẽ gây nặng site, tốn tài nguyên của host. Trong bài viết này mình sẽ giới thiệu đến bạn đếm lượt xem và hiển thị ra trong sản phẩm số view của sản phẩm đó mà không cần dùng đến plugin. Ở bài viết này mình sẽ hướng dẫn làm trên theme Flatsome đang trend ở mã nguồn WP hiện nay.

Thêm code đếm và hiển thị số lượt xem sản phẩm
Bước 1: Chèn code đếm lượt xem vào cuối file function.php của theme Flatsome. Lưu ý chỉ nên sử dụng child theme để sau này nâng cấp đỡ gặp vấn đề do update nó sẽ ghi đè những gì mình custom ở function.php của theme.
//code lấy lượt xem function getPostViews($postID){ $count_key = 'post_views_count'; $count = get_post_meta($postID, $count_key, true); if($count==''){ delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key, '0'); return "01 lượt xem"; } return $count.' lượt xem'; } // code đếm lượt xem function setPostViews($postID) { $count_key = 'post_views_count'; $count = get_post_meta($postID, $count_key, true); if($count==''){ $count = 0; delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key, '0'); }else{ $count++; update_post_meta($postID, $count_key, $count); } } // code hiển thị số lượt xem trong dashboard add_filter('manage_posts_columns', 'posts_column_views'); add_action('manage_posts_custom_column', 'posts_custom_column_views',5,2); function posts_column_views($defaults){ $defaults['post_views'] = __('Views'); return $defaults; } function posts_custom_column_views($column_name, $id){ if($column_name === 'post_views'){ echo getPostViews(get_the_ID()); } }
Bước 2: Tìm file: flatsomewoocommercecontent-single-product.php thêm vào dòng 22 đoạn sau :
<?php setPostViews(get_the_ID()); ?>
Bước 3: Thêm đoạn code sau vào file function.php như ở bước 1:
function action_woocommerce_single_product_summary( ) {
echo '';
echo getPostViews(get_the_ID());
echo '';
}
add_action( 'woocommerce_single_product_summary', 'action_woocommerce_single_product_summary', 5, 0 );
Bước 4: Style css cho nó để hiển thị đẹp hơn:
.luot-xem:before { content: "f06e"; color: #f96e5b; display: inline-block; font-size: 14px; font-family: 'FontAwesome'; margin: auto; padding: 5px; } span.luot-xem { color: #f96e5b; }
Sau khi add code xong các bạn clear cache rồi vào kiểm tra lại xem đã hiển thị chưa nhé
Cảm ơn các bạn đã đọc, hãy chia sẻ bài viết nếu có ích nhé!
- Thiết kế web giá rẻ tphcm chỉ từ 2,999,000đ
- Báo giá thiết kế web số 1 Hà Nội
- Thiết Kế Website tại Tuệ Lâm Soft Nhiều Ưu Đãi Cho Doanh Nghiệp
- Thiết kế website tại Hưng Yên 2020
- Code hiển thị trước và sau giá woocommerce
- Giá thiết kế website mới nhất năm nhiều [ƯU ĐÃI] khủng 2021 xu hướng mới!!!
- Cách Viết Bài Chuẩn SEO Shopee: Bí Quyết Tăng Doanh Số Hiệu Quả
- Các Trang Đi Backlink Uy Tín: Tăng Thứ Hạng Website Hiệu Quả
- Hướng dẫn setup smtp để gửi email không cần plugin
- DỊCH VỤ THIẾT KẾ WEBSITE TẠI HÀ NỘI
- Thiết kế website tại Đắk Lắk 2020
- Thiết kế website tại Quảng Ninh 2020