Add custom field to product inventory tab and display value on single product and shop archive pages in WooCommerce

Viewed 325

I think that this is a very easy fix - but each time I put in the hook - I am getting a WordPress Critical Error and I do not know what I am doing wrong - new to Hooks, so please forgive me.

I am trying to just print the value that I have saved in the backend, to pull through to the front end. Any advice?

This code is in the functions.php:

//Custom Colour Text Box

add_action( 'woocommerce_product_options_inventory_product_data', 'wc_custom_add_custom_fields' );
function wc_custom_add_custom_fields() {
    // Print a custom text field
    woocommerce_wp_text_input( array(
        'id' => '_custom_text_field',
        'label' => 'Product Colour',
        'description' => 'This is where you put the colour of the product in.',
        'desc_tip' => 'true',
        'placeholder' => 'Custom Colour'
    ) );
}
add_action( 'woocommerce_process_product_meta', 'wc_custom_save_custom_fields' );
function wc_custom_save_custom_fields( $post_id ) {
    if ( ! empty( $_POST['_custom_text_field'] ) ) {
        update_post_meta( $post_id, '_custom_text_field', esc_attr( $_POST['_custom_text_field'] ) );
    }
}
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_text_field', true );

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

/**** Display on the Product Page ***/

add_action( 'woocommerce_single_product_summary', 'custom_text', 9 );
function custom_text() {
  print '<p class="my-custom-field"></p>';
}
1 Answers

I do not get an error, I made minor changes here and there.

  • if ( ! empty( $_POST[.. will only work if the field is NOT empty, if nothing is filled in, it will not be saved.
  • get_post_meta( $product->get_id(), '_custom_product_text_field',... _custom_product_text_field is not the same as _custom_text_field
  • at woocommerce_single_product_summary you only print text, the corresponding code is missing
//Custom Colour Text Box
add_action( 'woocommerce_product_options_inventory_product_data', 'wc_custom_add_custom_fields' );
function wc_custom_add_custom_fields() {
    // Print a custom text field
    woocommerce_wp_text_input( array(
        'id' => '_custom_text_field',
        'label' => 'Product Colour',
        'description' => 'This is where you put the colour of the product in.',
        'desc_tip' => 'true',
        'placeholder' => 'Custom Colour'
    ) );
}
add_action( 'woocommerce_process_product_meta', 'wc_custom_save_custom_fields', 10, 1 );
function wc_custom_save_custom_fields( $post_id ) {
    $product = wc_get_product( $post_id );

    $my_text_field = isset( $_POST['_custom_text_field'] ) ? $_POST['_custom_text_field'] : '';

    $product->update_meta_data( '_custom_text_field', sanitize_text_field( $my_text_field ) );
    $product->save();
}

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

    // Get product
    $product = wc_get_product( $post->ID );

    // Check for the custom field value
    $my_text_field = $product->get_meta( '_custom_text_field' );

    // Display
    if( $my_text_field ) {
        echo '<p class="my-custom-field">' . $my_text_field . '</p>';
    }
}

/**** Display on the Product Page ***/
add_action( 'woocommerce_single_product_summary', 'custom_text' );
function custom_text() {
    global $post;

    // Get product
    $product = wc_get_product( $post->ID );

    // Check for the custom field value
    $my_text_field = $product->get_meta( '_custom_text_field' );

    // Display
    if( $my_text_field ) {
        echo '<p class="my-custom-field">' . $my_text_field . '</p>';
    }
}
Related