Woocommerce - Display single product attribute(s) with shortcodes in Frontend

Question

i\'ve read many Q/A\'s here during the last few days, but unfortunately none of them solved my issue.

I\'m trying to fetch product attributes and display them on the

Answer 1

While I am still not 100% clear what you're after, what I'm going to create is a shortcode that creates a list of all terms in all attributes. To make it more flexible I'll add support for a shortcode parameter so you can create a list of specific attribute terms.

One major thing you need to alter from your code, is that shortcodes need to RETURN a string and not ECHO out html. Echoing out shortcodes can result in unexpected weirdness.

/**
 * Attributes shortcode callback.
 */
function so_39394127_attributes_shortcode( $atts ) {

    global $product;

    if( ! is_object( $product ) || ! $product->has_attributes() ){
        return;
    }

    // parse the shortcode attributes
    $args = shortcode_atts( array(
        'attributes' => array_keys( $product->get_attributes() ), // by default show all attributes
    ), $atts );

    // is pass an attributes param, turn into array
    if( is_string( $args['attributes'] ) ){
        $args['attributes'] = array_map( 'trim', explode( '|' , $args['attributes'] ) );
    }

    // start with a null string because shortcodes need to return not echo a value
    $html = '';

    if( ! empty( $args['attributes'] ) ){

        foreach ( $args['attributes'] as $attribute ) {

            // get the WC-standard attribute taxonomy name
            $taxonomy = strpos( $attribute, 'pa_' ) === false ? wc_attribute_taxonomy_name( $attribute ) : $attribute;

            if( taxonomy_is_product_attribute( $taxonomy ) ){

                // Get the attribute label.
                $attribute_label = wc_attribute_label( $taxonomy );

                // Build the html string with the label followed by a clickable list of terms.
                // Updated for WC3.0 to use getters instead of directly accessing property.
                $html .= get_the_term_list( $product->get_id(), $taxonomy, '<li class="bullet-arrow">' . $attribute_label . ': ' , ', ', '</li>' ); 
            }

        }

        // if we have anything to display, wrap it in a <ul> for proper markup
        // OR: delete these lines if you only wish to return the <li> elements
        if( $html ){
            $html = '<ul class="product-attributes">' . $html . '</ul>';
        }

    }

    return $html;
}
add_shortcode( 'display_attributes', 'so_39394127_attributes_shortcode' );

Usage: This would be used in 1 of 2 ways.

First, to display specific attributes use:

[display_attributes attributes="color|material"]

Second, to display all attributes use:

[display_attributes]

Edit

Here's an always single display edition:

/**
 * Attribute shortcode callback.
 */
function so_39394127_singular_attribute_shortcode( $atts ) {

    global $product;

    if( ! is_object( $product ) || ! $product->has_attributes() ){
        return;
    }

    // parse the shortcode attributes
    $args = shortcode_atts( array(
        'attribute' => ''
    ), $atts );

    // start with a null string because shortcodes need to return not echo a value
    $html = '';

    if( $args['attribute'] ){

        // get the WC-standard attribute taxonomy name
        $taxonomy = strpos( $args['attribute'], 'pa_' ) === false ? wc_attribute_taxonomy_name( $args['attribute'] ) : $args['attribute'];

        if( taxonomy_is_product_attribute( $taxonomy ) ){

            // Get the attribute label.
            $attribute_label = wc_attribute_label( $taxonomy );

            // Build the html string with the label followed by a clickable list of terms.
            // Updated for WC3.0 to use getters instead of directly accessing property.
            $html .= get_the_term_list( $product->get_id(), $taxonomy, $attribute_label . ': ' , ', ', '' );   
        }

    }

    return $html;
}
add_shortcode( 'display_attribute', 'so_39394127_singular_attribute_shortcode' );

This removes all HTML markup, and so you'd need to provide your own... which would happen if you are making a custom list.

<ul>
    <li class="arrow">Static List Item</li>
    <li class="arrow">[display_attribute attribute="color"]</li>
<ul>

EDIT: This code can be added to your theme's functions.php, but preferably either in a site-specific plugin or via the Code Snippets plugin.

Answer 2

If anyone else just wants to simply output the attribute value as text, replace the $html .= line with this:

$html .= strip_tags(get_the_term_list($product->get_id(), $taxonomy));

@helgatheviking There must be a more elegant way than this! :)