Thêm Custom field trong Woocommerce

Posted on by Admin

Chia sẻ cách thêm Custom field trong Woocommerce để tùy biến các trường thông tin mà không muốn dùng thêm plugin ngoài bằng cách dùng code để xây dựng website bán hàng nhanh và chuyên nghiệp.

Thêm custom-field cho sản phẩm chính

Dưới đây là khu vực dành cho sản phẩm hoặc sản phẩm cha nếu đó là sản phẩm có biến thể

Thêm code dưới đây vào functions.php của theme

/*
 * Thêm custom field vào sản phẩm
 * Field này cho sản phẩm chung. Không phải cho từng biến thể
 * Author: shopcode.vn
 * */
add_action('woocommerce_product_options_general_product_data', 'devvn_woocommerce_product_options_general_product_data');
function devvn_woocommerce_product_options_general_product_data(){
    global $post, $thepostid, $product_object;
    /*
     * Nếu chỉ cho hiện ở 1 số loại sản phẩm thì thêm class "hidden" và 1 trong các class sau:
     * show_if_simple
     * show_if_variable
     * show_if_grouped
     * show_if_external
     * show_if_variation_downloadable
     * show_if_variation_manage_stock
     *
     * Nếu muốn luôn hiện thì chỉ cần thêm class "options_group"
     * */
    ?>
    <div class="options_group devvn_custom_field">
        <?php
        woocommerce_wp_text_input(
            array(
                'id'        => '_custom_textbox',
                'value'     => $product_object->get_meta( 'custom_textbox', true ),
                'label'     => __( 'Text box', 'devvn' ),
            )
        );
        woocommerce_wp_select(
            array(
                'id'          => '_custom_select',
                'value'       => $product_object->get_meta( 'custom_select', true ),
                'label'       => __( 'Select box', 'devvn' ),
                'options'     => array(
                    'USD' => __( 'USD - US DOLLAR ', 'devvn' ),
                    'AUD' => __( 'AUD - AUSTRALIAN DOLLAR ', 'devvn' ),
                    'CAD' => __( 'CAD - CANADIAN DOLLAR ', 'devvn' ),
                    'CHF' => __( 'CHF - SWISS FRANC ', 'devvn' ),
                    'CNY' => __( 'CNY - YUAN RENMINBI ', 'devvn' ),
                    'DKK' => __( 'DKK - DANISH KRONE ', 'devvn' ),
                    'EUR' => __( 'EUR - EURO ', 'devvn' ),
                    'GBP' => __( 'GBP - POUND STERLING ', 'devvn' ),
                    'HKD' => __( 'HKD - HONGKONG DOLLAR ', 'devvn' ),
                    'INR' => __( 'INR - INDIAN RUPEE ', 'devvn' ),
                    'JPY' => __( 'JPY - YEN ', 'devvn' ),
                    'KRW' => __( 'KRW - KOREAN WON ', 'devvn' ),
                    'KWD' => __( 'KWD - KUWAITI DINAR ', 'devvn' ),
                    'MYR' => __( 'MYR - MALAYSIAN RINGGIT ', 'devvn' ),
                    'NOK' => __( 'NOK - NORWEGIAN KRONER ', 'devvn' ),
                    'RUB' => __( 'RUB - RUSSIAN RUBLE ', 'devvn' ),
                    'SAR' => __( 'SAR - SAUDI RIAL ', 'devvn' ),
                    'SEK' => __( 'SEK - SWEDISH KRONA ', 'devvn' ),
                    'SGD' => __( 'SGD - SINGAPORE DOLLAR ', 'devvn' ),
                    'THB' => __( 'THB - THAILAND BAHT ', 'devvn' ),
                ),
                'desc_tip'    => 'true',
                'description' => __( 'Đây là mô tả của field', 'devvn' ),
            )
        );
        woocommerce_wp_checkbox(
            array(
                'id'          => 'custom_checkbox',
                'label'       => __( 'Checkobox', 'devvb' ),
                'description' => __( 'Đây là mô tả của field', 'devvn' ),
                'value'       => wc_bool_to_string( $product_object->get_meta( 'custom_checkbox', true ) ),
            )
        );
        woocommerce_wp_radio(
            array(
                'id'          => 'custom_radio',
                'value'       => $product_object->get_meta( 'custom_radio', true ),
                'label'       => __( 'Radio', 'devvn' ),
                'options'     => array(
                    'radio1' => __( 'Lựa chọn 1', 'devvn' ),
                    'radio2' => __( 'Lựa chọn 2', 'devvn' ),
                    'radio3' => __( 'Lựa chọn 3', 'devvn' ),
                ),
                'desc_tip'    => 'true',
                'description' => __( 'Đây là mô tả của field', 'devvn' ),
            )
        );
        woocommerce_wp_note(
            array(
                'id'          => 'custom_note',
                'label'       => __( 'Ghi chú', 'devvn' ),
                'message'       => __( 'Đây là ghi chú', 'devvn' ),
            )
        );
        woocommerce_wp_hidden_input(
            array(
                'id'          => 'custom_hide',
                'value'       => 'value_hidden',
            )
        );
        woocommerce_wp_textarea_input(
            array(
                'id'        => 'custom_textarea',
                'value'     => $product_object->get_meta( 'custom_textarea', true ),
                'label'     => __( 'Textarea', 'devvn' ),
                'style'     => 'height: 100px;',
            )
        );
        ?>
    </div>
    <?php
}

