HomeKiếm tiền online

Tạo Đánh giá sản phẩm Woocommerce POD

Like Tweet Pin it Share Share Email

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)

Site Reviews

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 panelHTML 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 panelHTML 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.

//code review san pham
//Để hiển thị shortcode [block id=”site-review-cho-dep”] trên trang “Related Products”
add_action( ‘woocommerce_after_single_product_summary', ‘custom_related_products_content' );
function custom_related_products_content() {
    // Hiển thị shortcode [block id=”site-review-cho-dep”]
    echo do_shortcode(‘[block id=”site-review-cho-dep”]');
}

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.

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *