Người Viết : ViKiMi Editor
Thực hiện tuỳ chỉnh hiển thị Star Rating của sản phẩm Tại trang Sản Phẩm của WooCommerce
Thực hiện Customize thông tin Đánh Giá sản phẩm đến từ khách hàng, tại trang sản phẩm (Single Product Page) được WooCommerce cho phép. Điều này giúp một Website buôn bán Online có thể có thiết kế và chiến dịch Marketing, đồng thời mở rộng thêm khách hàng tiềm năng. Các thiết kế tuỳ chỉnh mang lại cho Shop Online một khả năng Tương tác lớn hơn, cuốn hút khách hàng.
Tuỳ chỉnh thông tin Customer Reviews đem lại rất nhiều lợi ích, cũng là cách dễ dàng nhất nhắc nhở khách hàng có thể mua lại các sản phẩm khác từ Shop, thông qua các chiến dịch Marketing.
+ Nếu bạn thắc mắc có dễ dàng không?
+ Câu trả lời : Thật dễ dàng và nhanh chóng để có những gì cần thiết
+ Nội dung dưới đây sẽ giúp bạn thực hiện tuỳ chỉnh thông tin Customer Reviews
Chúng ta có trang hiển thị sản phẩm được thiết kế tại File :
wp-content\ plugins\ woocommerce\ templates\ content-single-product.php
+ Tại đây chúng ta cần chú ý đoạn code sau :
<div class="summary entry-summary"> <?php /** * Hook: woocommerce_single_product_summary. * * @hooked woocommerce_template_single_title - 5 * @hooked woocommerce_template_single_rating - 10 * @hooked woocommerce_template_single_price - 10 * @hooked woocommerce_template_single_excerpt - 20 * @hooked woocommerce_template_single_add_to_cart - 30 * @hooked woocommerce_template_single_meta - 40 * @hooked woocommerce_template_single_sharing - 50 * @hooked WC_Structured_Data::generate_product_data() - 60 */ do_action( 'woocommerce_single_product_summary' ); ?> </div>
Không khó để nhận ra Hook sử dụng :
– woocommerce_single_product_summary
& Chức năng được thực hiện là :
– woocommerce_template_single_rating & Mức ưu tiên là 10
Vậy chúng ta có thể có những Cách nào để tuỳ chỉnh Customer Reviews tại trang Sản Phẩm. Chúng có 2 cách cơ bản để thực hiện công việc này. Đây là 2 cách mà chúng ta có thể thực hiện tại thư mục Theme kích hoạt (Bao gồm cả Child Theme)
CÁCH 1 : Thực hiện Customize tiêu đề sản phẩm bằng cách sử dụng Hook được cung cấp bởi WooCommerce.
Chúng ta sẽ xoá Chức năng mặc định đã thêm vào Hook & thực hiện thêm mới chức năng tuỳ chỉnh của chúng ta.
Chức năng mới : Thực hiện kiểm tra nếu không có Reviews nào đến từ Khách Hành thì sẽ hiển thị “Ưu Đãi : Mua Hàng + Đánh Giá”. Ngược lại, sẽ hiển thị Reviews đến từ khách hàng.
Tại Function.php thực hiện đoạn thêm đoạn mã sau :
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating_custom', 10); function woocommerce_template_single_rating_custom() { global $product; if ( ! wc_review_ratings_enabled() ) { return; } $rating_count = $product->get_rating_count(); $review_count = $product->get_review_count(); $average = $product->get_average_rating(); if ( $rating_count <= 0 ) { $permalink = $product->get_permalink(); echo sprintf('<p><a href="%s"> <span>Ưu Đãi</span> : Mua Hàng + Đánh Giá! </a></p>', $permalink.'#tab-reviews'); }else{ echo '<div class="woocommerce-product-rating">'; /** Hiển thị Stars Rating **/ echo wc_get_rating_html( $average, $rating_count ); if ( comments_open() ){ echo "<a href=\"#reviews\" class=\"woocommerce-review-link\" rel=\"nofollow\">(". printf( _n( '%s customer review', '%s customer reviews', $review_count, 'woocommerce' ), '<span class="count">' . esc_html( $review_count ) . '</span>' ) . ")</a>"; } echo '</div>'; } }
Hình Ảnh Kết Quả :
CÁCH 2 : Thực hiện Ghi đè File thiết kế hiển thị Customer Reviews.
File mặc định của WooCommerce là :
wp-content/ plugins /woocommerce /templates /single-product /rating.php
Chúng ta có thể ghi đè File này bằng cách : Ghi đè tại Folder WooCommerce của Theme đang kích hoạt.
Chúng ta Tạo File : Yourtheme / woocommerce / single-product / rating.php
Nếu bạn muốn biết các thông tin chi tiết việc thực hiện ghi đè các Template của WooCommerce (Hãy tham khảo tại đây)
Nội dung Code của rating.php như sau :
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
global $product;
if ( ! wc_review_ratings_enabled() ) {
return;
}
$rating_count = $product->get_rating_count();
$review_count = $product->get_review_count();
$average = $product->get_average_rating();
if ( $rating_count > 0 ) : ?>
<div class="woocommerce-product-rating">
<?php echo wc_get_rating_html( $average, $rating_count ); // WPCS: XSS ok. ?>
<?php if ( comments_open() ) : ?>
<?php //phpcs:disable ?>
<a href="#reviews" class="woocommerce-review-link" rel="nofollow">(<?php printf( _n( '%s customer review', '%s customer reviews', $review_count, 'woocommerce' ), '<span class="count">' . esc_html( $review_count ) . '</span>' ); ?>)</a>
<?php // phpcs:enable ?>
<?php endif ?>
</div>
<?php else:
$permarlink = get_permalink($product->get_id());
printf('<a href="%s">Be the first to review</a>', $permarlink.'#tab-reviews');
?>
<?php endif; ?>
+ Kết quả công việc chúng ta tạo ra cũng tương tự như trên.
+ Như vậy, Chúng ta đã có thể có 2 cách dễ dàng để tuỳ chỉnh thông tin Customer Reviews
Cách Customize thông tin Customer Reviews (Đánh giá của khách hàng) cho Sản Phẩm của WooCommerce thật dễ dàng thực hiện và nếu bạn muốn tạo chiến dịch quảng cáo đi kèm gói bán hàng thì đây chính là cách để thực hiện. Tạo nên tương tác giữa cửa hàng và Khách Hàng.
Nếu bạn muốn thiết kế một Website thương mại điện tử với WooCommerce thì việc bạn phải tạo các tuỳ chỉnh bằng cách sử dụng Hook là điều gần như bắt buộc. Đồng thời bạn ghi đè các Template của WooCommerce cũng là một phương án tốt có thể thực hiện được.
Với việc tuỳ chỉnh trang hiển thị sản phẩm ( content-single-product.php ) thì bạn luôn cần xem tại File này có thể chỉnh sửa bằng cách sử dụng các Hook nào hoặc có thể ghi đè các Template nào. Chỉ cần tuân thủ những gì WooCommerce cung cấp cho bạn.
