Display WooCommerce size product attribute on shop page

Question

I'm using this code to display size attributes below each product on the shop archive page, but it throws the error below. How do I change the code to fix this error? My thoughts the code has depreciated.

add_action('woocommerce_after_shop_loop_item_title', 'add_attribute', 5);
function add_attribute() {
    $desired_att = 'Size';
    global $product;
    $product_variable = new WC_Product_Variable($product->id);
    $product_variations = $product_variable->get_available_variations();
    $numItems = count($product_variations);

    echo '<span class="price">';
    if ($numItems == 1) {
        foreach ($product_variations as $variation) {
            echo $variation[attributes]['attribute_pa_size'];
        }
    } else if ($numItems > 1) {
        $i = 0;
        foreach ($product_variations as $variation) {
            if (++$i === $numItems) {
                echo $variation[attributes]['attribute_pa_size'];
            } else {
                echo $variation[attributes]['attribute_pa_size'] . ", ";
            }
        }
    }
    echo '</span>';
}

Error Message

Notice: id was called
incorrectly
. Product properties should not be accessed directly. Backtrace: require('wp-blog-header.php'), require_once('wp-includes/template-loader.php'), include('/plugins/genesis-connect-woocommerce/templates/taxonomy.php'), genesis, do_action('genesis_loop'), WP_Hook->do_action, WP_Hook->apply_filters, genesiswooc_product_taxonomy_loop, genesiswooc_content_product, wc_get_template_part, load_template, require('/plugins/woocommerce/templates/content-product.php'), do_action('woocommerce_after_shop_loop_item_title'), WP_Hook->do_action, WP_Hook->apply_filters, add_attribute, WC_Abstract_Legacy_Product->__get, wc_doing_it_wrong Please see
Debugging in WordPress
for more information. (This message was added in version 3.0.) in
/home/public_html/wp-includes/functions.php
on line
4773

Answer 1

Your code is outdated since WooCommerce 3.
First, you need to target variable products type only to avoid errors on other products types and also $product is already the product object.

Also you can also directly use the WC_Product method get_attribute() and your code will be much more simpler, compact and efficient:

add_action( 'woocommerce_after_shop_loop_item_title', 'display_size_attribute', 5 );
function display_size_attribute() {
    global $product;

    if ( $product->is_type('variable') ) {
        $taxonomy = 'pa_size';
        echo '<span class="attribute-size">' . $product->get_attribute($taxonomy) . '</span>';
    }
}

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

Answer 2

You can use a product global object and it's methods in Woocommerce 4.3

add_action('woocommerce_after_shop_loop_item_title', 'cstm_display_product_category', 5);

function cstm_display_product_category()
{
  global $product;
  $size = $product->get_attribute('pa_size');

 if(isset($size)){
    echo '<div class="items"><p>Size: ' . $size . '</p></div>';
 }
}