Theo mô tả mặc định, đánh giá và thông tin bổ sung hiển thị trong một phần ‘tab’ trong WooCommerce. Bạn muốn hiển thị các ‘bài đánh giá’ bên ngoài khu vực ‘tab’ này một cách riêng biệt để có thêm sự tương tác và khả năng hiển thị của người dùng? Bạn có thể nhanh chóng thực hiện điều này, và nó cũng trông rất tuyệt.
Mã PHP: Phần đánh giá riêng biệt
Trong Bảng điều khiển WordPress, đi tới Giao diện> Trình chỉnh sửa chủ đề và mở tệp functions.php . Thêm mã sau vào cuối.
/**
* Remove Reviews tab
*/
add_filter( 'woocommerce_product_tabs', 'wpd_wc_remove_product_review_tab', 15 );
function wpd_wc_remove_product_review_tab( $tabs ) {
//Removing Reviews tab
if ( comments_open() ) {
unset( $tabs['reviews'] );
}
return $tabs;
}
/**
* Add custom CSS class to body tag.
* We shall use this class into the CSS
*/
add_filter( 'body_class', 'wpd_add_new_class' );
function wpd_add_new_class( $classes ) {
if( comments_open() && is_singular( 'product' ) ) {
$classes[] = 'has-reviews';
}
return $classes;
}
/**
* Add the product reviews
*/
add_action( 'woocommerce_after_single_product_summary', 'wpd_wc_add_product_reviews', 15 );
function wpd_wc_add_product_reviews() {
global $product;
if ( ! comments_open() )
return;
?>
<div class="product-reviews">
<h2 class="review-title" itemprop="headline">
<?php printf( __( 'Reviews (%d)', 'woocommerce' ), $product->get_review_count() ); ?>
</h2>
<?php call_user_func( 'comments_template', 999 ); ?>
</div>
<div class="clearfix clear"></div>
<?php
}
Mã CSS: Thêm kiểu vào phần này
Trong Bảng điều khiển WordPress, nhấp vào nút “Tùy chỉnh” (Giao diện> Tùy chỉnh) và sau đó thêm mã CSS sau vào hộp CSS bổ sung.
.has-reviews .product-reviews,
.has-reviews .woocommerce-tabs {
display: inline-block;
width: 48%;
float: left;
}
.has-reviews .woocommerce-tabs {
margin-right: 4%;
}
.has-reviews .product-reviews {
border: 1px solid #e6e6e6;
padding: 0 30px 30px;
margin-top: 20px;
}
.woocommerce-Reviews-title {
font-size: 16px;
}
.comment-reply-title {
border-top: 1px solid #e6e6e6;
display: block;
font-size: 20px;
margin-bottom: 15px;
padding-top: 25px;
}
@media only screen and (max-width: 680px) {
.has-reviews .product-reviews,
.has-reviews .woocommerce-tabs {
clear: both;
float: none;
margin-right: 0;
width: 100%;
}
.has-reviews .product-reviews {
padding: 0 20px 20px;
margin-top: 0;
}
}
Mã CSS: Người dùng chủ đề Astra
.has-reviews .product-reviews,
.has-reviews div.product .woocommerce-tabs {
display: inline-block;
width: 48%;
float: left;
}
.has-reviews .woocommerce-tabs {
margin-right: 4%;
}
.has-reviews .product-reviews {
border: 1px solid #e6e6e6;
padding: 30px;
margin-top: 20px;
}
.woocommerce-Reviews-title {
font-size: 16px;
}
.comment-reply-title {
border-top: 1px solid #e6e6e6;
display: block;
font-size: 20px;
margin-bottom: 15px;
padding-top: 25px;
}
.woocommerce.has-reviews #reviews #comments,
.woocommerce.has-reviews #reviews #review_form_wrapper {
float: none;
clear: both;
width: 100%;
padding: 0;
}
.woocommerce.has-reviews #reviews #review_form {
border: 0;
padding: 0;
}
@media only screen and (max-width: 680px) {
.has-reviews .product-reviews,
.has-reviews div.product .woocommerce-tabs {
clear: both;
float: none;
margin-right: 0;
width: 100%;
}
.has-reviews .product-reviews {
padding: 20px;
margin: 0 0 30px;
}
}