How to show product attributes on category page?

About this:

Showing additional information about a product makes it easier and faster for the customer to decide if the product or service is what they are looking for. These product attributes are set for most products and are a requirement for variable products too. Here we will take you step-by-step on how to achieve this.

Requirements

There are multiple ways to make these edits. Most of them are good too but these requirements are free and will be a great help to make changes to templates and more.

• FileZilla for transferring files. Download FileZilla
  You will need FTP details  from your hosting to connect. If you don’t want to use FileZilla/FTP, your file manager in hosting panel will do just fine.
• Visual Studio Code* for editing files. Download Visual Studio Code
  Any other file editor will work, or even notepad.
  _{* = Not to be confused with Visual Studio}
• Flatsome Child Theme

EXPLAINING THE CHILD THEME
Why a Child Theme?

A Child Theme is a fundamental part of editing templates which is often overlooked. Why is it important? The Flatsome main theme is updated regularly which essentially replaces and overwrites files. The child theme is separate and will not receive these updates so all files within will not be edited/overwritten/replaced. This way you don’t have to edit the template every time there is an update.

Step 1: Download the childs functions.php

1. Find and download the file functions.php (do not remove it) witihin the child theme. Usually found here:
   public_html(or www)/wp-content/themes/flatsome-child/functions.php
2. Open the downloaded file functions.php with your file editor. (do not rename it)

Step 2: Editing the template

Add the following code to the functions.php. It loops through the items and looks for product attributes. If they are present a label will be created and the value shown. This will be wrapped in a container and placed with the product on the category page.

// Add product attributes to shop page
add_action('woocommerce_after_shop_loop_item_title','add_attribute');
function add_attribute() {
    global $product;

    // Replace with own Attributes
    $product_attributes = array( 'pa_activity', 'pa_location', 'pa_persons' );
    $attr_output = array();


    // Loop through the array of product attributes
    foreach( $product_attributes as $taxonomy ){
        if( taxonomy_exists($taxonomy) ){
            $label_name = get_taxonomy( $taxonomy )->labels->singular_name;
            $value = $product->get_attribute($taxonomy);
            
            if( !empty($value) ){
                // Storing attributes for output
                $attr_output[] = '<span class="'.$taxonomy.'">'.$label_name.': '.$value.'</span>';
            }
        }
    }


    // Output attribute name / value pairs separate by a "<br>"
    echo '<div class="product-attributes">'.implode( '<br>', $attr_output ).'</div>';
}

Step 3: Upload the functions.php

1. Upload and replace the functions.php in:
   public_html(or www)/wp-content/themes/flatsome-child/