Tạo đánh giá để khách hàng truy cập vào website có trải nghiệm tốt hơn. Đó cũng là một trong những điểm cần tối ưu cho website.
Để làm được như hình demo thì bạn cài plugin sau. Mình thấy cũng khá là uy tín với trên 50k+ cài đặt rùi.
Đương nhiên với chức năng như hình demo thì hoàn toàn miễn phí. (nghe là thấy hấp dẫn rùi)
Okie sau khi cài plugin kia xong và kích hoạt plugin đó thì bạn cấu hình tiếp cơ bản như hình mình chia sẻ bên dưới nha.
Bước 1: Tạo 1 UX block. chuyển qua giao diện UX Builder. Tên đặt như mình cho dễ nha. (site review cho dep)
Tạo element với tab.
Sau đó tinh chỉnh chi tiết từng element như mình ở đây nha.
Tab 1: Tab panel là HTML Với code là:
[site_reviews_summary][site_reviews display=”2″ pagination=”ajax”]
Giải nghĩa tí khúc này:
[site_reviews_summary]: là hiển thị biểu đồ %
[site_reviews display=”2″ pagination=”ajax”]: là hiển thị chi tiết đánh giá. Số 2 là sẽ hiện thị 1 trang có 2 đánh giá. Bạn có thể tăng hoặc giảm số đánh giá hiện thị cho 1 trang.
Tab 2: Tab panel là HTML với code là:
[site_reviews_form]
code đó khi ra ngoài trang website nó sẽ hiển thị ra như vầy
Xong bạn lưu UX block đó lại thì sẽ có cái tên code như vầy.
OKie rui. Giờ vào chỉnh file function.php. trong theme editor của wordpress. Bạn thêm nguyên đoạn code sau vào.
Xong rùi save lại. Rùi xong phần code. Bây giờ bạn tạo vài cái review để nó hiển thị ra cho đẹp nha.
Tới đây là xong rùi đã hiện review rùi đó. Tuy nhiên cái nút qua trang chưa đẹp lắm.
Mình sẽ sửa lại css cho nó đẹp hơn xíu với code sau:
/*vu2day decor pape numbers review*/
.pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
justify-content: center;
}
.pagination a.page-numbers,
.pagination span.page-numbers {
height: auto;
line-height: 1;
margin: 0;
padding: 0.6em 0.8em;
transform: scale(1);
width: auto;
border: 1px solid #000; /* Thêm viền (border) */
border-radius: 4px; /* Góc bo tròn (tuỳ chọn) */
}
Chỗ sửa css thì bạn biết rùi he.
Save lại là xong. Như vậy là phần tối ưu thêm đánh giá cho website thành công nha.
Một số hướng dẫn từ plugin(bạn chỉ cần thay link site.com thành website của bạn ở đầu là xem được nha):
link tiếng anh cơ bản: site.com /index.php?page=site-reviews-welcome&tab=getting-started
link tiếng anh chi tiết: site.com /wp-admin/edit.php?post_type=site-review&page=glsr-tools&tab=general
Còn bạn nào muốn có hình vào đánh giá nữa thì mua bản premium. Mình thì thấy dùng như vầy là tương đối đầy đủ với mình rùi.
Do là dùng plugin review bên ngoài nên không dùng tab review mặc định quả hệ thống woocommerce. Nên mình có thể tắt nó đi cho đỡ rối mắt bằng đoạn code sau:
//remove tab review mặc định woocommerce
add_filter( ‘woocommerce_product_tabs', ‘remove_reviews_tab', 98 );
function remove_reviews_tab($tabs) {
unset($tabs[‘reviews']);
return $tabs;
}
Còn bạn nào muốn thêm tí sao trên tiêu đề cho đẹp giống như mình thì thêm đoạn code sau vào function.php:
// vu2day add reviews 5 star product
remove_action( ‘woocommerce_single_product_summary', ‘woocommerce_template_single_title', 5 );
function woocommerce_add_custom_text_after_product_title(){
echo'<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<style>
.checked {
color: orange;
}
</style>
</head>
<body>
<span class=”fa fa-star checked”></span>
<span class=”fa fa-star checked”></span>
<span class=”fa fa-star checked”></span>
<span class=”fa fa-star checked”></span>
<span class=”fa fa-star-half-o checked”></span>';
the_title( ‘<h1 class=”product_title entry-title”>', $custom_text.'</h1>' );
}
add_action( ‘woocommerce_single_product_summary', ‘woocommerce_add_custom_text_after_product_title', 5);
Bonus thêm: Còn một dạng thêm hình review và may be so like thì bạn có thể tham khảo thêm video sau:
Kết thúc.
Bạn cứ làm đi làm lại sẽ hiểu quá trình tạo những UX block đó và sẽ thành thạo nhanh thôi. Chúc thành công.