CODEWITHSUNDEEP
phpwordpresswoocommerceproductcustom-fields
AR Digital Support
AR Digital Support

Reputation: 11

Save and display a custom field in WooCommerce product description tab

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?

Upvotes: 1

Views: 1106

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253804

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.

Upvotes: 1

Related Questions