Bài viết chia sẻ cách để hiển thị danh sách sản phẩm của một danh mục bất kỳ ở trên một trang hay bài viết.
Hiển thị dạng Slider
<?php $iddanhmuc = ''; $category_link = get_category_link( $iddanhmuc ); $term = get_term_by( 'id', $iddanhmuc, 'product_cat' ); $slug = $term->slug; ?>
<a href="<?php echo esc_url( $category_link ); ?>"><?php echo $term->name; ?></a>
<div class="homeproducts row row-<?php if(!wp_is_mobile()) : ?>small<?php else : ?>xsmall<?php endif; ?> equalize-box align-equal slider slider-nav-simple slider-nav-large slider-nav-dark slider-style-normal slider-show-nav large-columns-5 medium-columns-4 small-columns-2" data-flickity-options='{"imagesLoaded": true, "groupCells": "100%", "dragThreshold" : 5, "cellAlign": "left","wrapAround": true,"prevNextButtons": false,"percentPosition": true,"pageDots": true, "rightToLeft": false, "autoPlay" : false}'>
<?php
if(!wp_is_mobile()) :
$args = array( 'post_type' => 'product', 'posts_per_page' => 12, 'product_cat' => $slug, 'orderby' => 'date' );
else :
$args = array( 'post_type' => 'product', 'posts_per_page' => 6, 'product_cat' => $slug, 'orderby' => 'date' );
endif;
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<div class="col">
<div class="col-inner proinner box-shadow-1 box-shadow-2-hover">
<div class="product-small box <?php echo flatsome_product_box_class(); ?>">
<div class="box-image">
<?php woocommerce_show_product_sale_flash( $post, $product ); ?>
<div class="image-cover" style="padding-top: 100%">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder"/>'; ?>
</a>
</div>
</div>
<div class="box-text box-text-products text-left ">
<h3 class="product-title"><a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>"><?php the_title(); ?></a></h3>
<span class="price-wrapper"><?php echo $product->get_price_html(); ?></span>
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<div style="clear: both"></div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
Hiển thị dạng Grid
<?php $iddanhmuc = ''; $category_link = get_category_link( $iddanhmuc ); $term = get_term_by( 'id', $iddanhmuc, 'product_cat' ); $slug = $term->slug; ?>
<div class="row row-small">
<?php
if(!wp_is_mobile()) :
$args = array( 'post_type' => 'product', 'posts_per_page' => 12, 'product_cat' => $slug, 'orderby' => 'date' );
else :
$args = array( 'post_type' => 'product', 'posts_per_page' => 6, 'product_cat' => $slug, 'orderby' => 'date' );
endif;
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<div class="col">
<div class="col-inner proinner box-shadow-1 box-shadow-2-hover">
<div class="product-small box <?php echo flatsome_product_box_class(); ?>">
<div class="box-image">
<?php woocommerce_show_product_sale_flash( $post, $product ); ?>
<div class="image-cover" style="padding-top: 100%">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder"/>'; ?>
</a>
</div>
</div>
<div class="box-text box-text-products text-left ">
<h3 class="product-title"><a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>"><?php the_title(); ?></a></h3>
<span class="price-wrapper"><?php echo $product->get_price_html(); ?></span>
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<div style="clear: both"></div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
Theo dõi
Đăng nhập
0 Góp ý
Cũ nhất
