By default description, reviews and additional information show in one ‘tabs’ section in WooCommerce. Want to display ‘reviews’ outside this ‘tabs’ area separately for more user engagement and visibility? You can quickly implement this, and it also looks cool.
Preview: Reviews outside WooCommerce Tabs
PHP Code: Separate Reviews section
In the WordPress Dashboard, go to Appearance > Theme Editor and open the functions.php file. Add the following code at the end.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/** * 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 } |
CSS Codes: Adding Style to this section
In the WordPress Dashboard, click on the “Customize” button (Appearance > Customize) and then add the following CSS code into the Additional CSS box.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.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; } } |
CSS code: Astra theme users
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
.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; } } |
Hello, Please how can I make this only active in mobile devices?
Thanks