如何动态 bootstrap wordpress 中的 4 个标签
How to dynamic bootstrap 4 tabs in wordpress
我想在选项卡类别中显示产品。
我希望它在每个选项卡中显示 4 个项目，但它当前显示所有产品。
你有办法帮助我解决这个问题吗？
我不希望产品以块的形式显示，它应该以表格的形式显示。
当前显示所有类别的所有产品，但不将每个产品显示为特定类别。
这是我的代码。
<div class="container pt-5">
<div class="text-center mb-4">
<h2 class="section-title px-5"><span class="px-2">Category products</span></h2>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
$categories = get_terms( array(
'taxonomy' => 'product_cat',
'hide_empty' => 1,
) );
foreach ( $categories as $key => $cat ) { ?>
<li class="nav-item" role="presentation">
<a class="nav-link " id="<?php echo $cat->slug; ?>" data-toggle="tab" href="#<?php echo $cat->slug; ?>" role="tab" aria-controls="<?php echo $cat->slug; ?>" aria-selected="true"><?php echo $cat->name; ?></a>
</li>
<?php } ?>
</ul>
<?php foreach ( $categories as $key => $cat ) {
$args = array(
'post_type' => 'product',
'posts_per_page' => 4,
'product_cat' => $cat->slug,
'hide_empty' => 1,
'orderby' => 'name',
'order' => 'ASC'
);
?>
<div class="tab-content" id="<?php echo $cat->slug; ?>">
<?php
$products = new WP_Query( $args );
if( $products->have_posts() ) : while ( $products->have_posts() ) : $products->the_post(); ?>
<div class="tab-pane<?php echo $cat->slug; ?>" id="<?php echo $cat->slug; ?>" role="tabpanel" aria-labelledby="home-tab">
<div class="container pt-2">
<div class="row px-xl-5 pb-3">
<div class="col-lg-3 col-md-6 col-sm-12 pb-1">
<div class="card product-item border-0 mb-4">
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<?php the_post_thumbnail('', array('class' => 'img-fluid w-100')); ?>
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3"><?php the_title(); ?></h6>
<div class="d-flex justify-content-center">
<h6><?php echo "". " " . get_woocommerce_currency_symbol().$product->get_price(); ?></h6>
</div>
</div>
<div class="card-footer d-flex justify-content-between bg-light border">
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>" class="btn btn-sm text-dark p-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="<?php echo $product->add_to_cart_url();?>" data-quantity="1" class="btn btn-sm text-dark p-0" data-product_id="<?php the_id(); ?>"><i class="fas fa-shopping-cart text-primary mr-1"></i> Add to Card</a>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;
wp_reset_postdata(); endif; ?>
</div>
<?php } ?>
</div>
您的循环有点偏离，您还多次使用了属性 ID。这应该适合你。
<div class="container pt-5">
<div class="text-center mb-4">
<h2 class="section-title px-5"><span class="px-2">Category products</span></h2>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
$product_cats = get_terms(
array(
'taxonomy' => 'product_cat',
'hide_empty' => 1,
)
);
foreach ( $product_cats as $key => $product_cat ) {
?>
<li class="nav-item" role="presentation">
<a class="nav-link " id="<?php echo esc_attr( $product_cat->slug ); ?>-tab" data-toggle="tab" href="#<?php echo esc_attr( $product_cat->slug ); ?>" role="tab" aria-controls="<?php echo esc_attr( $product_cat->slug ); ?>" aria-selected="false"><?php echo esc_html( $product_cat->name ); ?></a>
</li>
<?php } ?>
</ul>
<div class="tab-content">
<?php
$c = 0;
foreach ( $product_cats as $key => $product_cat ) {
$args = array(
'post_type' => 'product',
'posts_per_page' => 4,
'product_cat' => $product_cat->slug,
'hide_empty' => 1,
'orderby' => 'name',
'order' => 'ASC',
);
?>
<div class="tab-pane <?php echo ( 0 === $c ) ? 'show active' : 'fade'; ?>" id="<?php echo esc_attr( $product_cat->slug ); ?>" role="tabpanel" aria-labelledby="<?php echo esc_attr( $product_cat->slug ); ?>-tab"
<div class="container pt-2">
<div class="row px-xl-5 pb-3">
<?php
$products = new WP_Query( $args );
if ( $products->have_posts() ) :
while ( $products->have_posts() ) :
$products->the_post();
?>
<div class="col-lg-3 col-md-6 col-sm-12 pb-1">
<div class="card product-item border-0 mb-4">
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<?php the_post_thumbnail( '', array( 'class' => 'img-fluid w-100' ) ); ?>
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3"><?php the_title(); ?></h6>
<div class="d-flex justify-content-center">
<h6><?php echo '' . ' ' . get_woocommerce_currency_symbol() . esc_attr( $product->get_price() ); ?></h6>
</div>
</div>
<div class="card-footer d-flex justify-content-between bg-light border">
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>" class="btn btn-sm text-dark p-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="<?php echo esc_attr( $product->add_to_cart_url() ); ?>" data-quantity="1" class="btn btn-sm text-dark p-0" data-product_id="<?php the_id(); ?>"><i class="fas fa-shopping-cart text-primary mr-1"></i> Add to Card</a>
</div>
</div>
</div>
<?php
endwhile;
?>
<?php
wp_reset_postdata();
endif;
?>
</div>
</div>
<?php
$c++;
}
?>
</div>
</div>
我想在选项卡类别中显示产品。 我希望它在每个选项卡中显示 4 个项目，但它当前显示所有产品。 你有办法帮助我解决这个问题吗？ 我不希望产品以块的形式显示，它应该以表格的形式显示。 当前显示所有类别的所有产品，但不将每个产品显示为特定类别。
这是我的代码。
<div class="container pt-5">
<div class="text-center mb-4">
<h2 class="section-title px-5"><span class="px-2">Category products</span></h2>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
$categories = get_terms( array(
'taxonomy' => 'product_cat',
'hide_empty' => 1,
) );
foreach ( $categories as $key => $cat ) { ?>
<li class="nav-item" role="presentation">
<a class="nav-link " id="<?php echo $cat->slug; ?>" data-toggle="tab" href="#<?php echo $cat->slug; ?>" role="tab" aria-controls="<?php echo $cat->slug; ?>" aria-selected="true"><?php echo $cat->name; ?></a>
</li>
<?php } ?>
</ul>
<?php foreach ( $categories as $key => $cat ) {
$args = array(
'post_type' => 'product',
'posts_per_page' => 4,
'product_cat' => $cat->slug,
'hide_empty' => 1,
'orderby' => 'name',
'order' => 'ASC'
);
?>
<div class="tab-content" id="<?php echo $cat->slug; ?>">
<?php
$products = new WP_Query( $args );
if( $products->have_posts() ) : while ( $products->have_posts() ) : $products->the_post(); ?>
<div class="tab-pane<?php echo $cat->slug; ?>" id="<?php echo $cat->slug; ?>" role="tabpanel" aria-labelledby="home-tab">
<div class="container pt-2">
<div class="row px-xl-5 pb-3">
<div class="col-lg-3 col-md-6 col-sm-12 pb-1">
<div class="card product-item border-0 mb-4">
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<?php the_post_thumbnail('', array('class' => 'img-fluid w-100')); ?>
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3"><?php the_title(); ?></h6>
<div class="d-flex justify-content-center">
<h6><?php echo "". " " . get_woocommerce_currency_symbol().$product->get_price(); ?></h6>
</div>
</div>
<div class="card-footer d-flex justify-content-between bg-light border">
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>" class="btn btn-sm text-dark p-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="<?php echo $product->add_to_cart_url();?>" data-quantity="1" class="btn btn-sm text-dark p-0" data-product_id="<?php the_id(); ?>"><i class="fas fa-shopping-cart text-primary mr-1"></i> Add to Card</a>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;
wp_reset_postdata(); endif; ?>
</div>
<?php } ?>
</div>
您的循环有点偏离，您还多次使用了属性 ID。这应该适合你。
<div class="container pt-5">
<div class="text-center mb-4">
<h2 class="section-title px-5"><span class="px-2">Category products</span></h2>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
$product_cats = get_terms(
array(
'taxonomy' => 'product_cat',
'hide_empty' => 1,
)
);
foreach ( $product_cats as $key => $product_cat ) {
?>
<li class="nav-item" role="presentation">
<a class="nav-link " id="<?php echo esc_attr( $product_cat->slug ); ?>-tab" data-toggle="tab" href="#<?php echo esc_attr( $product_cat->slug ); ?>" role="tab" aria-controls="<?php echo esc_attr( $product_cat->slug ); ?>" aria-selected="false"><?php echo esc_html( $product_cat->name ); ?></a>
</li>
<?php } ?>
</ul>
<div class="tab-content">
<?php
$c = 0;
foreach ( $product_cats as $key => $product_cat ) {
$args = array(
'post_type' => 'product',
'posts_per_page' => 4,
'product_cat' => $product_cat->slug,
'hide_empty' => 1,
'orderby' => 'name',
'order' => 'ASC',
);
?>
<div class="tab-pane <?php echo ( 0 === $c ) ? 'show active' : 'fade'; ?>" id="<?php echo esc_attr( $product_cat->slug ); ?>" role="tabpanel" aria-labelledby="<?php echo esc_attr( $product_cat->slug ); ?>-tab"
<div class="container pt-2">
<div class="row px-xl-5 pb-3">
<?php
$products = new WP_Query( $args );
if ( $products->have_posts() ) :
while ( $products->have_posts() ) :
$products->the_post();
?>
<div class="col-lg-3 col-md-6 col-sm-12 pb-1">
<div class="card product-item border-0 mb-4">
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<?php the_post_thumbnail( '', array( 'class' => 'img-fluid w-100' ) ); ?>
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3"><?php the_title(); ?></h6>
<div class="d-flex justify-content-center">
<h6><?php echo '' . ' ' . get_woocommerce_currency_symbol() . esc_attr( $product->get_price() ); ?></h6>
</div>
</div>
<div class="card-footer d-flex justify-content-between bg-light border">
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>" class="btn btn-sm text-dark p-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a href="<?php echo esc_attr( $product->add_to_cart_url() ); ?>" data-quantity="1" class="btn btn-sm text-dark p-0" data-product_id="<?php the_id(); ?>"><i class="fas fa-shopping-cart text-primary mr-1"></i> Add to Card</a>
</div>
</div>
</div>
<?php
endwhile;
?>
<?php
wp_reset_postdata();
endif;
?>
</div>
</div>
<?php
$c++;
}
?>
</div>
</div>