Get and display product custom field on WooCommerce archive pages

Question

I have successfully added a custom Metabox to admin product pages. The above code generate an Input type text in the Admin-Area where I can insert the city name:

add_action( 'save_post_product', 'set_post_metas_city', 10, 3 );
function set_post_metas_city( $post_id, $post, $update ) {
    if(isset($_POST['city'])) 
        update_post_meta($post_id, 'city', esc_attr($_POST['city']));
}

add_action( 'add_meta_boxes', 'metas_boxes_city', 50 );
function metas_boxes_city(){
    add_meta_box( "options-city", "City Name", 'edit_form_after_title_cidade', 'product', 'normal' );
}

function edit_form_after_title_city($post) { ?>
    <div id="mdiv">
        <input type="text" style="width: 100%" name="city" value="<?php echo($post ? get_post_meta($post->ID,'city',true) : ''); ?>" id="city" spellcheck="true" autocomplete="off" placeholder="<?php _e('Insert the city'); ?>">
    </div>
    <?php 
}

Code is in the active theme's functions.php file.

Now I use the following the hooked function, trying to display on the Shop Page, the custom field value (the city name) as follows:

// define the woocommerce_after_shop_loop_item callback 

function action_woocommerce_after_shop_loop_item(  ) { 

// make action magic happen here... 

echo($post ? get_post_meta($post->ID,'city',true) : '');    
    
}; 
             
// add the action 
add_action( 'woocommerce_after_shop_loop_item', 'action_woocommerce_after_shop_loop_item', 10, 0 ); 

So I am trying to get something like:

[Product Picture]
**City**
Category
Cake Ananas
$4,00
[BUY BUTTON]

But it still doesn't shows nothing up.

If I use a static content inside the echo, I get the desired display on the Shop Page:

// define the woocommerce_after_shop_loop_item callback 
function action_woocommerce_after_shop_loop_item(  ) { 
    // make action magic happen here... 
    echo "Statictest";  
}; 

But the correct variable is missing..

Another point is, I don't know in this case in which page to run the action.

// run the action
do_action( 'woocommerce_after_shop_loop_item' ); 

What am I doing wrong please? Could someone give a Help please?

Answer 1

The main problem was in your last function with $post->ID . Since WooCommerce 3, there is also a much better hook than save_post_product . Try the following revisited code instead:

// Add custom product meta box
add_action( 'add_meta_boxes', 'add_product_metas_box_city', 50 );
function add_product_metas_box_city(){
    add_meta_box( "options-city", __("City Name"), 'product_metas_box_city_content_callback', 'product', 'normal', 'high' );
}

// custom product meta box
function product_metas_box_city_content_callback( $post ) {
    $value = get_post_meta( $post->ID, 'city', true );

    echo '<div id="mdiv">
        <input type="text" style="width: 100%" name="city" value="'. $value .'" id="city" spellcheck="true" autocomplete="off" placeholder="'. __('Insert the city') .'">
    </div>';
}

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

// Display city value on frontend products loop
add_action( 'woocommerce_after_shop_loop_item', 'action_woocommerce_after_shop_loop_item', 10, 0 );
function action_woocommerce_after_shop_loop_item() {
    global $product;

    $city = $product->get_meta('city');

    if ( $city ) {
        echo '<p class="city">'. $city .'</p>';
    }
}

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