Shortcode displaying product attributes list in WooCommerce single products

Question

So I've been struggling to find any information on this and can't see any obvious way of doing it. I want to have a table in the product description listing certain attributes that I have set.

So for example in the description, I would have Title A followed by some text and a table with attributes 1, 2, and 3 then under Title B some text and attributes 4, 5, and 6.

I figured the easy way to do this would be to create a shortcode so I have tried and clearly missed something vital as it is not showing anything at all when I use it.

add_action( 'woocommerce_single_product_summary', 'show_attribute_group_a', 45 );

add_shortcode( 'show_attributes_a', 'show_attribute_group_a' );
function show_attribute_group_a() {
    global $product;
    $attribute1 = $product->get_attribute('attribute1');
    $attribute2 = $product->get_attribute('attribute2');
    ?>
    <table class="">
        <tr class="">
            <th class="">Attribute 1</th>
            <td class=""><?php echo $attribute1; ?></td>
        </tr>
        <tr class="">
            <th class="">Attribute 2</th>
            <td class=""><?php echo $attribute2; ?></td>
        </tr>
    </table>
    <?php
}

So where I have tried to pull the attributes I have used the slug of the attribute is that correct? But still, I would expect to see an empty table even if that part was wrong. There's obviously something fundamentally wrong and I can't see what.

Answer 1

When building a shortcode, the output is never echoed but returned. Try the following instead:

// The shortcode
add_shortcode( 'show_attributes_a', 'attribute_group_a_shortcode' );
function attribute_group_a_shortcode() {
    global $product;

    $attribute1  = $product->get_attribute('attribute1');
    $attribute2  = $product->get_attribute('attribute2');
    $output_html = ''; // Initializing

    if ( ! empty($attribute1) || ! empty($attribute2) ) {
        $output_html .= '<table class="">';

        if ( ! empty($attribute1) ) {
            $output_html .= '<tr class="">
                <th class="">' . __("Attribute 1", "woocommerce") . '</th>
                <td class="">' . $attribute1 . '</td>
            </tr>';
        }

        if ( ! empty($attribute2) ) {
            $output_html .= '<tr class="">
                <th class="">' . __("Attribute 2", "woocommerce") . '</th>
                <td class="">' . $attribute2 . '</td>
            </tr>';
        }

        $output_html .= '</table>';
    }
    return $output_html; // Always use "return" in a shortcode, never use "echo"
}

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

---

Now you can use the shorcode [show_attributes_a] in the text editor for product description or short description, to display the custom table of product attributes on single product pages.

Or you can use the following code to display the custom table of product attributes before product tabs:

// Display the shortcode output in Single product pages
add_action( 'woocommerce_single_product_summary', 'display_table_attribute_group_a', 45 );
function display_table_attribute_group_a() {
    echo do_shortcode('[show_attributes_a]');
}

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