1

I am building my first woocommerce site, Im learning how to create custom fields for products. I would like to create a text field in general tab, save that field and display on the front end to customers.

Here is the code I used to display the text field in the general tab of products. 

  function prefix_add_text_input() {
  $args = array(
    'label' =>__('Serial Number', 'woocommerce'), // Text in the label in the editor.
    'placeholder' => '', // Give examples or suggestions as placeholder
    'class' => '',
    'style' => '',
    'wrapper_class' => '',
    'value' => '', // if empty, retrieved from post_meta
    'id' => 'serial_number', // required, will be used as meta_key
    'name' => '', // name will be set automatically from id if empty
    'type' => '',
    'desc_tip' => 'true',
    'data_type' => '',
    'custom_attributes' => '', // array of attributes you want to pass 
    'description' => 'Enter the serial number on your rifle here'
  );
  woocommerce_wp_text_input( $args );
}

How do I get the field to save, and display on the front end. Ideally display in the tabs with product description?

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
AR Digital Support
  • 11
  • 3

1 Answers1

1

Here below you will find the way to save your product custom field value and display it in the product description tab section:

// Add a Custom product Admin Field
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_product_general_field' );
function add_custom_product_general_field() {
    echo '<div class="options_group">';

    woocommerce_wp_text_input( array(
        'id'            => '_serial_number', // required, will be used as meta_key
        'label'         =>__('Serial Number', 'woocommerce'), // Text in the label in the editor.
        'desc_tip'      => 'true',
        'description'   => __('Enter the serial number on your rifle here', 'woocommerce')
    ) );

    echo '</div>';
}

// Save the field value
add_action( 'woocommerce_admin_process_product_object', 'save_custom_product_general_field' );
function save_custom_product_general_field( $product ){
    if( isset($_POST['_serial_number']) )
        $product->update_meta_data( '_serial_number', sanitize_text_field( $_POST['_serial_number'] ) );
}

// Display the custom field value below product description tab
add_filter( 'the_content', 'display_product_serial_number' );
function display_product_serial_number( $content ) {

    // Only for single product pages
    if ( is_product() ) {
        global $product;

        if( $value = $product->get_meta( '_serial_number' ) ) {
            $content .= '<p><strong>' . __("Serial number:", "woocommerce") . '<strong> ' . $value . '<p>'; 
        }
    }
    return $content;
}

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

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • I advised you in another post (comments), is this good for you? otherwise I will delete it https://stackoverflow.com/a/61107308/11987538 – 7uc1f3r Apr 09 '20 at 06:16
  • 1
    @7uc1f3r Very awesome thanks. Maybe for future is better to give people [the top user list link for WooCommerce tagged questions](https://stackoverflow.com/tags/woocommerce/topusers). You didn't free lance yourself? – LoicTheAztec Apr 09 '20 at 08:26
  • Hello Loic! I hope you're fine and healthy. Since you've helped me, I've learned a lot but currently I'm so stuck with a WP related thing. Can you may take a look at my question? I'm not making any progress here. All the best for you and your family in this time. https://stackoverflow.com/questions/61127468/woocommerce-function-not-working-anymore-after-moving-into-a-class – Mr. Jo Apr 09 '20 at 19:17