默认关闭WooCommerce产品标签 [英] Close WooCommerce Product Tabs by default
问题描述
默认情况下,WooCommerce中的产品标签"会自动打开第一个标签.默认情况下是否可以将它们全部关闭,需要您单击以查看更多信息?
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?
我尝试了以下代码,但似乎没有做到.也许有做到这一点的PHP代码还是简单的方法?
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?
我已经尝试过运气了:
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);
推荐答案
已更新-您应该尝试:
// 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文件中,也可能会出现在任何插件文件中.
经测试可正常工作
这是专门针对自定义主题的作者主题结构的
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);
});
});
现在您的主题中,专门为所有您的内容标签提供了一个<div>
容器,WooCommerce默认不提供该容器:
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">
此容器有一个灰色边框和一些填充,因此当您隐藏说明选项卡时,它会保持空白,就像带有灰色边框的白色扁平矩形一样,这不是很好.所以你应该隐藏它或给他0不透明度
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');`
最困难的事情是获取click事件以触发此事件……
The hardest thing will be to get the click event to trigger this…
这篇关于默认关闭WooCommerce产品标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!