Thêm custom field ảnh đại diện cho danh mục sản phẩm không dùng plugin

3361 lượt xem
Đã đăng trên bởi Lê Văn Thiện
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Trong nhiều trường hợp, chúng ta muốn tùy chỉnh ảnh đại diện cho mỗi danh mục sản phẩm woocommerce để website được trình bày hiện đại và theo ý mình muốn hơn. Tuy nhiên, để tạo custom field ảnh đại diện và gọi ra được trang danh mục sản phẩm thì không phải ai cũng làm được. Hôm nay, cùng mình thực hiện công việc này nhé!

Giuseart.com---THêm-custom-field-ảnh-đại-diện-cho-danh-mục-sản-phẩm
Giuseart.com – Thêm custom field ảnh đại diện cho danh mục sản phẩm

Dưới đây là hướng dẫn cụ thể để thêm custom field ảnh đại diện cho danh mục sản phẩm:

  1. Thêm custom field vào form thêm và chỉnh sửa danh mục:
    • Thêm custom field vào form thêm danh mục.
    • Thêm custom field vào form chỉnh sửa danh mục.
  2. Lưu giá trị của custom field:
    • Lưu giá trị của custom field khi danh mục được tạo mới hoặc cập nhật.
  3. Hiển thị giá trị của custom field:
    • Hiển thị giá trị của custom field khi xem hoặc chỉnh sửa danh mục.

Dưới đây là ví dụ cụ thể để thêm một custom field ảnh đại diện vào taxonomy product_cat:

Thêm custom field vào form thêm danh mục mới

Bạn copy và paste toàn bộ code này vào Giao diện – Theme File Editor – Function.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Thêm custom field vào form thêm danh mục
function add_product_cat_image_field() {
    ?>
    <div class="form-field">
        <label for="product_cat_image"><?php _e('Ảnh đại diện', 'giuseart.com'); ?></label>
        <input type="text" name="product_cat_image" id="product_cat_image" value="">
        <button class="button" id="product_cat_image_button"><?php _e('Tải ảnh lên', 'giuseart.com'); ?></button>
        <p class="description"><?php _e('Tải ảnh đại diện cho danh mục này', 'giuseart.com'); ?></p>
        <div id="product_cat_image_preview" style="margin-top: 10px;"></div>
    </div>
    <script>
        jQuery(document).ready(function($){
            var mediaUploader;
            $('#product_cat_image_button').click(function(e) {
                e.preventDefault();
                if (mediaUploader) {
                    mediaUploader.open();
                    return;
                }
                mediaUploader = wp.media.frames.file_frame = wp.media({
                    title: 'Choose Image',
                    button: {
                        text: 'Choose Image'
                    },
                    multiple: false
                });
                mediaUploader.on('select', function() {
                    var attachment = mediaUploader.state().get('selection').first().toJSON();
                    $('#product_cat_image').val(attachment.url);
                    $('#product_cat_image_preview').html('<img src="' + attachment.url + '" style="max-width: 100%; height: auto;">');
                });
                mediaUploader.open();
            });
        });
    </script>
    <?php
}
add_action('product_cat_add_form_fields', 'add_product_cat_image_field', 10, 2);

Thêm custom field vào form chỉnh sửa danh mục đã có

