WooCommerce: Add/display Product or Variation custom field everywhere

Question

Currently using WordPress 5.1.1 and WooCommerce 3.5.7. My WooCommerce store has around 500 products, made up of simple and variable products.

Each product naturally has a SKU, but each product also has a unique ID code called 'Commodity Code'. I sell specific products to a specific industry.

I have added the code for the Custom Fields for Simple and Variable product in my functions.php file, and this works great at the moment.

My problem is, I have trying to get the 'Commodity Code' to appear under the product title in the Cart, Check Out, invoice and email.

I have read various tutorials on the internet to help me, but I am none the wiser as each tutorial does similar things in different ways. Most of the tutorials assume a user has entered the data via the front-end but my data is preset.

Tutorials I have used to help me are:

• https://businessbloomer.com/woocommerce-add-custom-field-product-variation/
• https://www.liquidweb.com/blog/custom-fields-woocommerce-products/
• https://www.tychesoftwares.com/how-to-add-custom-fields-to-woocommerce-products-subsequently-through-the-order-cycle/

<?php
// Add WooCommerce Custom Field for Commodity Code
function vp_add_commodity_code() {
  $args = array(
    'id' => 'vp_commodity_code',
    'label' => __( 'Commodity Code', 'woocommerce' ),
    'placeholder' => __( 'Enter Commodity Code here', 'woocommerce' ),
    'desc_tip' => true,
    'description' => __( 'This field is for the Commodity Code of the product.', 'woocommerce' ),
  );
  woocommerce_wp_text_input( $args );
}
add_action( 'woocommerce_product_options_sku', 'vp_add_commodity_code' );


// Save Commodity Code into WooCommerce Database
function vp_save_commodity_code( $post_id ) {
  // grab the Commodity Code
  $sku = isset( $_POST[ 'vp_commodity_code' ] ) ? sanitize_text_field( $_POST[ 'vp_commodity_code' ] ) : '';

  // grab the product
  $product = wc_get_product( $post_id );

  // save the Commodity Code custom field
  $product->update_meta_data( 'vp_commodity_code', $sku );
  $product->save();
}
add_action( 'woocommerce_process_product_meta', 'vp_save_commodity_code' );

// Display Commodity Code on the Frontend
function vp_display_commodity_code() {
    global $post;
    // Check for the Commodity Code value
    $product = wc_get_product( $post->ID );
    $title = $product->get_meta( 'vp_commodity_code' );
    if( $title ) {
    // Only display the field if we've got a value for the field title
    printf(
    '<div class="vpcommoditycode-wrapper"><strong>Commodity Code: </strong>%s</div>',
    esc_html( $title )
    );
    }
   }
   add_action( 'woocommerce_before_add_to_cart_button', 'vp_display_commodity_code' );


// Add custom field input @ Product Data > Variations > Single Variation

add_action( 'woocommerce_variation_options_pricing', 'comcode_add_custom_field_to_variations', 10, 3 ); 

function comcode_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input( array(
    'id' => 'custom_field[' . $loop . ']',
    'class' => 'short',
    'label' => __( 'Community Code', 'woocommerce' ),
    'value' => get_post_meta( $variation->ID, 'custom_field', true ),
    'placeholder' => __( 'Enter Commodity Code here', 'woocommerce' ),
    'desc_tip' => true,
    'description' => __( 'This field is for the Commodity Code of the product.', 'woocommerce' ),
)
);
}

// Save custom field on product variation

add_action( 'woocommerce_save_product_variation', 'comcode_save_custom_field_variations', 10, 2 );

function comcode_save_custom_field_variations( $variation_id, $i ) {
$custom_field = $_POST['custom_field'][$i];
if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'custom_field', esc_attr( $custom_field ) );
}

// Store custom field value into variation data

add_filter( 'woocommerce_available_variation', 'comcode_add_custom_field_variation_data' );

function comcode_add_custom_field_variation_data( $variations ) {
$variations['custom_field'] = '<div class="woocommerce_custom_field"><strong>Commodity Code: </strong><span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
return $variations;
}
?>

Can some kind PHP/WooCommerce genius help me here please by either providing the code or point me to a tutorial that would help me or name a third party WordPress Plugin that will do this.

Answer 1

I have revisited and completed your existing code as for example it was not working on product variations… This will:

• Display a custom field on admin product under inventory tab
• Display a custom field on admin product under variations tab for each variation
• Save the custom field value for products and product variations
• Display the custom field value on single product pages (also for each selected variation)
• Display the custom field value on cart and checkout pages
• Save the custom field value as order item meta data
• Display the custom field value on admin orders
• Display the custom field on orders and email notifications

The code:

// Admin: Add custom field
add_action('woocommerce_product_options_sku', 'vp_add_commodity_code' );
function vp_add_commodity_code(){

    woocommerce_wp_text_input( array(
        'id'          => '_commodity_code',
        'label'       => __('Commodity Code', 'woocommerce' ),
        'placeholder' => __('Enter Commodity Code here', 'woocommerce' ),
        'desc_tip'    => true,
        'description' => __('This field is for the Commodity Code of the product.', 'woocommerce' ),
    ) );
}

