When you run a WooCommerce business, you owe it to your consumers to offer them additional alternatives and information about each option.
Store owners may give more thorough and precise information about their items to their consumers by adding WooCommerce custom product fields, which can assist to enhance the customer experience and increase sales.
Step 1: Add a custom field
<?php
add_action( 'woocommerce_product_after_variable_attributes', 'cxc_add_custom_field_to_variations', 10, 3 );
function cxc_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
// Radio Button
woocommerce_wp_radio(
array(
'id' => 'cxc_radio_field[' . $loop . ']',
'label' => 'Cxc Radio field',
'wrapper_class' => 'form-row',
'value' => get_post_meta( $variation->ID, 'cxc_radio', true ),
'options' => array(
'cxc_code' => 'Cxc Code',
'cxc_html' => 'Cxc Html',
'cxc_css' => 'Cxc Css'
)
)
);
// Text Fileds
woocommerce_wp_text_input(
array(
'id' => 'cxc_text_field[' . $loop . ']',
'label' => 'Cxc Text field',
'wrapper_class' => 'form-row',
'placeholder' => 'Type here...',
'desc_tip' => 'true',
'description' => 'We can add some description for a field.',
'value' => get_post_meta( $variation->ID, 'cxc_text', true )
)
);
// Select
woocommerce_wp_select(
array(
'id' => 'cxc_select_field[' . $loop . ']',
'label' => 'Cxc Select field',
'wrapper_class' => 'form-row',
'description' => 'We can add some description for a field.',
'value' => get_post_meta( $variation->ID, 'cxc_select', true ),
'options' => array(
'cxc_code' => 'Cxc Code',
'cxc_html' => 'Cxc Html',
'cxc_css' => 'Cxc Css'
)
)
);
// CheckBox Fileds
woocommerce_wp_checkbox(
array(
'id' => 'cxc_my_check[' . $loop . ']',
'label' => 'Cxc Checkbox field',
'wrapper_class' => 'form-row',
'value' => get_post_meta( $variation->ID, 'cxc_check', true ),
)
);
// Textarea
woocommerce_wp_textarea_input(
array(
'id' => 'cxc_textarea_field[' . $loop . ']',
'label' => 'Cxc Textarea field',
'wrapper_class' => 'form-row',
'value' => get_post_meta( $variation->ID, 'rudr_textarea', true ),
)
);
// CheckBox Fileds
woocommerce_wp_hidden_input(
array(
'id' => 'cxc_hidden_field[' . $loop . ']',
'value' => 'hello_cxc'
)
);
}
?>Save Custom fields
<?php
add_action( 'woocommerce_save_product_variation', 'cxc_save_custom_field_variations', 10, 2 );
function cxc_save_custom_field_variations( $variation_id, $loop ) {
// Radio Field
$cxc_radio_field = ! empty( $_POST[ 'cxc_radio_field' ][ $loop ] ) ? $_POST[ 'cxc_radio_field' ][ $loop ] : '';
update_post_meta( $variation_id, 'cxc_radio', sanitize_text_field( $cxc_radio_field ) );
// Text Field
$cxc_text_field = ! empty( $_POST[ 'cxc_text_field' ][ $loop ] ) ? $_POST[ 'cxc_text_field' ][ $loop ] : '';
update_post_meta( $variation_id, 'cxc_text', sanitize_text_field( $cxc_text_field ) );
// Select Field
$cxc_select_field = ! empty( $_POST[ 'cxc_select_field' ][ $loop ] ) ? $_POST[ 'cxc_select_field' ][ $loop ] : '';
update_post_meta( $variation_id, 'cxc_select', sanitize_text_field( $cxc_select_field ) );
// Checkbox field
$checkbox_field = ! empty( $_POST[ 'cxc_my_check' ][ $loop ] ) ? 'yes' : 'no';
update_post_meta( $variation_id, 'cxc_check', $checkbox_field );
// Textarea Field
$cxc_textarea_field = ! empty( $_POST[ 'cxc_textarea_field' ][ $loop ] ) ? $_POST[ 'cxc_textarea_field' ][ $loop ] : '';
update_post_meta( $variation_id, 'rudr_textarea', sanitize_textarea_field( $cxc_textarea_field ) );
// Hidden
update_post_meta( $variation_id, '_hidden', $_POST[ 'cxc_hidden_field' ][ $loop ] );
}
?>Displaying Field Values in the front end
<?php
$cxc_radio = get_post_meta( $variation_id, 'cxc_radio', true );
?><?php
add_filter( 'woocommerce_available_variation', 'cxc_woocommerce_available_variation' );
function cxc_woocommerce_available_variation( $variation ) {
$variation[ 'cxc_radio_field_anything' ] = get_post_meta( $variation[ 'variation_id' ], 'cxc_radio', true );
return $variation;
}
?>Also Read:
How to add content after or before the ‘add to cart’ button on single product page woocommerce
-
CodexCoach is a skilled tech educator known for easy-to-follow tutorials in coding, digital design, and software development. With practical tips and interactive examples, CodexCoach helps people learn new tech skills and advance their careers.
