Multi Select fields in Woocommerce backend(Woocommerce 后端中的多選字段)
本文介紹了Woocommerce 后端中的多選字段的處理方法,對大家解決問題具有一定的參考價值,需要的朋友們下面隨著小編來一起學習吧!
問題描述
限時送ChatGPT賬號..
我正在嘗試在 Woocommerce 產品變體中創建 4 個多選選項.
例如:我在賣樹,想顯示樹可用的季節.所以我們有 4 個季節(春、夏、秋、冬),有些樹有兩個或樹的季節.
我將此代碼添加到我的functions.php,但它不會保存選定的選項.當我保存選項并重新加載頁面時,選項再次變為空白.
我還想知道如何將單個產品頁面(前端)上的選定選項顯示為圖標.
現在,帶有選項的功能適用于產品變體.請查看此屏幕截圖 (具有多選選項的產品變體):
我的代碼:
//添加變化設置add_action('woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3);/*** 創建自定義字段類型**/函數 woocommerce_wp_select_multiple( $field ) {全球 $thepostid, $post, $woocommerce;$thepostid = 空( $thepostid )?$post->ID : $thepostid;$field['class'] = isset( $field['class'] ) ?$field['class'] : '選擇短';$field['wrapper_class'] = isset( $field['wrapper_class'] ) ?$field['wrapper_class'] : '';$field['name'] = isset( $field['name'] ) ?$field['name'] : $field['id'];$field['value'] = isset( $field['value'] ) ?$field['value'] : ( get_post_meta( $thepostid, $field['id'], true ) ? get_post_meta( $thepostid, $field['id'], true ) : array() );echo '<p class="form-field '.esc_attr($field['id']).'_field'.esc_attr($field['wrapper_class']).'"><label for="'. esc_attr( $field['id'] ) . '">'.wp_kses_post( $field['label'] ) .'</label><select id="' . esc_attr( $field['id'] ) . '" name="' . esc_attr( $field['name'] ) . '" class="' .esc_attr( $field['class'] ) . '" multiple="multiple">';foreach ( $field['options'] as $key => $value ) {echo '<option value="' . esc_attr( $key ) . '" ' .( in_array( $key, $field['value'] ) ? 'selected="selected"' : '' ) .'>'.esc_html( $value ) .'</選項>';}回聲'</選擇>';if ( !empty( $field['description'] ) ) {if ( isset( $field['desc_tip'] ) && false !== $field['desc_tip'] ) {echo '<img class="help_tip" data-tip="' . esc_attr( $field['description'] ) . '" src="' . esc_url( WC()->plugin_url() ) . '/assets/images/help.png" height="16" width="16"/>';} 別的 {echo ''.wp_kses_post( $field['description'] ) .'</span>';}}回聲'</p>';}/*** 為變體創建新字段**/函數variation_settings_fields( $loop, $variation_data, $variation ) {woocommerce_wp_select_multiple(數組('id' =>'季節_' .$variation->ID,'類' =>'季節','標簽' =>__('季節', 'woocommerce'),'價值' =>get_post_meta( $variation->ID, '_season', true ),'選項' =>大批('春天' =>'春天','夏天' =>'夏天','秋天' =>'秋天','冬天' =>'冬天',)));}add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );函數 save_variation_settings_fields( $post_id ) {$select = $_POST["season_$post_id"];如果(!空($選擇)){update_post_meta( $post_id, '_season', esc_attr( $select ) );}}
解決方案
處理多選字段的可變產品是另一回事,需要進行一些更改才能使其工作.我在以下之后做了 2 個回答:
- 第一個產品變體(為您)
- 另一個適用于所有其他產品類型
因此在 WooCommerce 后端啟用多選字段的主要功能將是:
function woocommerce_wp_multi_select( $field, $variation_id = 0 ) {全球 $thepostid, $post;如果( $variation_id == 0 )$the_id = 空( $thepostid )?$post->ID : $thepostid;別的$the_id = $variation_id;$field['class'] = isset( $field['class'] ) ?$field['class'] : '選擇短';$field['wrapper_class'] = isset( $field['wrapper_class'] ) ?$field['wrapper_class'] : '';$field['name'] = isset( $field['name'] ) ?$field['name'] : $field['id'];$meta_data = may_unserialize( get_post_meta( $the_id, $field['id'], true ) );$meta_data = $meta_data ?$meta_data : 數組() ;$field['value'] = isset( $field['value'] ) ?$field['value'] : $meta_data;echo '<p class="form-field ' .esc_attr( $field['id'] ) .'_場地 ' .esc_attr( $field['wrapper_class'] ) .'><label for=''.esc_attr( $field['id'] ) .'>'.wp_kses_post( $field['label'] ) .'</label><select id="'.esc_attr( $field['id'] ) .'"名稱="'.esc_attr( $field['name'] ) .'"類=".esc_attr( $field['class'] ) .'"多個=多個">';foreach ( $field['options'] as $key => $value ) {回聲'<選項值=".esc_attr( $key ) .'"' .( in_array( $key, $field['value'] ) ? 'selected="selected"' : '' ) .'>'.esc_html( $value ) .'</選項>';}回聲'</選擇>';if ( !empty( $field['description'] ) ) {if ( isset( $field['desc_tip'] ) && false !== $field['desc_tip'] ) {echo 'plugin_url()).'/assets/images/help.png';高度=16"寬度=16"/>';} 別的 {echo ''.wp_kses_post( $field['description'] ) .'</span>';}}}
代碼位于活動子主題(或活動主題)的 function.php 文件中.此功能現在將處理任何類型的產品,包括產品變體.
相關:
2).對于所有其他產品類型(除了我們隱藏自定義字段的產品變體):
//為產品常規選項設置添加自定義字段(對于可變產品隱藏它)add_action('woocommerce_product_options_general_product_data', 'add_custom_settings_fields', 20);函數 add_custom_settings_fields() {全球 $post;echo '';//隱藏在可變產品中woocommerce_wp_multi_select(數組('id' =>'_季節','名稱' =>'_季節[]','類' =>'','標簽' =>__('季節', 'woocommerce'),'選項' =>大批('春天' =>__(春天",woocommerce"),'夏天' =>__(夏天",woocommerce"),'秋天' =>__(秋天",woocommerce"),'冬天' =>__(冬天",woocommerce"),)) );回聲'</div>';}//在后端提交時將自定義多選字段保存到數據庫(對于所有其他產品類型)add_action( 'woocommerce_process_product_meta', 'save_product_options_custom_fields', 30, 1 );函數 save_product_options_custom_fields( $post_id ){if( isset( $_POST['_season'] ) ){$post_data = $_POST['_season'];//多數據清理$sanitize_data = array();if( is_array($post_data) && sizeof($post_data) > 0 ){foreach( $post_data 作為 $value ){$sanitize_data[] = esc_attr( $value );}}update_post_meta( $post_id, '_season', $sanitize_data );}}
代碼位于活動子主題(或活動主題)的 function.php 文件中.經測試有效.
I am trying to create 4 multi-select options at Woocommerce product variations.
For example: I am selling trees and want to display the season the tree is available. So we have 4 seasons (spring, summer, autumn, winter), Some trees are available in two or tree seasons.
I added this code to my functions.php, but it won't save the selected options. When i save the option and reload the page the options are blank again.
And I was also wondering how to show the selected options on the single product page (frontend) as icon.
For now the function with the options works at the product variations. Please see this screenshot (product variation with multi select options):
My code:
// Add Variation Settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
/**
* Create custom field type
*
*/
function woocommerce_wp_select_multiple( $field ) {
global $thepostid, $post, $woocommerce;
$thepostid = empty( $thepostid ) ? $post->ID : $thepostid;
$field['class'] = isset( $field['class'] ) ? $field['class'] : 'select short';
$field['wrapper_class'] = isset( $field['wrapper_class'] ) ? $field['wrapper_class'] : '';
$field['name'] = isset( $field['name'] ) ? $field['name'] : $field['id'];
$field['value'] = isset( $field['value'] ) ? $field['value'] : ( get_post_meta( $thepostid, $field['id'], true ) ? get_post_meta( $thepostid, $field['id'], true ) : array() );
echo '<p class="form-field ' . esc_attr( $field['id'] ) . '_field ' . esc_attr( $field['wrapper_class'] ) . '"><label for="' . esc_attr( $field['id'] ) . '">' . wp_kses_post( $field['label'] ) . '</label><select id="' . esc_attr( $field['id'] ) . '" name="' . esc_attr( $field['name'] ) . '" class="' . esc_attr( $field['class'] ) . '" multiple="multiple">';
foreach ( $field['options'] as $key => $value ) {
echo '<option value="' . esc_attr( $key ) . '" ' . ( in_array( $key, $field['value'] ) ? 'selected="selected"' : '' ) . '>' . esc_html( $value ) . '</option>';
}
echo '</select> ';
if ( ! empty( $field['description'] ) ) {
if ( isset( $field['desc_tip'] ) && false !== $field['desc_tip'] ) {
echo '<img class="help_tip" data-tip="' . esc_attr( $field['description'] ) . '" src="' . esc_url( WC()->plugin_url() ) . '/assets/images/help.png" height="16" width="16" />';
} else {
echo '<span class="description">' . wp_kses_post( $field['description'] ) . '</span>';
}
}
echo '</p>';
}
/**
* Create new fields for variations
*
*/
function variation_settings_fields( $loop, $variation_data, $variation ) {
woocommerce_wp_select_multiple( array(
'id' => 'season_' . $variation->ID,
'class' => 'season',
'label' => __('Season', 'woocommerce'),
'value' => get_post_meta( $variation->ID, '_season', true ),
'options' => array(
'spring' => 'Spring',
'summer' => 'Summer',
'autumn' => 'Autumn',
'winter' => 'Winter',
))
);
}
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );
function save_variation_settings_fields( $post_id ) {
$select = $_POST["season_$post_id"];
if( ! empty( $select ) ) {
update_post_meta( $post_id, '_season', esc_attr( $select ) );
}
}
解決方案
To handle variable products for multi select fields is another thing and some changes need to be done to make it work. I have made 2 answers after below:
- The first one for product variations (for you)
- The other one for all other product types
So the main function that enable multi-select fields in WooCommerce backend will be:
function woocommerce_wp_multi_select( $field, $variation_id = 0 ) {
global $thepostid, $post;
if( $variation_id == 0 )
$the_id = empty( $thepostid ) ? $post->ID : $thepostid;
else
$the_id = $variation_id;
$field['class'] = isset( $field['class'] ) ? $field['class'] : 'select short';
$field['wrapper_class'] = isset( $field['wrapper_class'] ) ? $field['wrapper_class'] : '';
$field['name'] = isset( $field['name'] ) ? $field['name'] : $field['id'];
$meta_data = maybe_unserialize( get_post_meta( $the_id, $field['id'], true ) );
$meta_data = $meta_data ? $meta_data : array() ;
$field['value'] = isset( $field['value'] ) ? $field['value'] : $meta_data;
echo '<p class="form-field ' . esc_attr( $field['id'] ) . '_field ' . esc_attr( $field['wrapper_class'] ) . '"><label for="' . esc_attr( $field['id'] ) . '">' . wp_kses_post( $field['label'] ) . '</label><select id="' . esc_attr( $field['id'] ) . '" name="' . esc_attr( $field['name'] ) . '" class="' . esc_attr( $field['class'] ) . '" multiple="multiple">';
foreach ( $field['options'] as $key => $value ) {
echo '<option value="' . esc_attr( $key ) . '" ' . ( in_array( $key, $field['value'] ) ? 'selected="selected"' : '' ) . '>' . esc_html( $value ) . '</option>';
}
echo '</select> ';
if ( ! empty( $field['description'] ) ) {
if ( isset( $field['desc_tip'] ) && false !== $field['desc_tip'] ) {
echo '<img class="help_tip" data-tip="' . esc_attr( $field['description'] ) . '" src="' . esc_url( WC()->plugin_url() ) . '/assets/images/help.png" height="16" width="16" />';
} else {
echo '<span class="description">' . wp_kses_post( $field['description'] ) . '</span>';
}
}
}
Code goes in function.php file of your active child theme (or active theme). This function, will handle now any type of products, including product variations.
Related: Multi checkbox fields in Woocommerce backend
1). For product variations (for you):
// Add custom multi-select fields in variation setting tab
add_action( 'woocommerce_product_after_variable_attributes', 'add_variation_settings_fields', 20, 3 );
function add_variation_settings_fields( $loop, $variation_data, $variation_post ) {
woocommerce_wp_multi_select( array(
'id' => '_season',
'name' => '_season['.$loop.'][]',
'class' => '',
'label' => __('Season', 'woocommerce'),
'options' => array(
'spring' => __("Spring", "woocommerce"),
'summer' => __("Summer", "woocommerce"),
'autumn' => __("Autumn", "woocommerce"),
'winter' => __("Winter", "woocommerce"),
)
), $variation_post->ID );
}
// Save custom multi-select fields for variations
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );
function save_variation_settings_fields( $variation_id, $i ) {
if( isset( $_POST['_season'][$i] ) ){
$post_data = $_POST['_season'][$i];
// Multi data sanitization
$sanitize_data = array();
if( is_array($post_data) && sizeof($post_data) > 0 ){
foreach( $post_data as $value ){
$sanitize_data[] = esc_attr( $value );
}
}
update_post_meta( $variation_id, '_season', $sanitize_data );
}
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
2). For all other product types (except product variations, where we hide that custom field):
// Add custom fields for product general option settings (hidding it for variable products)
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_settings_fields', 20 );
function add_custom_settings_fields() {
global $post;
echo '<div class="options_group hide_if_variable"">'; // Hidding in variable products
woocommerce_wp_multi_select( array(
'id' => '_season',
'name' => '_season[]',
'class' => '',
'label' => __('Season', 'woocommerce'),
'options' => array(
'spring' => __("Spring", "woocommerce"),
'summer' => __("Summer", "woocommerce"),
'autumn' => __("Autumn", "woocommerce"),
'winter' => __("Winter", "woocommerce"),
)
) );
echo '</div>';
}
// Save custom multi-select fields to database when submitted in Backend (for all other product types)
add_action( 'woocommerce_process_product_meta', 'save_product_options_custom_fields', 30, 1 );
function save_product_options_custom_fields( $post_id ){
if( isset( $_POST['_season'] ) ){
$post_data = $_POST['_season'];
// Multi data sanitization
$sanitize_data = array();
if( is_array($post_data) && sizeof($post_data) > 0 ){
foreach( $post_data as $value ){
$sanitize_data[] = esc_attr( $value );
}
}
update_post_meta( $post_id, '_season', $sanitize_data );
}
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
這篇關于Woocommerce 后端中的多選字段的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網!
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題,如果有圖片或者內容侵犯了您的權益,請聯系我們刪除處理,感謝您的支持!