Hướng dẫn custom field mô tả ngắn cho danh mục sản phẩm

Thêm custom field khung soạn thảo vào form thêm danh mục mới

Bạn chỉ cần copy – paste đoạn code dưới đây vào file functions.php

// Thêm custom field đoạn văn dài với WYSIWYG editor vào form thêm danh mục
function add_product_cat_wysiwyg_field() {
    ?>
    <div class="form-field">
        <label for="product_cat_long_description"><?php _e('Mô tả ngắn cho danh mục', 'giuseart.com'); ?></label>
        <?php
        $settings = array(
            'textarea_name' => 'product_cat_long_description',
            'media_buttons' => true,
            'textarea_rows' => 10,
        );
        wp_editor('', 'product_cat_long_description', $settings);
        ?>
        <p class="description"><?php _e('Thêm đoạn mô tả ngắn cho danh mục này, phần này sẽ hiển thị ở đầu danh mục', 'giuseart.com'); ?></p>
    </div>
    <?php
}
add_action('product_cat_add_form_fields', 'add_product_cat_wysiwyg_field', 10, 2);

Thêm custom field khung soạn thảo vào form chỉnh sửa danh mục đã có

Đoạn code này bạn cũng bỏ vào file function.php luôn nhé.

// Thêm custom field đoạn văn dài với WYSIWYG editor vào form chỉnh sửa danh mục
function edit_product_cat_wysiwyg_field($term) {
    $product_cat_long_description = get_term_meta($term->term_id, 'product_cat_long_description', true);
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="product_cat_long_description"><?php _e('Mô tả ngắn của danh mục', 'giuseart.com'); ?></label></th>
        <td>
            <?php
            $settings = array(
                'textarea_name' => 'product_cat_long_description',
                'media_buttons' => true,
                'textarea_rows' => 10,
            );
            wp_editor($product_cat_long_description, 'product_cat_long_description', $settings);
            ?>
            <p class="description"><?php _e('Thêm đoạn mô tả ngắn cho danh mục này, phần này sẽ hiển thị ở đầu danh mục', 'giuseart.com'); ?></p>
        </td>
    </tr>
    <?php
}
add_action('product_cat_edit_form_fields', 'edit_product_cat_wysiwyg_field', 10, 2);

Lưu giá trị custom field và database

Tiếp tục bạn copy – paste vào file function.php

// Lưu giá trị của custom field khi tạo mới danh mục
function save_product_cat_wysiwyg_field($term_id) {
    if (isset($_POST['product_cat_long_description'])) {
        update_term_meta($term_id, 'product_cat_long_description', wp_kses_post($_POST['product_cat_long_description']));
    }
}
add_action('created_product_cat', 'save_product_cat_wysiwyg_field', 10, 2);
 
// Lưu giá trị của custom field khi chỉnh sửa danh mục
function update_product_cat_wysiwyg_field($term_id) {
    if (isset($_POST['product_cat_long_description'])) {
        update_term_meta($term_id, 'product_cat_long_description', wp_kses_post($_POST['product_cat_long_description']));
    }
}
add_action('edited_product_cat', 'update_product_cat_wysiwyg_field', 10, 2);

Hiển thị custom field ra front end

Tùy thuộc vào từng theme, vị trí hiển thị của custom field có thể khác nhau. Sau khi bạn đã xác định được vị trí cần chèn, chỉ cần sao chép và dán đoạn mã bên dưới vào đúng vị trí đó là được!

<?php 
// Chèn mã này vào template của danh mục sản phẩm (ví dụ: taxonomy-product_cat.php hoặc archive-product.php)
$term_id = get_queried_object_id();
$product_cat_long_description = get_term_meta($term_id, 'product_cat_long_description', true);
if ($product_cat_long_description) {
    echo '<div class="noi-dung-dau-archive">';
    echo wpautop($product_cat_long_description);
    echo '</div>';
}?>

Và đây là kết quả

Trên đây là toàn bộ hướng dẫn, Chúc bạn thành công !