Trong thời gian gần đây, tôi đã nhận được nhiều câu hỏi từ các bạn về cách để chuyển mô tả danh mục sản phẩm xuống cuối trang trong WooCommerce thay vì hiển thị trên đầu sản phẩm. Hôm nay, tôi muốn chia sẻ với các bạn một số cách thực hiện điều này chỉ bằng vài bước đơn giản.

Woocommerce WordPress cho phép bạn thêm mô tả cho các danh mục sản phẩm nhằm tăng chất lượng thông tin chuyên mục và tối ưu hoá SEO. Tuy nhiên, việc đặt mô tả này ở trên cùng có thể làm cho trải nghiệm người dùng không được tốt, đặc biệt khi họ muốn xem sản phẩm ngay từ đầu.

Có hai cách để đưa mô tả danh mục WooCommerce xuống dưới

Cách 1: Sử dụng phần “Bottom content”

Đây là cách đơn giản và nhanh chóng, phù hợp cho những trang web có ít danh mục hoặc mô tả ngắn. Thay vì viết mô tả vào phần “Description,” bạn có thể thay đổi và viết mô tả vào phần “Bottom content“.

Ưu điểm: Đây là một cách nhanh chóng và dễ dàng, không cần đụng tới mã code.
Nhược điểm: Bạn cần sử dụng văn bản ở dạng HTML để định dạng văn bản và có thể hiển thị thông tin ra như ý muốn. Nó không giống phần Description.

Cách 2: Chỉnh sửa file functions.php của child theme

Cách này đòi hỏi bạn phải can thiệp vào mã nguồn bằng cách thêm đoạn mã vào cuối file functions.php của theme đang sử dụng. Tuy nhiên, mình khuyến khích các bạn sử dụng child-theme để thêm/xoá code.

Ưu điểm: Giải pháp này áp dụng được cho tất cả các danh mục sản phẩm và chỉ cần thực hiện một lần.
Nhược điểm: Yêu cầu hiểu biết về việc chỉnh sửa mã code và có thể ảnh hưởng đến trang web nếu không thực hiện đúng cách.

Dựa trên kinh nghiệm của tôi, tôi thường ưa thích sử dụng cách 1 nếu chỉ cần xử lý một số trường hợp đơn giản. Tuy nhiên, cách 2 là giải pháp toàn diện hơn, phù hợp cho các trang web có nhiều danh mục sản phẩm và đòi hỏi kiến thức về code.

Với cách này chúng ta có đoạn code sau, bạn chỉ cần copy và dán vào file function.php là được.

/** Đưa mô tả danh mục xuống dưới cùng trong Woocommerce*/
add_action( 'wp', 'tu_move_wc_archive_description' );
function tu_move_wc_archive_description() {
if ( is_archive() ) {
remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
add_action( 'woocommerce_after_main_content', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_after_main_content', 'woocommerce_product_archive_description', 10 );
}
}

/** Đưa mô tả danh mục xuống dưới cùng trong Woocommerce*/

add_action( 'wp', 'tu_move_wc_archive_description' );

function tu_move_wc_archive_description() {

if ( is_archive() ) {

remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );

remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );

add_action( 'woocommerce_after_main_content', 'woocommerce_taxonomy_archive_description', 10 );

add_action( 'woocommerce_after_main_content', 'woocommerce_product_archive_description', 10 );

}

Trong trường hợp đoạn code trên bạn sử dụng mà nó không hoạt động thì có thể sử dụng đoạn code này thay thế:

remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 100 );

1 2	remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 ); add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 100 );

Chỉ chọn 1 trong 2 đoạn code trên để sử dụng thôi nhé. Ưu tiên vẫn là dùng code đầu.

Và đây là thành quả:

Chuyển mô tả danh mục trong woocommerce xuống dưới

Với các bạn sử dụng code rút gọn mô tả danh mục sản phẩm mà khi đưa xuống dưới trang nó không hoạt động thì vào phần code rút gọn, chỉnh lại phần nhận diện class như dưới đây:

Bạn chú ý dòng .tax-product_cat.woocommerce .term-description (có 2 dòng). Bạn cần vào phần danh mục sản phẩm, kéo xuống phần mô tả, chuột phải vào vùng văn bản mô tả và tìm class như hình sau, dán vào dòng trong code là được.