// Admin: Save custom field value for simple product inventory options
add_action('woocommerce_admin_process_product_object', 'vp_product_save_commodity_code', 10, 1 );
function vp_product_save_commodity_code( $product ){
    if( isset($_POST['_commodity_code']) )
        $product->update_meta_data( '_commodity_code', sanitize_text_field($_POST['_commodity_code']) );
}

// Admin: Add custom field in product variations options pricing
add_action( 'woocommerce_variation_options_pricing', 'vp_add_variation_commodity_code', 10, 3 );
function vp_add_variation_commodity_code( $loop, $variation_data, $variation ){

   woocommerce_wp_text_input( array(
        'id'          => '_commodity_code['.$loop.']',
        'label'       => __('Commodity Code', 'woocommerce' ),
        'placeholder' => __('Enter Commodity Code here', 'woocommerce' ),
        'desc_tip'    => true,
        'description' => __('This field is for the Commodity Code of the product.', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_commodity_code', true )
    ) );
}

// Admin: Save custom field value from product variations options pricing
add_action( 'woocommerce_save_product_variation', 'save_barcode_variations', 10, 2 );
function save_barcode_variations( $variation_id, $i ){
    if( isset($_POST['_commodity_code'][$i]) ){
        update_post_meta( $variation_id, '_commodity_code', sanitize_text_field($_POST['_commodity_code'][$i]) );
    }
}

// Frontend: Display Commodity Code on product
add_action( 'woocommerce_before_add_to_cart_button', 'vp_product_display_commodity_code' );
function vp_product_display_commodity_code() {
    global $product;

    if( $value = $product->get_meta( '_commodity_code' ) ) {
        echo '<div class="vp-ccode-wrapper"><strong>' . __("Commodity Code", "woocommerce") .
        ': </strong>'.esc_html( $value ).'</div>';
    }
}

// Frontend: Display Commodity Code on product variations
add_filter( 'woocommerce_available_variation', 'vp_variation_display_commodity_code', 10, 3 );
function vp_variation_display_commodity_code( $data, $product, $variation ) {

    if( $value = $variation->get_meta( '_commodity_code' ) ) {
        $data['price_html'] .= '<p class="vp-ccode"><small><strong>' . __("Commodity Code", "woocommerce") .
        ': </strong>'.esc_html( $value ).'</small></p>';
    }

    return $data;
}

// Frontend: Display Commodity Code on cart
add_filter( 'woocommerce_cart_item_name', 'vp_cart_display_commodity_code', 10, 3 );
function vp_cart_display_commodity_code( $item_name, $cart_item, $cart_item_key ) {
    if( ! is_cart() )
        return $item_name;

    if( $value = $cart_item['data']->get_meta('_commodity_code') ) {
        $item_name .= '<br><small class="vp-ccode"><strong>' . __("Commodity Code", "woocommerce") .
            ':</strong> ' . esc_html( $value ) . '</small>';
    }
    return $item_name;
}

// Frontend: Display Commodity Code on checkout
add_filter( 'woocommerce_checkout_cart_item_quantity', 'vp_checkout_display_commodity_code', 10, 3 );
function vp_checkout_display_commodity_code( $item_qty, $cart_item, $cart_item_key ) {
    if( $value = $cart_item['data']->get_meta('_commodity_code') ) {
        $item_qty .= '<br><small class="vp-ccode"><strong>' . __("Commodity Code", "woocommerce") .
            ':</strong> ' . esc_html( $value ) . '</small>';
    }
    return $item_qty;
}

// Save Commodity Code to order items (and display it on admin orders)
add_filter( 'woocommerce_checkout_create_order_line_item', 'vp_order_item_save_commodity_code', 10, 4 );
function vp_order_item_save_commodity_code( $item, $cart_item_key, $cart_item, $order ) {
    if( $value = $cart_item['data']->get_meta('_commodity_code') ) {
        $item->update_meta_data( '_commodity_code', esc_attr( $value ) );
    }
    return $item_qty;
}

// Frontend & emails: Display Commodity Code on orders
add_action( 'woocommerce_order_item_meta_start', 'vp_order_item_display_commodity_code', 10, 4 );
function vp_order_item_display_commodity_code( $item_id, $item, $order, $plain_text ) {
    // Not on admin
    //if( is_admin() ) return;

    if( $value = $item->get_meta('_commodity_code') ) {
        $value = '<strong>' . __("Commodity Code", "woocommerce") . ':</strong> ' . esc_attr( $value );

        // On orders
        if( is_wc_endpoint_url() )
            echo '<div class="vp-ccode"><small>' . $value . '</small></div>';
        // On Emails
        else
            echo '<div style="font-size:11px;padding-top:6px">' . $value . '</div>';
    }
}

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