Như vậy là bạn đã thêm xong field. Trong đó sử dụng hook woocommerce_product_options_general_product_data để thêm field vào tab Chung ngoài ra có thể sử dụng các hook khác để thêm vào các tab khác nhau ví dụ như:

  • woocommerce_product_options_inventory_product_data: thêm vào tab kiểm kê kho hàng
  • woocommerce_product_options_shipping_product_data: Thêm vào tab giao nhận
  • woocommerce_product_options_related: Thêm vào tab các sản phẩm được liên kết
  • woocommerce_product_options_attributes: Thêm vào tab các thuộc tính
  • woocommerce_product_options_advanced: Thêm vào tab nâng cao

Để lưu được dữ liệu custom field bạn thêm đoạn code dưới đây vào functions.php của theme:

/*
 * Hàm lưu metabox
 * */
add_action('woocommerce_admin_process_product_object', 'devvn_woocommerce_admin_process_product_object');
function devvn_woocommerce_admin_process_product_object($product){
    $product->update_meta_data('custom_textbox', isset( $_POST['_custom_textbox'] ) ? wc_clean( wp_unslash( $_POST['_custom_textbox'] ) ) : '');
    $product->update_meta_data('custom_select', isset( $_POST['_custom_select'] ) ? wc_clean( wp_unslash( $_POST['_custom_select'] ) ) : '');
    $product->update_meta_data('custom_checkbox', isset( $_POST['custom_checkbox'] ) ? wc_clean( wp_unslash( $_POST['custom_checkbox'] ) ) : 'no');
    $product->update_meta_data('custom_radio', isset( $_POST['custom_radio'] ) ? wc_clean( wp_unslash( $_POST['custom_radio'] ) ) : '');
    $product->update_meta_data('custom_textarea', isset( $_POST['custom_textarea'] ) ? sanitize_textarea_field($_POST['custom_textarea']) : '');
}

 

Khi lưu thì bạn nhớ dùng các hàm để format lại dữ liệu cho chuẩn nhé. Ví dụ như các hàm wp_unslash, wc_clean, sanitize_textarea_field…

Tiếp theo là code cho từng biến thể

Thêm custom field cho từng biến thể sản phẩm

Thêm field cho từng biến thể sản phẩm. Nhìn hình sẽ dễ hình dùng hơn nhé

Tương tự như code cho sản phẩm chính. Thì code này cũng có 2 phầm là thêm và lưu data. Mình gộp vào 1 đoạn dưới đây nhé. Chỉ cần thêm code vào functions.php là được

/*
 * Thêm custom field cho từng biến thể của sản phẩm
 * Các hàm tương tự với sản phẩm đơn
 * Chú ý tên và ID có thêm {$loop} như ví dụ dưới
 * */
add_action('woocommerce_product_after_variable_attributes', 'devvn_woocommerce_product_after_variable_attributes', 10, 3);
function devvn_woocommerce_product_after_variable_attributes($loop, $variation_data, $variation){
    $variation_id = isset($variation->ID) ? $variation->ID : '';
    $variation_data = wc_get_product($variation_id);
    if(!$variation_data || is_wp_error($variation_data)) return;
    ?>
    <div>
        <?php
        woocommerce_wp_text_input(
            array(
                'id'            => "custom_variation_textbox_{$loop}",
                'name'          => "custom_variation_textbox[{$loop}]",
                'value'     => $variation_data->get_meta( 'custom_variation_textbox', true ),
                'label'     => __( 'Text box', 'devvn' ),
                'wrapper_class' => 'form-row form-row-full',
                'placeholder'   => __( 'Đây là placeholder', 'devvn' ),
            )
        );
        woocommerce_wp_textarea_input(
            array(
                'id'            => "custom_textarea_{$loop}",
                'name'          => "custom_textarea[{$loop}]",
                'value'         => $variation_data->get_meta( 'custom_textarea' ),
                'label'         => __( 'Textarea', 'devvn' ),
                'desc_tip'      => true,
                'description'   => __( 'Đây là mô tả cho field.', 'devvn' ),
                'wrapper_class' => 'form-row form-row-full',
            )
        );
        ?>
    </div>
    <?php
}
/*
 * Hàm lưu metabox cho từng biến thể
 * */
add_action('woocommerce_admin_process_variation_object', 'devvn_woocommerce_admin_process_variation_object', 10, 2);
function devvn_woocommerce_admin_process_variation_object($variation, $i){
    $variation->update_meta_data('custom_variation_textbox', isset( $_POST['custom_variation_textbox'][ $i ] ) ? wc_clean(wp_unslash( $_POST['custom_variation_textbox'][ $i ] )) : '');
    $variation->update_meta_data('custom_textarea', isset( $_POST['custom_textarea'][ $i ] ) ? sanitize_textarea_field( $_POST['custom_textarea'][ $i ] ) : '');
}

Với code thêm field cho từng biến thể cần chú ý biến {loop} ở id, name khi thêm field và biến {i} lúc lưu data là được.

Cách gọi custom field

Sử dụng hàm get_meta Để gọi giá trị của custom field. Ví dụ field có tên custom_radio thì cách gọi như sau

  
$product->get_meta( 'custom_radio', true );

 

Chúc các bạn thành công

SRC: Levantoan

Xem thêm:

Bài viết cùng chủ đề:

Trả lời