Để giới thiệu chi tiết hơn về sản phẩm trên website cũng như làm đẹp và chuyên nghiệp hơn cho bài đăng, ngoài những chức năng có sẵn ra, chúng ta cũng có thể custom theo ý thích.

1. Thêm Functions

Như ở trên mình đã thêm Custom Field vào trang Chỉnh sửa sản phẩm. Để thêm các Field trên, chúng ta sẽ hook woocommerce_product_options_general_product_data vào file functions.php của Theme Flatsome đang sử dụng.

// Add field in to the backend
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_add_fields');

Để tạo các Custom Field cho trang sản phẩm, chúng ta sử dụng các field có sẵn của Woocommerce.

// Add field in to the backend
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_add_fields');
function woocommerce_product_add_fields() {
   global $woocommerce;
   echo '<div class="options_group show_if_simple show_if_external show_if_variable">';
   // Custom Product Text Field
    woocommerce_wp_select(
        array(
            'id'          => '_enable',
            'type'          => 'select',
            'label'       => __( 'Thông Tin Sản Phẩm :', 'woocommerce' ),
            'description'   => __( 'Chọn để bật hoặc tắt', 'woocommerce' ),
            'options'     => array(
                '1'  => __( 'Tắt Thông Tin Sản Phẩm', 'woocommerce' ),
                '2' => __( 'Bật Thông Tin Sản Phẩm', 'woocommerce' ),
            ),
            'desc_tip'    => 'true',
            'description' => 'Chọn để bật hoặc tắt'
        )
    );
    woocommerce_wp_select(
        array(
            'id'          => '_hang_san_xuat',
            'type'          => 'select',
            'label'       => __( 'Hãng sản xuất:', 'woocommerce' ),
            'options'     => array(
                '1' => __( 'Chọn Hãng Sản Xuất', 'woocommerce' ),
                'An Cường' => __( 'An Cường', 'woocommerce' ),
                'Wilson'  => __( 'Wilson', 'woocommerce' ),
                'Hornitex' => __( 'Hornitex', 'woocommerce' ),
                'Morser'  => __( 'Morser', 'woocommerce' ),
                'Thaixin' => __( 'Thaixin', 'woocommerce' ),
                'Thaistar'  => __( 'Thaistar', 'woocommerce' ),
                'Smartchoice' => __( 'Smartchoice', 'woocommerce' ),
                'Smartwood'  => __( 'Smartwood', 'woocommerce' ),
                'Pergo' => __( 'Pergo', 'woocommerce' ),
                'LeoWood'  => __( 'LeoWood', 'woocommerce' ),
                'Indofloor' => __( 'Indofloor', 'woocommerce' ),
                'AlsaFloor'  => __( 'AlsaFloor', 'woocommerce' ),
                'Dongwha'  => __( 'Dongwha', 'woocommerce' ),
                'Kronospan' => __( 'Kronospan', 'woocommerce' ),
            ),
            'desc_tip'    => 'true',
            'description' => 'Không chọn lấy mặc định'
        )
    );
    woocommerce_wp_text_input(
        array(
            'id' => '_xuat_xu',
            'label' => __('Xuất xứ:', 'woocommerce'),
            'placeholder' => __('Việt Nam', 'woocommerce')
        )
    );
    woocommerce_wp_text_input(
        array(
            'id' => '_ma_sp',
            'label' => __('Mã sản phẩm:', 'woocommerce'),
            'placeholder' => __('AC 888', 'woocommerce')
        )
    );
    woocommerce_wp_text_input(
        array(
            'id' => '_kich_thuoc',
            'label' => __('Kích thước:', 'woocommerce'),
            'placeholder' => __('1200 x 190mm', 'woocommerce')
        )
    );
    woocommerce_wp_text_input(
        array(
            'id' => '_do_day',
            'label' => __('Độ dày:', 'woocommerce'),
            'placeholder' => __('8mm, 10mm, 12mm', 'woocommerce')
        )
    );
    woocommerce_wp_text_input(
        array(
            'id' => '_hesomaimonbemat',
            'label' => __('Hệ số mài mòn bề mặt:', 'woocommerce'),
            'placeholder' => __('AC4', 'woocommerce')
        )
    );
    woocommerce_wp_select(
        array(
            'id'          => '_bao_hanh',
            'type'          => 'select',
            'label'       => __( 'Bảo Hành:', 'woocommerce' ),
            'options'     => array(
                '1'  => __( 'Chọn Năm Bảo Hành', 'woocommerce' ),
                '5 Năm'  => __( '5 Năm', 'woocommerce' ),
                '10 Năm' => __( '10 Năm', 'woocommerce' ),
                '15 Năm'  => __( '15 Năm', 'woocommerce' ),
                '20 Năm'  => __( '20 Năm', 'woocommerce' ),
            ),
            'desc_tip'    => 'true',
            'description' => 'Không chọn lấy mặc định'
        )
    );
   echo '</div>';
}

2. Lưu thông tin vào database

Trong đoạn mã trên các field cụ thể woocommerce_wp_select để tạo field có giá trị là lựa chọn, woocommerce_wp_text_input để tạo filed có giá trị nhập, desc_tip để hiển thị các bong bóng nhỏ xinh đó ở bên phải của trường thay vì hiển thị mô tả trường mặc định. Thuộc tính này hoạt động cho mọi loại trường.
Để lưu các giá trị nhập vào các trường ở code bên trên sử dụng hook woocommerce_process_product_meta

