Woocommerce 后端中的多选字段

问题描述

我正在尝试在 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 个回答:

1. 第一个产品变体(为您)
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:

1. The first one for product variations (for you)
2. 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模板网！