Bạn copy và paste toàn bộ code này vào Giao diện – Theme File Editor – Function.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// Thêm custom field vào form chỉnh sửa danh mục
function edit_product_cat_image_field($term) {
    $product_cat_image = get_term_meta($term->term_id, 'product_cat_image', true);
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="product_cat_image"><?php _e('Ảnh đại diện', 'giuseart.com'); ?></label></th>
        <td>
            <input type="text" name="product_cat_image" id="product_cat_image" value="<?php echo esc_attr($product_cat_image); ?>">
            <button class="button" id="product_cat_image_button"><?php _e('Tải ảnh lên', 'giuseart.com'); ?></button>
            <p class="description"><?php _e('Tải ảnh đại diện cho danh mục này', 'giuseart.com'); ?></p>
            <div id="product_cat_image_preview" style="margin-top: 10px;">
                <?php if ($product_cat_image) : ?>
                    <img src="<?php echo esc_url($product_cat_image); ?>" style="max-width: 100%; height: auto;">
                <?php endif; ?>
            </div>
            <script>
                jQuery(document).ready(function($){
                    var mediaUploader;
                    $('#product_cat_image_button').click(function(e) {
                        e.preventDefault();
                        if (mediaUploader) {
                            mediaUploader.open();
                            return;
                        }
                        mediaUploader = wp.media.frames.file_frame = wp.media({
                            title: 'Choose Image',
                            button: {
                                text: 'Choose Image'
                            },
                            multiple: false
                        });
                        mediaUploader.on('select', function() {
                            var attachment = mediaUploader.state().get('selection').first().toJSON();
                            $('#product_cat_image').val(attachment.url);
                            $('#product_cat_image_preview').html('<img src="' + attachment.url + '" style="max-width: 100%; height: auto;">');
                        });
                        mediaUploader.open();
                    });
                });
            </script>
        </td>
    </tr>
    <?php
}
add_action('product_cat_edit_form_fields', 'edit_product_cat_image_field', 10, 2);

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

Vẫn tiếp tục copy và paste đoạn code dưới đây vào function.php nha

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Lưu giá trị của custom field khi tạo mới danh mục
function save_product_cat_image_field($term_id) {
    if (isset($_POST['product_cat_image']) && '' !== $_POST['product_cat_image']) {
        update_term_meta($term_id, 'product_cat_image', sanitize_text_field($_POST['product_cat_image']));
    }
}
add_action('created_product_cat', 'save_product_cat_image_field', 10, 2);
 
// Lưu giá trị của custom field khi chỉnh sửa danh mục
function update_product_cat_image_field($term_id) {
    if (isset($_POST['product_cat_image']) && '' !== $_POST['product_cat_image']) {
        update_term_meta($term_id, 'product_cat_image', sanitize_text_field($_POST['product_cat_image']));
    } else {
        delete_term_meta($term_id, 'product_cat_image');
    }
}
add_action('edited_product_cat', 'update_product_cat_image_field', 10, 2);

Hiển thị ảnh đại diện ra trang danh mục sản phẩm ngoài front end

Nếu dùng code function.php thì bạn chèn đoạn này:

1
2
3
4
5
6
7
8
9
10
11
12
13
// Display the category image on the front end
function display_product_cat_image() {
    if (is_tax('product_cat')) {
        $term = get_queried_object();
        $image_url = get_term_meta($term->term_id, 'product_cat_image', true);
        if ($image_url) {
            echo '<div class="product-category-image">';
            echo '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($term->name) . '">';
            echo '</div>';
        }
    }
}
add_action('woocommerce_before_main_content', 'display_product_cat_image', 15);

Còn nếu bạn muốn chèn vào vị trí bất kỳ ở trong file template của theme, thì dùng code dưới đây. Ở bước này, tùy vào theme bạn đang sử dụng sẽ có vị trí hiển thị ảnh đại diện khác nhau. Ví dụ, theme flatsome – woocommerce – layout – có các layout khác nhau của trang danh mục, bạn chỉ cần tìm được vị trí cần hiển thị ảnh đại diện rồi paste đoạn code sau vào:

1
2
3
4
5
6
7
8
9
10
<?php
if (is_tax('product_cat')) {
        $term = get_queried_object();
        $image_url = get_term_meta($term->term_id, 'product_cat_image', true);
        if ($image_url) {
            echo '<div class="product-category-image">';
            echo '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($term->name) . '">';
            echo '</div>';
        }
}?>

Với các đoạn mã trên, bạn sẽ có thể thêm, lưu và hiển thị custom field ảnh đại diện cho taxonomy product_cat một cách dễ dàng.

5/5 - (1 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebook và zalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Bài viết cùng chuyên mục:

Bài viết mới cập nhật:

Để lại một bình luận

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 *