Show WooCommerce product attributes in custom home

Question

The below code that displays product attributes on product category archive pages and is based on "Display product attributes on specific Woocommerce product category archives page" answer thread.

However, when I add that category on the homepage, It does not display the attributes.

My code version:

// Show Attributes on Product Category Page 
add_action('woocommerce_after_shop_loop_item','display_loop_product_attribute' );
function display_loop_product_attribute() {
    global $product;

    //$product_attributes = array('pa_size', 'pa_color');
    $product_attributes = array('pa_size');
    $attr_output = array();

    // Loop through the array of product attributes
    foreach( $product_attributes as $taxonomy ){
        if( taxonomy_exists($taxonomy) ){
            if( $value = $product->get_attribute($taxonomy) ){
                // The product attribute label name
                $label_name = get_taxonomy($taxonomy)->labels->singular_name;
                // 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-custom">'.implode('<br>', $attr_output).'</div>';
}

I can't figure out how to make it work on my custom homepage that display products and on specific product category pages. For the homepage I know that the conditional tag to be used is is_home()… But how can I make it work for product category pages too?

Answer 1

Updated - The following code will display specific product attributes on:

• Home page for a custom products loop using is_front_page() WordPress conditional tag
• Defined product category archive pages using is_product_category() Woocommerce conditional tag

The code:

add_action('woocommerce_after_shop_loop_item','display_loop_product_attribute' );
function display_loop_product_attribute() {
    global $product;

    // The Product attribute to be displayed
    $product_attributes = array('pa_size');

    // The targeted Product category archive pages (slugs)
    $categories = array('t-shirts', 'hoodies', 'socks');

    $output = array(); // Initializing

    // Targetting home page and specific product category archive pages
    if( is_front_page() || is_product_category($categories) ) {

        // Loop through the array of product attributes
        foreach( $product_attributes as $taxonomy ){
            if( taxonomy_exists($taxonomy) ){
                if( $values = $product->get_attribute($taxonomy) ){
                    // The product attribute label name
                    $label_name = get_taxonomy($taxonomy)->labels->singular_name;

                    // Storing attributes for output
                    $output[] = '<span class="'.$taxonomy.'">'.$label_name.': '.$values.'</span>';
                }
            }
        }

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

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

---

Addition: To format each attribute term name in it's own <span> tag…

Insert in the function code, after this line:

                    // The product attribute label name
                    $label_name = get_taxonomy($taxonomy)->labels->singular_name; 

The following:

                    // convert string of term names to an array
                    $values = explode(', ', $values);
                    // Format each and set back to a string
                    $values = '<span>' . implode('</span> <span>', $values) . '</span>';

---

Related: Display product attributes on specific Woocommerce product category archives page