Thêm Custom Field vào trang sản phẩm Woo cho Flatsome

Khi các bạn hoặc khách hàng của VietThemeShop muốn mở rộng tính năng vượt ra ngoài những thứ có sẵn của Plugin WooCommerce thì cần phải thêm Custom Field vào trang sản phẩm.

Ở bài hướng dẫn này, VietThemeShop sẽ hướng dẫn các bạn thêm các Custom Field vào trang sản phẩm cho Flatsome.

Bước 1: Thêm Custom Field (Back-End)

Như hình ảnh các bạn thấy ở trên VietThemeShop thêm Custom Field vào trang Chỉnh sửa sản phẩm. Để thêm các Field trên, VietThemeShop 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, VietThemeShop 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>';
}

Bước 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 VietThemeShop 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));  
}

Bước 3: Hiển thị ra Font-End

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>';
    }
}

Đến đây thì bài hướng dẫn kết thúc, chúc các bạn thực hiện thành công và có bất kỳ thắc mắc nào thì hãy comment ngay bên dưới topic này, chúng tôi sẽ hỗ trợ các bạn.