Thiết Kế Website
SEO tổng thể
Sáng Tạo Nội Dung
Bộ nhận diện thương hiệuFlatsome
Thêm custom field mô tả ngắn cho danh mục sản phẩm không dùng plugin
Thêm custom field mô tả ngắn cho danh mục sản phẩm không dùng plugin
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
functionadd_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);
?>
<pclass=“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
functionedit_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);
?>
<pclass=“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
functionsave_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
functionupdate_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”>’;
echowpautop($product_cat_long_description);
echo‘</div>’;
}?>
|
Chúc các bạn thành công nhé!