Hướng dẫn show toàn bộ danh mục con kèm sản phẩm trong trang danh mục cha hiện tại

Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, mặc định trang Danh mục sản phẩm của Woocommerce chỉ cho phép hiển thị các card sản phẩm, người dùng phải điều hướng các danh mục con thông qua menu hoặc sidebar, điều này gây không ít khó khăn cho việc thao tác và trải nghiệm người dùng. Do đó, xuất phát từ yêu cầu của khách hàng, phải show đủ các danh mục con và sản phẩm để người dùng dễ theo dõi, hôm nay mình chia sẻ tới mọi người cùng sử dụng nha!

Bài viết hướng dẫn thực hiện trên web wordpress, sử dụng woocommerce và theme Flatsome.

thay doi hien thi danh mục san pham — Giuseart.com – Thay đổi hiển thị trang danh mục sản phẩm

Bước 1: Xác định file layout của trang danh mục

Trong theme Flatsome có nhiều file quy định layout của trang danh mục, tùy trường hợp cụ thể của các bạn để chúng ta chọn file layout phù hợp nhé!

Ở trường hợp của mình, trang danh mục không có sidebar nên sử dụng file wp-content/themes/flatsome/woocommerce/layouts/category-none.php. Thay toàn bộ nội dung trang category-none.php bằng code bên dưới:

<?php
/**
 * Category layout with no sidebar.
 *
 * @package          Flatsome/WooCommerce/Templates
 * @flatsome-version 3.18.7
 */
?>
<div class="row category-page-row">

<div class="col large-12">
<?php
defined( 'ABSPATH' ) || exit;

/**
 * Xác định danh mục cần lấy
 */$terms = array();

// Trang Shop => lấy danh mục gốc
if ( is_shop() ) {

    $terms = get_terms( array(
        'taxonomy'   => 'product_cat',
        'parent'     => 0,
        'hide_empty' => true,
        'orderby'    => 'menu_order',
        'order'      => 'ASC',
    ) );

}

// Trang danh mục => lấy danh mục con
elseif ( is_product_category() ) {

    $current_term = get_queried_object();

    $terms = get_terms( array(
        'taxonomy'   => 'product_cat',
        'parent'     => $current_term->term_id,
        'hide_empty' => true,
        'orderby'    => 'menu_order',
        'order'      => 'ASC',
    ) );

}


/**
 * Nếu có danh mục cần hiển thị
 */if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) :

    foreach ( $terms as $term ) :
?>

<section class="archive-category-section">

    <h2 class="archive-category-title">
        <?php echo esc_html( $term->name ); ?>
    </h2>

    <?php
    echo do_shortcode(
        '[ux_products
            cat="' . esc_attr( $term->slug ) . '"
            products="4"
            columns="4"
            columns__md="4"
            columns__sm="2"
            orderby="date"
            order="desc"
            image_height="100%"
            image_size="media"
        ]'
    );
    ?>

    <div class="archive-view-all">
        <a href="<?php echo esc_url( get_term_link( $term ) ); ?>">
            &raquo; Xem tất cả
        </a>
    </div>

</section>

<?php
    endforeach;


/**
 * Không có danh mục con -> hiển thị mặc định
 */else :

    if ( woocommerce_product_loop() ) :

        woocommerce_product_loop_start();

        while ( have_posts() ) :
            the_post();

            wc_get_template_part( 'content', 'product' );

        endwhile;

        woocommerce_product_loop_end();

        do_action( 'woocommerce_after_shop_loop' );

    else :

        do_action( 'woocommerce_no_products_found' );

    endif;

endif;
?>

<?php
/**
 * Hook: flatsome_products_after.
 *
 * @hooked flatsome_products_footer_content - 10
 */do_action( 'flatsome_products_after' );
/**
 * Hook: woocommerce_after_main_content.
 *
 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
 */do_action( 'woocommerce_after_main_content' );
?>

</div>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<?php

/**

* Category layout with no sidebar.

* @package Flatsome/WooCommerce/Templates

* @flatsome-version 3.18.7

<?php

defined( 'ABSPATH' ) || exit;

/**

* Xác định danh mục cần lấy

$terms = array();

// Trang Shop => lấy danh mục gốc

if ( is_shop() ) {

$terms = get_terms( array(

'taxonomy' => 'product_cat',

'parent' => 0,

'hide_empty' => true,

'orderby' => 'menu_order',

'order' => 'ASC',

) );

}

// Trang danh mục => lấy danh mục con

elseif ( is_product_category() ) {

$current_term = get_queried_object();

$terms = get_terms( array(

'taxonomy' => 'product_cat',

'parent' => $current_term->term_id,

'hide_empty' => true,

'orderby' => 'menu_order',

'order' => 'ASC',

) );

}

/**

* Nếu có danh mục cần hiển thị

if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) :

foreach ( $terms as $term ) :

<?php echo esc_html( $term->name ); ?>

</h2>

<?php

echo do_shortcode(

'[ux_products

cat="' . esc_attr( $term->slug ) . '"

products="4"

columns="4"

columns__md="4"

columns__sm="2"

orderby="date"

order="desc"

image_height="100%"

image_size="media"

);

» Xem tất cả

</a>

</div>

</section>

<?php

endforeach;

/**

* Không có danh mục con -> hiển thị mặc định

else :

if ( woocommerce_product_loop() ) :

woocommerce_product_loop_start();

while ( have_posts() ) :

the_post();

wc_get_template_part( 'content', 'product' );

endwhile;

woocommerce_product_loop_end();

do_action( 'woocommerce_after_shop_loop' );

else :

do_action( 'woocommerce_no_products_found' );

endif;

<?php

/**

* Hook: flatsome_products_after.

* @hooked flatsome_products_footer_content - 10

do_action( 'flatsome_products_after' );

/**

* Hook: woocommerce_after_main_content.

* @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)

do_action( 'woocommerce_after_main_content' );

</div>

Code quy định rõ:

Nếu có danh mục con thì liệt kê danh mục con + 4 sản phẩm đầu tiên của mỗi danh mục con, sau đó có nút “Xem thêm” để trỏ link vào danh mục con đó.
Nếu không có danh mục con thì hiển thị dạng lưới như mặc định

Sau khi paste thay thế nội dung file, bạn nhớ lưu lại và ra xem sản phẩm để thấy sự thay đổi nhé!

Bước 2: Thêm CSS để làm đẹp

Tùy nhu cầu làm đẹp, các bạn có thể tham khảo CSS của mình hoặc tự tùy biến thêm

.archive h1 {
    margin: 20px 0 23px 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    color: #034ea2;
}
h2.archive-category-title {
    font-size: 28px;
    text-transform: uppercase;
    text-align: center;
    color: #034ea2;
}
.archive-view-all a {
    color: #2196f3;
    display: block;
    text-align: center;
}
.archive-view-all {
    text-align: right;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 40px;
}

.archive h1 {

margin: 20px 0 23px 0;

text-align: center;

text-transform: uppercase;

font-size: 36px;

color: #034ea2;

}

h2.archive-category-title {

font-size: 28px;

text-transform: uppercase;

text-align: center;

color: #034ea2;

}

.archive-view-all a {

color: #2196f3;

display: block;

text-align: center;

}

.archive-view-all {

text-align: right;

font-weight: 700;

letter-spacing: 0;

margin-bottom: 40px;

}

Bước 3: Review lại và chỉnh sửa thêm

Review lại một lượt xem ok chưa, đặc biệt là phần CSS để làm đẹp theo ý của các bạn nhé! Các danh mục con hiển thị lần lượt và show sản phẩm của danh mục con như hình dưới là ok!