Cách tạo mô tả dưới cùng trong danh mục sản phẩm (Mô tả thứ 2)

Về mặt SEO, nếu bạn đang cố gắng xếp hạng các trang danh mục sản phẩm của mình, bạn thực sự cần phải tận dụng tối đa danh mục sản phẩm WooCommerce mặc định là “mô tả” và “hình thu nhỏ”. Hầu hết các theme nếu tương thích với WooCommerce sẽ hiển thị nội dung này ngay bên dưới tên danh mục sản phẩm và các sản phẩm bên trên.

Untitled 1

Không có gì mới cho đến nay. Nhưng điều gì sẽ xảy ra nếu bạn muốn thêm một phần nội dung khác bên dưới các sản phẩm danh mục trong khi vẫn giữ mô tả mặc định? Hôm nay Web89.vn sẽ hướng dẫn tùy chỉnh trang danh mục có thểm 1 mô tả dưới cùng của danh sách sản phẩm theo cơ chế như sau: Mô tả danh mục trên cùng – Danh sách các sản phẩm – Mô tả dưới cùng sau danh sách sản phẩm:

Thêm đoạn code sau vào file functions.php của theme đang sử dụng

/**
* @snippet       Add new textarea to Product Category Pages - WooCommerce
* @how-to        FREE
* @author        Web89vn
* @compatible    WooCommerce 5
* @donate        https://web89.vn
*/
// ---------------
// 1. Display field on "Add new product category" admin page
add_action( 'product_cat_add_form_fields', 'bbloomer_wp_editor_add', 10, 2 );
function bbloomer_wp_editor_add() {
?>
<div class="form-field">
<label for="seconddesc"><?php echo __( 'Second Description', 'woocommerce' ); ?></label>
<?php
$settings = array(
'textarea_name' => 'seconddesc',
'quicktags' => array( 'buttons' => 'em,strong,link' ),
'tinymce' => array(
'theme_advanced_buttons1' => 'bold,italic,strikethrough,separator,bullist,numlist,separator,blockquote,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,separator,undo,redo,separator',
'theme_advanced_buttons2' => '',
),
'editor_css' => '<style>#wp-excerpt-editor-container .wp-editor-area{height:175px; width:100%;}</style>',
);
wp_editor( '', 'seconddesc', $settings );
?>
<p class="description"><?php echo __( 'This is the description that goes BELOW products on the category page', 'woocommerce' ); ?></p>
</div>
<?php
}
// ---------------
// 2. Display field on "Edit product category" admin page
add_action( 'product_cat_edit_form_fields', 'bbloomer_wp_editor_edit', 10, 2 );
function bbloomer_wp_editor_edit( $term ) {
$second_desc = htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) );
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="second-desc"><?php echo __( 'Second Description', 'woocommerce' ); ?></label></th>
<td>
<?php
$settings = array(
'textarea_name' => 'seconddesc',
'quicktags' => array( 'buttons' => 'em,strong,link' ),
'tinymce' => array(
'theme_advanced_buttons1' => 'bold,italic,strikethrough,separator,bullist,numlist,separator,blockquote,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,separator,undo,redo,separator',
'theme_advanced_buttons2' => '',
),
'editor_css' => '<style>#wp-excerpt-editor-container .wp-editor-area{height:175px; width:100%;}</style>',
);
wp_editor( $second_desc, 'seconddesc', $settings );
?>
<p class="description"><?php echo __( 'This is the description that goes BELOW products on the category page', 'woocommerce' ); ?></p>
</td>
</tr>
<?php
}
// ---------------
// 3. Save field @ admin page
add_action( 'edit_term', 'bbloomer_save_wp_editor', 10, 3 );
add_action( 'created_term', 'bbloomer_save_wp_editor', 10, 3 );
function bbloomer_save_wp_editor( $term_id, $tt_id = '', $taxonomy = '' ) {
if ( isset( $_POST['seconddesc'] ) && 'product_cat' === $taxonomy ) {
update_woocommerce_term_meta( $term_id, 'seconddesc', esc_attr( $_POST['seconddesc'] ) );
}
}
// ---------------
// 4. Display field under products @ Product Category pages
add_action( 'woocommerce_after_shop_loop', 'bbloomer_display_wp_editor_content', 5 );
function bbloomer_display_wp_editor_content() {
if ( is_product_taxonomy() ) {
$term = get_queried_object();
if ( $term && ! empty( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) {
echo '<p class="term-description">' . wc_format_content( htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) . '</p>';
}
}
}
Đây là đoạn code mà Web89.vn chia sẻ tới bạn và cộng đồng. Rất vui nhận được góp ý từ bạn và cộng đồng.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *