The Complete Guide to Adding Custom Product Fields in WooCommerce

function woocommerce_product_custom_fields () {
global $woocommerce, $post;
echo ‘

‘;
}

3.1: Integrating Field Structure

Consider making use of the “desc_tip” attribute for revealing informative tooltips adjacent to the field, rather than displaying the default field description. This attribute works amazingly for almost every field type.

// Custom Product Text Field
woocommerce_wp_text_input(
array(
‘id’ => ‘_custom_product_text_field’,
‘label’ => __( ‘My Text Field’, ‘woocommerce’ ),
‘placeholder’ => ‘Custom Product Text Field’,
‘desc_tip’ => ‘true’
)
);

• The default value of the step is set to 1, with the minimum value set to zero. So, it means that a positive value input is anticipated in this case, which is at least greater than zero.

// Custom Product Number Field
woocommerce_wp_text_input(
array(
‘id’ => ‘_custom_product_number_field’,
‘placeholder’ => ‘Custom Product Number Field’,
‘label’ => __(‘Custom Product Number Field’, ‘woocommerce’),
‘type’ => ‘number’,
‘custom_attributes’ => array(
‘step’ => ‘any’,
‘min’ => ‘0’
)
)
);

• Now, you can employ the following code for the creation of a textarea.

// Custom Product Textarea Field
woocommerce_wp_textarea_input(
array(
‘id’ => ‘_custom_product_textarea’,
‘placeholder’ => ‘Custom Product Textarea’,
‘label’ => __(‘Custom Product Textarea’, ‘woocommerce’)
)
);

• For implementation of the custom input fields, you can employ the following code in the functions.php file that is present in the theme folder.

// Display Fields
add_action(‘woocommerce_product_options_general_product_data’, ‘woocommerce_product_custom_fields’);
// Save Fields
add_action(‘woocommerce_process_product_meta’, ‘woocommerce_product_custom_fields_save’);
function woocommerce_product_custom_fields()
{
global $woocommerce, $post;
echo ‘<div class=”product_custom_field”>’;
// Custom Product Text Field
woocommerce_wp_text_input(
array(
‘id’ => ‘_custom_product_text_field’,
‘placeholder’ => ‘Custom Product Text Field’,
‘label’ => __(‘Custom Product Text Field’, ‘woocommerce’),
‘desc_tip’ => ‘true’
)
);
//Custom Product Number Field
woocommerce_wp_text_input(
array(
‘id’ => ‘_custom_product_number_field’,
‘placeholder’ => ‘Custom Product Number Field’,
‘label’ => __(‘Custom Product Number Field’, ‘woocommerce’),
‘type’ => ‘number’,
‘custom_attributes’ => array(
‘step’ => ‘any’,
‘min’ => ‘0’
)
)
);
//Custom Product Textarea
woocommerce_wp_textarea_input(
array(
‘id’ => ‘_custom_product_textarea’,
‘placeholder’ => ‘Custom Product Textarea’,
‘label’ => __(‘Custom Product Textarea’, ‘woocommerce’)
)
);
echo ‘</div>’;
}

3.2: Saving Data in the Database

After the creation of the custom product fields, there is a need for another function to save the values for the publish or update button.

In this regard, first of all, it is important to create a function woocommerce_product_custom_fields_save which is hooked to woocommerce_process_product_meta. It initially checks whether the field is filled or empty. If not, there will be generation of a post meta by employing update_post_meta(). Also, in this case, esc_attr() and esc_html() are typically used for securing the data.

Below is the code that you can use to save the value of all the fields:

function woocommerce_product_custom_fields_save($post_id)
{
// Custom Product Text Field
$woocommerce_custom_product_text_field = $_POST[‘_custom_product_text_field’];
if (!empty($woocommerce_custom_product_text_field))
update_post_meta($post_id, ‘_custom_product_text_field’, esc_attr($woocommerce_custom_product_text_field));
// Custom Product Number Field
$woocommerce_custom_product_number_field = $_POST[‘_custom_product_number_field’];
if (!empty($woocommerce_custom_product_number_field))
update_post_meta($post_id, ‘_custom_product_number_field’, esc_attr($woocommerce_custom_product_number_field));
// Custom Product Textarea Field
$woocommerce_custom_procut_textarea = $_POST[‘_custom_product_textarea’];
if (!empty($woocommerce_custom_procut_textarea))
update_post_meta($post_id, ‘_custom_product_textarea’, esc_html($woocommerce_custom_procut_textarea));
}

3.3: Getting the Values from the Database

Now that you have successfully created the fields and saved their values, it is time to display those on the front end. In this case, it would be best to work with the WooCommerce custom templates. In this regard, you can choose WooCommerce store development services.

To get those values, you can make use of the popular get_post_meta() function.

<?php while (have_posts()) : the_post(); ?>
<?php wc_get_template_part(‘content’, ‘single-product’); ?>
<?php
// Display the value of custom product text field
echo get_post_meta($post->ID, ‘_custom_product_text_field’, true);
// Display the value of custom product number field
echo get_post_meta(get_the_ID(), ‘_custom_product_number_field’, true);
// Display the value of custom product text area
echo get_post_meta(get_the_ID(), ‘_custom_product_textarea’, true);
?>
<?php endwhile; // end of the loop. ?>

function woocommerce_product_custom_fields()
{
$args = array(
‘id’ => ‘woocommerce_custom_fields’,
‘label’ => __(‘Add WooCommerce Custom Fields’, ‘cwoa’),
);
woocommerce_wp_text_input($args);
}
add_action(‘woocommerce_product_options_general_product_data’, ‘woocommerce_product_custom_fields’);