在产品单页上显示自定义和标准产品属性 WooCommerce

Question

I have searched all over for this, and I have found a great code to get the standard product attributes displayed, but the custom ones (that do not start with pa_) are not being displayed.

First things first, the setup: I have created a product single template with Elementor and normally I can just add the module additional information and I am done. I've done it before. :)

But now I have created a lay-out where these product attributes are being displayed in an accordion in which you cannot place this module.

So after a loooooong search online I have found a snippet made by helgatheviking to create a shortcode to call all the product attributes:

/**
 * Attributes shortcode callback on productpage.
 */
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="prod-attr">' . $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' );

After adding the shortcode [display_attributes] in the accordion, I get all the standard WC attributes shown that have been created via the standard way: products -> attributes -> create new. So that is great!

But not the custom attributes, that you create inside the productpage itself -> Product data -> custom product attribute -> add (screenshot of what I mean: https://gyazo.com/f2619c7f11d295f4897b38f08d76453b )

Screenshot product page custom attributes are not being shown on front: https://gyazo.com/4c126f7082c6a856d1cf30b712daa37f

I think this is because that these custom product attributes do not contain the pa_ part in front of the meta value like for instance pa_type-speaker (self-created standard attribute).

How can I get the custom attributes also shown? I have tried to remove the pa_ from the code above, but that does not work and I cannot find what to do next. Can you guys help me out here? thx!

Answer 1

Elementor has helped me out on this one!

The solution:

Open the product single template page, Add the additional information module in a row. Create a global widget of this object. Add the shortcode of this global widget in the tabbed module and your done. :)