Search code examples
wordpresswoocommercebackendproducthook-woocommerce

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


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>';
}

Solution

  • 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>';
        }
    }