使 Elementor 产品数据选项卡上的评论选项卡处于活动状态

Question

我们正在使用 Elementor Pro 和主题，并尝试设计单个产品页面模板的样式。

问题是，Elementor 只有一个独立的产品评级元素，用于显示总体评级。

除了“产品数据选项卡”之外，没有任何内容显示实际评论，其中评论保存在第三个选项卡中。

我们不需要其他选项卡，因为我们已经单独添加了这些信息，所以我用 CSS 隐藏了它们，但问题是，在页面加载时，“描述”选项卡仍然处于活动状态，而不是“评论”选项卡。

出现问题的示例页面：https://www.maxwellmelia.co.uk/shop/in-person-courses/hair-extensions-complete-training/

是否有任何自定义 JS 我可以添加到子主题中，以便默认情况下在产品页面上“评论”选项卡处于活动状态，而不是“描述”选项卡？

您可以在屏幕截图中看到，尽管描述选项卡处于隐藏状态，但它仍然处于活动状态。

我在这个平台和其他平台上搜索了文章，并直接联系了 Elementor 支持，但一无所获。

我确信对于任何有 PHP/JS 经验的人来说这都非常简单，但我一无所知......

提前非常感谢！

苏菲

(https://i.sstatic.net/Nww9Q.png)](https://i.sstatic.net/Nww9Q.png)

我尝试根据我在网上找到的内容和我用于其他目的但没有任何乐趣的代码片段，将一些不同的代码添加到子主题functions.php中。

这是我从这个 URL 得到的最接近的结果，它只是手动添加动态评论，而不是尝试编辑产品选项卡元素，但它显示了其他不相关的私人信息（例如 SUMO 付款计划），并且格式非常糟糕:

https://www.businessbloomer.com/woocommerce-display-product-reviews-custom-page-shortcode/#:~:text=PHP%20Snippet%3A%20WooCommerce%20Product%20Reviews%20Shortcode&text=php%2C% 20简单%20使用%20短代码%20%5B产品评论，想要%20到%20输出%20客户%20评论

---

/**
 * @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;
}

• 然后我使用动态字段将帖子 ID 添加到这个短代码中 - [[product_reviews id=”123″]] - 但我在 123 所在的位置放置了一个动态字段。

我也尝试过（请不要为此嘲笑我！）：

$(document).ready(function(){

    if ($('#hdnActiveTab').length > 0) {
        var tabID = "#" + $("#hdnActiveTab").val();
        $(tabID).addClass("active");
    }              

});

• 在实际的模板产品页面上我添加了自定义代码：

<input id="hdnActiveTab" type="hidden" val="reviews_tab" />

---

如果用 JS 删除选项卡会自动使剩余的选项卡处于活动状态，这看起来非常接近我所需要的：

https://stackoverflow.com/questions/58587944/remove-tabs-from-product-data-in-woocommerce

我编辑的版本：

function product ()
{
remove_tab($tabs){
unset($tabs['tab-title-description']); // it is to remove description tab
unset($tabs['tab-title-additional_information']); // it is to remove additional info tab
return($tabs);
}
add_filter('woocommerce_product_data_tabs', 'remove_tab', 10, 1);
}

但我想我需要更多的东西来让它知道它是用于 woocommerce 产品页面的？

Answer 1

您只需在functions.php 文件中使用过滤器即可对选项卡重新排序。

Misha 这里有一个片段：

https://rudrastyh.com/woocommerce/change-product-tabs-order.html