Nhiều khi thiết kế web chúng ta gặp những trang web có phần danh mục sản phẩm hiển thị rất khoa học và đẹp, bao gồm: Tiêu đề – mô tả ngắn (một đoạn ngắn khoảng 200 từ) – danh sách sản phẩm – mô tả danh mục như mẫu dưới đây:
Bài viết dưới đây sẽ giúp chúng ta thực hiện thêm custom field khung soạn thảo phần mô tả ngắn cho danh mục sản phẩm woocommerce, cùng theo dõi nhé!
Thêm custom field khung soạn thảo vào form thêm danh mục mới
Bạn copy và paste đoạn code dưới đây bỏ vào Giao diện – theme field editor – function.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // 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ó
Bạn copy và paste đoạn code dưới đây bỏ vào Giao diện – theme field editor – function.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // 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
Vẫn tiếp tục copy đoạn dưới đây vào function.php nha
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 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 theme sẽ có vị trí hiển thị khác nhau, sau khi xác định được vị trí hiển thị custom field rồi thì bạn copy paste đoạn dưới đây vào nhé!
1 2 3 4 5 6 7 8 9 | <?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>'; }?> |
Chúc các bạn thành công nhé, có gì sai sót cần góp ý vui lòng nhắn tin cho mình!
Chia sẻ bài viết:
