[英]How to display woocommerce product category in tabs
我正在尝试在选项卡中创建一个带有 Woocommerce 产品类别的页面。
我的选项卡菜单正在工作,但我需要在每个选项卡内容区域中对相应类别运行查询。
但是,当我单击每个选项卡时,选项卡内容会显示该类别中的所有帖子,而不是属于当前选项卡。 我没有得到出现的问题,请帮我解决问题
这是我的代码:
<?php
echo '<ul class="nav nav-tabs" role="tablist">';
$args = array(
'post_type' => 'product',
'posts_per_page' => 100,
'product_cat' => $category->slug,
'hide_empty'=> 1,
'orderby' => 'name',
'order' => 'ASC'
);
$categories = get_terms( 'product_cat', $args );;
foreach($categories as $category) {
echo '<li><a href="#' . $category->slug.'" role="tab" data-toggle="tab">' .
$category->slug.'('. $category->count .')</a></li>';
$cat_name = $category->slug;
}
echo '</ul>';
echo '<div class="tab-content">';
foreach($categories as $category) {
echo '<div class="tab-pane" id="' . $category->slug.'">';
?>
<?php
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) :
$loop->the_post();
?>
<h1><?php the_title(); ?></h1>
<?php
endwhile;
wp_reset_postdata();
?>
<?php
echo '</div>';
}
?>
问题是它显示了每个类别的所有帖子。 我坚持了..请帮忙
首先,您必须获取所有类别,然后,您必须开始一个类别循环,并在该循环内按类别获取所有产品。 检查下面的代码。
<?php
function load_scripts() {
wp_enqueue_style( 'jquery-ui-css', get_template_directory_uri().'/assets/css/jquery-ui.css', '' );
wp_enqueue_script( 'jquery-ui-js', get_template_directory_uri().'/assets/js/jquery-ui.js', array('jquery'), time() , false);
}
add_action('wp_enqueue_scripts', 'load_scripts');
function show_product_categories_tabs( $args ){
$atts = shortcode_atts( array(
'' => '',
), $atts, 'show_product_categories_tabs' );
ob_start();
?>
<div id="tabs">
<ul>
<?php
$categories = get_terms( array(
'taxonomy' => 'product_cat',
'hide_empty' => 1,
) );
foreach ( $categories as $key => $cat ) { ?>
<li><a href="#<?php echo $cat->slug; ?>"><?php echo $cat->name; ?></a></li>
<?php } ?>
</ul>
<?php foreach ( $categories as $key => $cat ) {
$args = array(
'post_type' => 'product',
'posts_per_page' => 100,
'product_cat' => $cat->slug,
'hide_empty' => 1,
'orderby' => 'name',
'order' => 'ASC'
);
?>
<div id="<?php echo $cat->slug; ?>">
<?php
$products = new WP_Query( $args );
if( $products->have_posts() ) : while ( $products->have_posts() ) : $products->the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
<?php } ?>
</div>
<script>
( function( $ ) {
$( "#tabs" ).tabs();
$("#tabs ul li").delegate('a', 'click', function(e){
e.preventDefault();
return false;
});
} )(jQuery);
</script>
<?php
$html = ob_get_clean();
return $html;
}
add_shortcode( 'show_product_categories_tabs', 'show_product_categories_tabs', 10, 1 );
?>
测试和工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.