we are using Elementor Pro and theme, and trying to style the single product page template.
The thing is, Elementor only has a standalone Product Rating element, that shows the overall rating.
There is nothing that shows the actual reviews, other than the "Product Data Tabs", where the Reviews are held in the 3rd tab.
We don't want the other tabs as we've already added that information individually, so I hid them with CSS, but the problem is, on page load, the "Description" tab is still active, instead of the Reviews tab.
Example page where issue occurs: https://www.maxwellmelia.co.uk/shop/in-person-courses/hair-extensions-complete-training/
Is there any custom JS I can add to the child theme so that by default on product pages the Reviews tab is active rather than the description tab?
You can see in the screenshot that the description tab is still acive even though it's hidden.
I've searched articles on this and other platforms, and contacted Elementor support directly, and can't get anywhere with it.
I'm sure it's very simple for any one with any experience in PHP/JS but I'm clueless...
Thank you so much in advance!
Sophie
(https://i.stack.imgur.com/Nww9Q.png)](https://i.stack.imgur.com/Nww9Q.png)
I have tried adding a few different different codes into the child theme functions.php based on what I've found online and code snippets I've used for other purposes but with no joy.
This was the closest I got, from this URL, which was to simply manually add dynamic reviews rather than trying to edit the Product Tabs Element, but it displayed other unrelated and private info (such as SUMO payment plans), and was formatted horribly:
/** * @snippet WooCommerce Product Reviews Shortcode * @how-to Get CustomizeWoo.com FREE * @author Rodolfo Melogli * @testedwith WooCommerce 3.9 * @community https://businessbloomer.com/club/ */add_shortcode( 'product_reviews', 'bbloomer_product_reviews_shortcode' );function bbloomer_product_reviews_shortcode( $atts ) { if ( empty( $atts ) ) return ''; if ( ! isset( $atts['id'] ) ) return ''; $comments = get_comments( 'post_id=' . $atts['id'] ); if ( ! $comments ) return ''; $html .= '<div class="woocommerce-tabs"><div id="reviews"><ol class="commentlist">'; foreach ( $comments as $comment ) { $rating = intval( get_comment_meta( $comment->comment_ID, 'rating', true ) ); $html .= '<li class="review">'; $html .= get_avatar( $comment, '60' ); $html .= '<div class="comment-text">'; if ( $rating ) $html .= wc_get_rating_html( $rating ); $html .= '<p class="meta"><strong class="woocommerce-review__author">'; $html .= get_comment_author( $comment ); $html .= '</strong></p>'; $html .= '<div class="description">'; $html .= $comment->comment_content; $html .= '</div></div>'; $html .= '</li>'; } $html .= '</ol></div></div>'; return $html;}- I then used dynamic field to add the post ID into this shortcode - [[product_reviews id=”123″]] -- but I put a dynamic field where 123 is.
I also tried along the lines of (please don't laugh at me for this!):
$(document).ready(function(){ if ($('#hdnActiveTab').length > 0) { var tabID = "#" + $("#hdnActiveTab").val(); $(tabID).addClass("active"); } });- and on the actual template product page I added custom code:
<input id="hdnActiveTab" type="hidden" val="reviews_tab" />This looks very close to what I need if removing the tabs with JS would automatically make the remaining tab active:
https://stackoverflow.com/questions/58587944/remove-tabs-from-product-data-in-woocommerce
My edited version:
function product (){remove_tab($tabs){unset($tabs['tab-title-description']); // it is to remove description tabunset($tabs['tab-title-additional_information']); // it is to remove additional info tabreturn($tabs);}add_filter('woocommerce_product_data_tabs', 'remove_tab', 10, 1);}But I assume I need something more in there to make it know that it's for woocommerce product pages?
