[英]Display custom radio and checkbox product settings data in front end in Woocommerce
我需要在metabox和前端woocommerce上顯示單選按鈕和多個復選框。 我能夠獲取文本區域和其他字段,但無法在單個產品頁面上獲取多個復選框和單選按鈕數據,無法填充,獲取和檢查每種類型的數據值。
add_filter( 'woocommerce_product_data_tabs', 'product_data_tab', 99 , 1 );
function product_data_tab( $product_data_tabs ) {
$product_data_tabs['shipping-costs'] = array(
'label' => __( 'Extra Product Info', 'my_theme_domain' ), // translatable
'target' => 'shipping_costs_product_data', // translatable
);
return $product_data_tabs;
}
add_action( 'woocommerce_product_data_panels', 'product_data_fields' );
function product_data_fields() {
global $post;
$post_id = $post->ID;
echo '<div id="shipping_costs_product_data" class="panel woocommerce_options_panel">'
$input_checkbox = get_post_meta( $post_id, '_input_checkbox', true );
if( empty( $input_checkbox ) ) $input_checkbox = ''; // set default value
$input_radio = get_post_meta( $post_id, '_input_radio', true );
if( empty( $input_radio ) ) $input_radio = ''; // set default value
// Checkbox field
woocommerce_wp_checkbox( array(
'id' => '_input_checkbox',
'wrapper_class' => 'show_if_simple',
'label' => __( 'Input checkbox Label', 'my_theme_domain' ),
'description' => __( 'Input checkbox Description', 'my_theme_domain' ),
// 'desc_tip' => __( 'Input checkbox Description tip', 'my_theme_domain' ),
// 'name' => 'input_checkbox',
//'cbvalue' => 'yes', // selected if same than 'value' (default value),
'options' => array(
'value1' => 'Option 1',
'value2' => 'Option 2',
'value3' => 'Option 3',
),
'value' => $input_checkbox, // <== POPULATING
) );
// Radio Buttons field
woocommerce_wp_radio( array(
'id' => '_input_radio',
'wrapper_class' => 'show_if_simple',
'label' => __('Delivery Period ', 'my_theme_domain'),
'description' => __( 'Delivery Period Description', 'my_theme_domain' ),
// 'desc_tip' => __( 'Input Radio Description tip', 'my_theme_domain' )
// 'name' => 'input_radio',
'options' => array(
'less than 5 days' => 'less than 5 days',
'10 days' => '10 days',
'15 days' => '15 days',
'30 days' => '30 days',
),
'value' => $input_radio, // <== POPULATING
) );
}
保存“定制產品”標簽元框的定制字段數據:
add_action( 'woocommerce_process_product_meta', 'shipping_costs_process_product_meta_fields_save' );
function shipping_costs_process_product_meta_fields_save( $post_id ){
// save the checkbox field data
$wc_checkbox = isset( $_POST['_input_checkbox'] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_input_checkbox', $wc_checkbox );
// save the radio button field data
$wc_radio = isset( $_POST['_input_radio'] ) ? $_POST['_input_radio'] : '';
update_post_meta( $post_id, '_input_radio', $wc_radio );
}
// Add product custom "custom" tab
add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tab' );
function woo_custom_product_tab( $tabs ) {
$tabs['cust_tab'] = array(
'title' => __( 'Extra Product Info', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_custom_data_product_tab_content'
);
return $tabs;
}
// The Shipping tab content
function woo_custom_data_product_tab_content() {
global $post;
//Get the data ////get_post_meta( $post->ID
$select2 = get_post_meta( $post->ID, '_input_checkbox', true );
$select3 = get_post_meta( $post->ID, '_input_radio', true );
$output = '<div class="custom-data">';
if( ! empty( $select2 ) )
$output .= '<p>'. __('input_checkbox: ').'<span style="color:#96588a;">'.$select2.'</span></p>';
if( ! empty( $select3 ) )
$output .= '<p>'. __('Delivery Period: ').'<span style="color:#96588a;">'.$select3.'</span></p>';
echo $output.'</div>'
復選框和單選字段的工作方式不同。 與單選按鈕不同,您一次可以擁有1個復選框。
因此正確和重新審視的代碼是:
## ---- 1. Backend ---- ##
// Add a custom tab in edit product page settings
add_filter( 'woocommerce_product_data_tabs', 'product_data_tab', 90 , 1 );
function product_data_tab( $product_data_tabs ) {
$product_data_tabs['shipping-costs'] = array(
'label' => __( 'Extra Product Info', 'my_theme_domain' ), // translatable
'target' => 'shipping_costs_product_data', // translatable
);
return $product_data_tabs;
}
// Add the content to the custom tab in edit product page settings
add_action( 'woocommerce_product_data_panels', 'product_data_fields' );
function product_data_fields() {
global $post;
echo '<style>fieldset.form-field._input_radio_field > legend{float:none;}</style>
<div id="shipping_costs_product_data" class="panel woocommerce_options_panel">';
// Checkbox field 1
woocommerce_wp_checkbox( array(
'id' => '_input_checkbox1',
'wrapper_class' => 'show_if_simple',
'label' => __( 'Input checkbox Label 1' ),
'description' => __( 'Input checkbox Description 1' )
) );
// Checkbox field 2
woocommerce_wp_checkbox( array(
'id' => '_input_checkbox2',
'wrapper_class' => 'show_if_simple',
'label' => __( 'Input checkbox Label 2' ),
'description' => __( 'Input checkbox Description 2' )
) );
// Checkbox field 3
woocommerce_wp_checkbox( array(
'id' => '_input_checkbox3',
'wrapper_class' => 'show_if_simple',
'label' => __( 'Input checkbox Label 3' ),
'description' => __( 'Input checkbox Description 3' )
) );
// Radio Buttons field
woocommerce_wp_radio( array(
'id' => '_input_radio',
'wrapper_class' => 'show_if_simple',
'label' => __('Delivery Period'),
'description' => __( 'Delivery Period Description' ).'<br>',
'options' => array(
'-5 days' => __('Less than 5 days'),
'10 days' => __('10 days'),
'15 days' => __('15 days'),
'30 days' => __('30 days'),
)
) );
echo '</div>';
}
// Save the data of the custom tab in edit product page settings
add_action( 'woocommerce_process_product_meta', 'shipping_costs_process_product_meta_fields_save' );
function shipping_costs_process_product_meta_fields_save( $post_id ){
// save the checkbox field 1 data
$wc_checkbox = isset( $_POST['_input_checkbox1'] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_input_checkbox1', $wc_checkbox );
// save the checkbox field 2 data
$wc_checkbox = isset( $_POST['_input_checkbox2'] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_input_checkbox2', $wc_checkbox );
// save the checkbox field 3 data
$wc_checkbox = isset( $_POST['_input_checkbox3'] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_input_checkbox3', $wc_checkbox );
// save the radio button field data
$wc_radio = isset( $_POST['_input_radio'] ) ? $_POST['_input_radio'] : '';
update_post_meta( $post_id, '_input_radio', $wc_radio );
}
## ---- 2. Front end ---- ##
// Add a custom tab in single product pages
add_filter( 'woocommerce_product_tabs', 'custom_product_tab' );
function custom_product_tab( $tabs ) {
$tabs['cust_tab'] = array(
'title' => __( 'Extra Product Info', 'woocommerce' ),
'priority' => 50,
'callback' => 'custom_product_tab_content',
);
return $tabs;
}
// Add the content inside the custom tab in single product pages
function custom_product_tab_content() {
global $post;
$output = '<div class="custom-data">';
## 1. The Chekboxes (3)
$checkbox1 = get_post_meta( $post->ID, '_input_checkbox1', true ); // Get the data - Checbox 1
if( ! empty( $checkbox1 ) && $checkbox1 == 'yes' )
$text_to_display = __('is "Selected"');
else
$text_to_display = __('is "NOT Selected"');
$output .= '<p>'. __('Input checkbox:').' <span style="color:#96588a;">'.$text_to_display.'</span></p>';
$checkbox2 = get_post_meta( $post->ID, '_input_checkbox2', true ); // Get the data - Checbox 2
if( ! empty( $checkbox2 ) && $checkbox2 == 'yes' )
$text_to_display = __('is "Selected"');
else
$text_to_display = __('is "NOT Selected"');
$output .= '<p>'. __('Input checkbox:').' <span style="color:#96588a;">'.$text_to_display.'</span></p>';
$checkbox3 = get_post_meta( $post->ID, '_input_checkbox3', true ); // Get the data - Checbox 3
if( ! empty( $checkbox3 ) && $checkbox3 == 'yes' )
$text_to_display = __('is "Selected"');
else
$text_to_display = __('is "NOT Selected"');
$output .= '<p>'. __('Input checkbox:').' <span style="color:#96588a;">'.$text_to_display.'</span></p>';
## 2. Radio buttons
$radio = get_post_meta( $post->ID, '_input_radio', true ); // Get the data
if( ! empty( $radio ) )
$output .= '<p>'. __('Delivery Period: ').'<span style="color:#96588a;">'.$radio.'</span></p>';
else
$output .= '<p>'. __('Delivery Period: ').'<span style="color:#96588a;">'.__('Not defined').'</span></p>';
echo $output.'</div>';
}
代碼在您的活動子主題(或主題)的function.php文件中,或者在任何插件文件中。
經過測試並在WooCommerce 3+上運行,您將獲得:
1)在后端“自定義”標簽產品設置中:
2)在單個產品頁面的前端“定制”選項卡上:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.