Allow a custom field value to be removable in WooCommerce

Question

I added a custom subtitle field for woo-commerce products. When I fill its field from the dashboard it appears in the product. I can update the text but I can't remove its value it appears again when I update the product.
Here the code. I copied from somewhere

 <?php

 // 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_subtitle',
        'placeholder' => 'Custom Product Subtitle',
        'label' => __('Custom Product Subtitle', 'woocommerce'),
        'desc_tip' => 'true'
      )
   );

 }

 function woocommerce_product_custom_fields_save($post_id)
 {
 // Custom Product Text Field

 $woocommerce_custom_product_text_field = $_POST['_custom_product_subtitle'];
 if (!empty($woocommerce_custom_product_text_field))
 update_post_meta($post_id, '_custom_product_subtitle', 
 esc_attr($woocommerce_custom_product_text_field));
 }

// To show after the title

add_action( 'woocommerce_after_shop_loop_item_title', 'custom_field_display_below_title', 2 );
function custom_field_display_below_title(){
global $product;

// Get the custom field value
$custom_field = get_post_meta( $product->get_id(), '_custom_product_subtitle', true );

// Display
if( ! empty($custom_field) ){
    echo '<p class="custom-product-subtitle">'.$custom_field.'</p>';
}
}

This is the result of the code, it also displays where I want to, but I can't make remove the text it appears again when I update

Answer 1

To be able to reset (empty) this custom field, just replace the code line (from your 2nd function):

if( ! empty($woocommerce_custom_product_text_field) ){

by:

if( isset($woocommerce_custom_product_text_field) ){

So now you can remove the field value and save it.

---

Now since WooCommerce 3, your code is a bit outdated… Also, you should use shorter keys and variable names.

Below is your revisited code (changed the field meta key from '_custom_product_subtitle' to simply '_subtitle', replaced a hook and made some other changes).

// Display a text Field (admin single product)
add_action( 'woocommerce_product_options_general_product_data', 'display_admin_product_custom_text_field' );
function woocommerce_product_custom_fields() {
    echo '<div class="product_custom_field">';

    woocommerce_wp_text_input( array(
        'id' => '_subtitle',
        'label'       => __('Custom subtitle', 'woocommerce'),
        'placeholder' => __('You can add optionally a custom subtitle', 'woocommerce'),
        'desc_tip' => 'true'
    ) );
    
    echo  '</div>'; // <== missing
}

 // Save Text Field value (admin)
add_action( 'woocommerce_admin_process_product_object', 'save_admin_product_custom_text_field_value' );
function save_admin_product_custom_text_field_value( $product ) {
    if ( isset($_POST['_subtitle']) ) {
        $product->update_meta_data( '_subtitle', sanitize_text_field($_POST['_subtitle']) );
    }
}

// Display product subtitle (front end)
add_action( 'woocommerce_after_shop_loop_item_title', 'custom_field_display_below_title', 2 );
function custom_field_display_below_title(){
    global $product;
    
    $value = $product->get_meta('_subtitle'); // Get the custom field value
    
    if( ! empty($value) ){
        echo '<p class="product-subtitle">' . $value . '</p>'; // Display
    }
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.