Question

默认情况下，WooCommerce中的产品标签会自动打开第一个。是否可以默认关闭它们，要求您点击它以查看更多信息？

我已经尝试了以下代码，但它似乎没有这样做。也许有一个PHP代码可以做到这么简单？

我已经尝试过没有运气了：

setTimeout(function() {
    var $tabs = jQuery( '.wc-tabs, ul.tabs' ).first();
    $tabs.parent().find('#tab-description').hide();
    $tabs.parent().find( '.tab-title-description' ).removeClass('active');
}, 10);

Answer 1

已更新 - 您应该尝试：

// Conditional Show hide checkout fields based on chosen shipping methods
add_action( 'wp_footer', 'close_all_product_tabs' );
function close_all_product_tabs(){
    // Only on single product pages
    if( ! is_product() ) return;
    ?>
    <script>
        jQuery(function($){
            setTimeout(function() {
                $('#tab-description').hide( function(){
                    $( 'li#tab-title-description' ).removeClass('active');
                });
            }, 200);
        });
    </script>
    <?php
}

此代码位于活动子主题（或主题）的function.php文件中或任何插件文件中。

经过测试和工作

这是一个专门针对作者主题结构的编辑，它是自定义的：

    jQuery(function($){
        jQuery(function($){
            setTimeout(function() {
                $('#tab-description').hide( function(){
                    $( 'li#description_tab' ).removeClass('active');
                });
            }, 200);
        });
    });

现在，在您的主题中，对于所有您的内容标签，都有一个<div>容器，默认情况下WooCommerce没有：

<div class="tab-panels">

此容器有一个灰色边框和一些填充，所以当你隐藏描述选项卡时，它会像一个带有灰色边框的白色扁平矩形一样保持空白，这不是很好。所以你应该隐藏它或给他0不透明度

隐藏它您可以使用以下方法以许多其他方式处理此问题：

- `$('div.tab-panels').addClass('hidden');` and some CSS rules for this 'hidden' class
- `$('div.tab-panels').css('opacity', '0');`
- `$('div.tab-panels').css('visibility', 'hidden');`

隐藏后，您需要在单击按钮时将其显示（这是更难的部分）：

- `$('div.tab-panels').removeClass('hidden');`
- `$('div.tab-panels').css('opacity', '1');`
- `$('div.tab-panels').css('visibility', 'visible');`

最困难的事情是让click事件触发这个......

默认情况下关闭WooCommerce产品选项卡

1 个答案: