Hiển thị sản phẩm của một danh mục ở trang bất kỳ

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>

Về tôi

Minh Anh

Xin chia sẻ những phần việc nhỏ ở các dự án đã triển khai để tiện sử dụng lại ở những dự án khác, giúp rút ngắn thời gian hoàn thành sản phẩm, giảm chi phí cho đối tác và khách hàng.