Multi Select fields in Woocommerce backend(Woocommerce 后端中的多選字段)
本文介紹了Woocommerce 后端中的多選字段的處理方法,對大家解決問題具有一定的參考價值,需要的朋友們下面隨著小編來一起學習吧!
問題描述
限時送ChatGPT賬號..
我正在嘗試在 Woocommerce 產(chǎn)品變體中創(chuàng)建 4 個多選選項.
例如:我在賣樹,想顯示樹可用的季節(jié).所以我們有 4 個季節(jié)(春、夏、秋、冬),有些樹有兩個或樹的季節(jié).
我將此代碼添加到我的functions.php,但它不會保存選定的選項.當我保存選項并重新加載頁面時,選項再次變?yōu)榭瞻?
我還想知道如何將單個產(chǎn)品頁面(前端)上的選定選項顯示為圖標.
現(xiàn)在,帶有選項的功能適用于產(chǎn)品變體.請查看此屏幕截圖 (具有多選選項的產(chǎn)品變體):
我的代碼:
//添加變化設置add_action('woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3);/*** 創(chuàng)建自定義字段類型**/函數(shù) 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>';}/*** 為變體創(chuàng)建新字段**/函數(shù)variation_settings_fields( $loop, $variation_data, $variation ) {woocommerce_wp_select_multiple(數(shù)組('id' =>'季節(jié)_' .$variation->ID,'類' =>'季節(jié)','標簽' =>__('季節(jié)', 'woocommerce'),'價值' =>get_post_meta( $variation->ID, '_season', true ),'選項' =>大批('春天' =>'春天','夏天' =>'夏天','秋天' =>'秋天','冬天' =>'冬天',)));}add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );函數(shù) save_variation_settings_fields( $post_id ) {$select = $_POST["season_$post_id"];如果(!空($選擇)){update_post_meta( $post_id, '_season', esc_attr( $select ) );}}
解決方案
處理多選字段的可變產(chǎn)品是另一回事,需要進行一些更改才能使其工作.我在以下之后做了 2 個回答:
- 第一個產(chǎn)品變體(為您)
- 另一個適用于所有其他產(chǎn)品類型
因此在 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 : 數(shù)組() ;$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 文件中.此功能現(xiàn)在將處理任何類型的產(chǎn)品,包括產(chǎn)品變體.
相關(guān):
2).對于所有其他產(chǎn)品類型(除了我們隱藏自定義字段的產(chǎn)品變體):
//為產(chǎn)品常規(guī)選項設置添加自定義字段(對于可變產(chǎn)品隱藏它)add_action('woocommerce_product_options_general_product_data', 'add_custom_settings_fields', 20);函數(shù) add_custom_settings_fields() {全球 $post;echo '';//隱藏在可變產(chǎn)品中woocommerce_wp_multi_select(數(shù)組('id' =>'_季節(jié)','名稱' =>'_季節(jié)[]','類' =>'','標簽' =>__('季節(jié)', 'woocommerce'),'選項' =>大批('春天' =>__(春天",woocommerce"),'夏天' =>__(夏天",woocommerce"),'秋天' =>__(秋天",woocommerce"),'冬天' =>__(冬天",woocommerce"),)) );回聲'</div>';}//在后端提交時將自定義多選字段保存到數(shù)據(jù)庫(對于所有其他產(chǎn)品類型)add_action( 'woocommerce_process_product_meta', 'save_product_options_custom_fields', 30, 1 );函數(shù) save_product_options_custom_fields( $post_id ){if( isset( $_POST['_season'] ) ){$post_data = $_POST['_season'];//多數(shù)據(jù)清理$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 文件中.經(jīng)測試有效.
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.
這篇關(guān)于Woocommerce 后端中的多選字段的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網(wǎng)!
【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題,如果有圖片或者內(nèi)容侵犯了您的權(quán)益,請聯(lián)系我們刪除處理,感謝您的支持!