// Save field
add_action('woocommerce_process_product_meta', 'woocommerce_product_fields_save');
function woocommerce_product_fields_save($post_id) {
    // Save field
    $woocommerce_product_field_enable = $_POST['_enable'];
    if (!empty($woocommerce_product_field_enable))
        update_post_meta($post_id, '_enable', esc_attr($woocommerce_product_field_enable));
    // Save field
    $woocommerce_product_field_hang_san_xuat = $_POST['_hang_san_xuat'];
    if (!empty($woocommerce_product_field_hang_san_xuat))
        update_post_meta($post_id, '_hang_san_xuat', esc_attr($woocommerce_product_field_hang_san_xuat));
    // Save field
    $woocommerce_product_field_xuat_xu = $_POST['_xuat_xu'];
    if (!empty($woocommerce_product_field_xuat_xu))
        update_post_meta($post_id, '_xuat_xu', esc_attr($woocommerce_product_field_xuat_xu));
    // Save field
    $woocommerce_product_field_ma_sp = $_POST['_ma_sp'];
    if (!empty($woocommerce_product_field_ma_sp))
        update_post_meta($post_id, '_ma_sp', esc_attr($woocommerce_product_field_ma_sp));
    // Save field
    $woocommerce_product_field_kich_thuoc = $_POST['_kich_thuoc'];
    if (!empty($woocommerce_product_field_kich_thuoc))
        update_post_meta($post_id, '_kich_thuoc', esc_attr($woocommerce_product_field_kich_thuoc));
    // Save field
    $woocommerce_product_field_do_day = $_POST['_do_day'];
    if (!empty($woocommerce_product_field_do_day))
        update_post_meta($post_id, '_do_day', esc_attr($woocommerce_product_field_do_day));
    // Save field
    $woocommerce_product_field_hesomaimonbemat = $_POST['_hesomaimonbemat'];
    if (!empty($woocommerce_product_field_hesomaimonbemat))
        update_post_meta($post_id, '_hesomaimonbemat', esc_attr($woocommerce_product_field_hesomaimonbemat));
    // Save field
    $woocommerce_product_field_bao_hanh = $_POST['_bao_hanh'];
    if (!empty($woocommerce_product_field_bao_hanh))
        update_post_meta($post_id, '_bao_hanh', esc_attr($woocommerce_product_field_bao_hanh));  
}

3. Hiển thị ra trang sản phẩm

Bây giờ chúng ta đã có giá trị nhập vào và lưu chúng trên cơ sở dữ liệu và muốn nó hiển thị ra trang chi tiết sản phẩm, thì các bạn làm như sau:

// Display font-end
add_action('woocommerce_single_product_summary', 'display_front_end');
function display_front_end() {
    // Show on
    $woocommerce_enable = get_post_meta( get_the_ID(), '_enable', true );
    if ( $woocommerce_enable == 2 ) {
        echo '<div class="wph_thetips" ><table><tbody>';
        $woocommerce_hang_san_xuat = get_post_meta( get_the_ID(), '_hang_san_xuat', true );
        if ( empty( $woocommerce_hang_san_xuat == 1) ) {
            echo '<tr><td>Hãng Sản Xuất :</td><td>'.$woocommerce_hang_san_xuat.'</td></tr>';
        }
        $woocommerce_xuat_xu = get_post_meta( get_the_ID(), '_xuat_xu', true );
        if ( ! empty( $woocommerce_xuat_xu ) ) {
            echo '<tr><td>Xuất Xứ :</td><td>'.$woocommerce_xuat_xu.'</td></tr>';
        }
        $woocommerce_ma_sp = get_post_meta( get_the_ID(), '_ma_sp', true );
        if ( ! empty( $woocommerce_ma_sp ) ) {
            echo '<tr><td>Mã Sản Phẩm :</td><td>'.$woocommerce_ma_sp.'</td></tr>';
        }
        $woocommerce_kich_thuoc = get_post_meta( get_the_ID(), '_kich_thuoc', true );
        if ( ! empty( $woocommerce_kich_thuoc ) ) {
            echo '<tr><td>Kích Thước :</td><td>'.$woocommerce_kich_thuoc.'</td></tr>';
        }
        $woocommerce_do_day = get_post_meta( get_the_ID(), '_do_day', true );
        if ( ! empty( $woocommerce_do_day ) ) {
            echo '<tr><td>Độ Dày :</td><td>'.$woocommerce_do_day.'</td></tr>';
        }
        $woocommerce_hesomaimonbemat = get_post_meta( get_the_ID(), '_hesomaimonbemat', true );
        if ( ! empty( $woocommerce_hesomaimonbemat ) ) {
            echo '<tr><td>Hệ Số Mài Mòn Bề Mặt :</td><td>'.$woocommerce_hesomaimonbemat.'</td></tr>';
        }
        $woocommerce_bao_hanh = get_post_meta( get_the_ID(), '_bao_hanh', true );
        if ( empty( $woocommerce_bao_hanh == 1 ) ) {
            echo '<tr><td>Bảo Hành :</td><td>'.$woocommerce_bao_hanh.'</td></tr>';
        }
        echo '</tbody></table></div>';
    }
}

Xin chúc các bạn thành công.

Bài viết cùng từ khóa

[Flatsome] – Hướng dẫn sử dụng theme cơ bản

10/04/2020
[Flatsome] – Tạo element mới cho UX Builder

11/04/2020
Tải về Flatsome – Theme WordPress miễn phí, sạch, cập nhật thường xuyên

16/07/2020

Flatsome

[Flatsome] – Custom Field vào trang sản phẩm

1. Thêm Functions

2. Lưu thông tin vào database

3. Hiển thị ra trang sản phẩm

Top plugin tạo cache miễn phí tốt nhất dành cho WordPress

Làm sao để cài CloudFlare CDN miễn phí lên WordPress?