Thêm khung soạn thảo nội dung dưới danh mục sản phẩm WooCommerce

Mặc định WooCommerce chỉ cho phép thêm mô tả ngắn (description) cho danh mục sản phẩm, rất hạn chế khi bạn muốn viết nội dung dài hơn — chẳng hạn như giới thiệu thương hiệu, hướng dẫn mua hàng, hoặc SEO content.

Trong bài này, mình chia sẻ đoạn code PHP giúp bạn thêm trình soạn thảo WordPress (TinyMCE) ngay bên dưới phần chỉnh sửa danh mục sản phẩm. Bạn có thể chèn text, ảnh, shortcode, thậm chí video một cách dễ dàng.

⚙️ Cách thực hiện

Bạn chỉ cần chèn đoạn code dưới đây vào file functions.php của theme con (child theme):

<?php
// ===== Thêm khung soạn thảo (editor) vào trang chỉnh sửa danh mục sản phẩm =====
add_action( 'product_cat_edit_form_fields', 'phongvt_add_editor_to_product_cat', 10, 2 );
function phongvt_add_editor_to_product_cat( $term, $taxonomy ) {
    $content = get_term_meta( $term->term_id, 'custom_content', true );
    ?>
    <tr class="form-field">
        <th scope="row" valign="top">
            <label for="custom_content"><?php _e( 'Nội dung hiển thị dưới danh mục', 'phongvt' ); ?></label>
        </th>
        <td>
            <?php
            wp_editor( 
                htmlspecialchars_decode( $content ),
                'custom_content',
                array(
                    'textarea_name' => 'custom_content',
                    'media_buttons' => true,
                    'textarea_rows' => 8,
                    'teeny' => false,
                )
            );
            ?>
            <p class="description">Nhập nội dung hiển thị bên dưới danh mục sản phẩm (có thể chứa HTML, ảnh, shortcode...)</p>
        </td>
    </tr>
    <?php
}

// ===== Lưu nội dung khi cập nhật danh mục =====
add_action( 'edited_product_cat', 'phongvt_save_editor_to_product_cat', 10, 2 );
function phongvt_save_editor_to_product_cat( $term_id, $tt_id ) {
    if ( isset( $_POST['custom_content'] ) ) {
        update_term_meta( $term_id, 'custom_content', wp_kses_post( $_POST['custom_content'] ) );
    }
}

// ===== Hiển thị nội dung ra ngoài trang danh mục =====
add_action( 'woocommerce_after_main_content', 'phongvt_show_editor_content_in_category', 5 );
function phongvt_show_editor_content_in_category() {
    if ( is_product_category() ) {
        $term = get_queried_object();
        $content = get_term_meta( $term->term_id, 'custom_content', true );
        if ( $content ) {
            echo '<div class="phongvt-cat-content" style="margin-top:40px;">';
            echo apply_filters( 'the_content', $content );
            echo '</div>';
        }
    }
}

🎨 Gợi ý CSS trang trí

Bạn có thể thêm đoạn CSS sau để nội dung hiển thị đẹp mắt hơn:

.phongvt-cat-content {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 25px;
  margin-top: 30px;
  font-size: 16px;
  line-height: 1.7;
}

🧾 Kết quả

• Trong admin: khi chỉnh sửa danh mục sản phẩm → bạn sẽ thấy khung soạn thảo đầy đủ (giống trình soạn thảo bài viết).

• Ngoài website: nội dung nhập vào sẽ tự động hiển thị phía dưới danh sách sản phẩm trong trang danh mục.

💡 Lợi ích

• Tăng khả năng SEO cho từng danh mục sản phẩm.

• Dễ dàng chèn video, ảnh, hướng dẫn, nội dung giới thiệu thương hiệu.

• Không cần plugin – code nhẹ, tối ưu cho Flatsome hoặc mọi theme WooCommerce.

📌 Kết luận

Với vài dòng code nhỏ, bạn đã có thể nâng cấp mạnh mẽ trang danh mục sản phẩm WooCommerce, giúp vừa đẹp hơn, vừa hỗ trợ SEO cực tốt.

Nếu bạn thấy bài viết hữu ích, hãy chia sẻ lại cho cộng đồng WordPress nhé ❤️