Tips Wordpress

Display products from any category on Flatsome theme with a list view.

flatsome
luu ban nhap tu dong 3867

This article provides a code snippet to display a list of products from a specific category with a custom design, not using the default WooCommerce or theme layout. The code allows for customization of the product list layout, such as displaying products in a grid, list, or slider format. The code includes parameters like post type, number of products per page, product category, and order. By applying this code, users can easily showcase a desired number of products from any category. The article also includes instructions for displaying products in grid, list, and slider formats for the Flatsome theme.

Do you want to display a list of products from a specific category with a unique design that is not provided by the theme or default WooCommerce settings? This article will guide you on how to easily achieve that.

"Displaying the Selected Category’s Product List"

Here is the code snippet to showcase the products from a chosen category:

<h2>Tên danh mục</h2>

In the above, we can see:

  • Post Type: Product
  • Post Per Page: Number of products displayed, set to 1 here
  • Product Cat: Slug of the product category
  • Order By: Sorting order, set to Random here
  • Displayed elements include:
    • Thumbnail: Size 300x300px
    • Title
    • Price
    • Add to Cart button

With this code snippet, you can call the desired number of products from any category.

"Applying to the Flatsome Theme"

"Displaying in Grid Format"

This is the basic grid display format of Flatsome with products arranged in rows and columns.

See also  Overview of WordPress in Lesson 2

To display like this, use the following code:

<div class="products row row-small align-equal">
    <?php $args = array( 'post_type' => 'product', 'posts_per_page' => 12, 'product_cat' => 'slug', 'orderby' => 'rand' );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

    <?php endwhile; ?><?php wp_reset_query(); ?>
</div>

Customize the CSS for better aesthetics.

"Displaying in List Format"

This display type has a thumbnail on the left, and content (including Title, Short Description, Price) on the right.

The code for this display is as follows:

<div class="products row row-small align-equal">
    <?php $args = array( 'post_type' => 'product', 'posts_per_page' => 12, 'product_cat' => 'slug', 'orderby' => 'rand' );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

   <?php endwhile; ?><?php wp_reset_query(); ?>
</div>

"Displaying in Slider Format"

With a small modification to the code from the Grid and List displays above, you can have a Slider display.

Simply replace a portion of the code from the Grid and List formats to get the Slider style.

<div class="products row row-small align-equal">

Make these adjustments and enjoy the unique product displays on your website effortlessly.

5/5 - (1 vote)

Related posts