默认关闭 WooCommerce 产品标签 [英] Close WooCommerce Product Tabs by default

问题描述

默认情况下，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);

解决方案

更新 - 你应该试试:

//条件显示根据选择的运输方式隐藏结帐字段add_action('wp_footer', 'close_all_product_tabs');函数 close_all_product_tabs(){//仅在单个产品页面上如果(！is_product())返回；?><脚本>jQuery(函数($){设置超时(功能(){$('#tab-description').hide( function(){$( 'li#tab-title-description' ).removeClass('active');});}, 200);});<?php}

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

经过测试并有效

<小时><块引用>

这是对作者主题结构的专门编辑，是定制的:

 jQuery(function($){jQuery(函数($){设置超时(功能(){$('#tab-description').hide( function(){$( 'li#description_tab' ).removeClass('active');});}, 200);});});

<小时>

现在在您的主题中，有一个专门用于所有内容标签的

容器，WooCommerce默认没有:

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

隐藏它您可以通过许多其他方式使用:

- `$('div.tab-panels').addClass('hidden');` 以及这个隐藏"类的一些 CSS 规则- `$('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');`

最难的是让点击事件触发这个......

By default Product Tabs in WooCommerce auto opens the first one. Is it possible to have them all closed by default, requiring you to click it to see more?

I have tried the following code, but it does not seem to do it. Perhaps there is a PHP code that does it or something simple?

I already tried this without luck:

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);

解决方案

Updated - You should try instead:

// 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
}

This code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Tested and works

---

This is an edit specifically to the authors theme structure which is customized:

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

---

Now in your theme, there is specifically a <div> container for all your content tabs, that WooCommerce don't have by default:

<div class="tab-panels">

This container has a grey border and some padding, so when you hide the description tab, it stays empty like a white flat rectangle with a grey border, which is not very nice. so you should need to hide it or to give him 0 opacity

To hide it You can handle this in many other ways using:

- `$('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');`

Once hidden, you will need to make it visible when a button is clicked (and this is the harder part):

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

The hardest thing will be to get the click event to trigger this…

这篇关于默认关闭 WooCommerce 产品标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！