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>