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
- Fix lỗi Zalo Tài khoản này tạm thời không thể sử dụng chức năng này khi click vào nút zalo trên Website
- Top 10 Website Cung Cấp Code Mẫu Chuyên Nghiệp Dành Cho Các Lập Trình Viên
- Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome
- Hover hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce
- Chuyển hướng trang 404 về trang chủ cho wordpress