Hide WooCommerce product attributes with empty values from a custom shortcode

Question

I used the code below to display a certain amount of attributes within a Custom Tab by using a shortcode. This works fine but not all products carry the same specs. How can I hide the lines that contain no data?

I entered this code:

// Display grouped attributes Gewicht en Omvang
function get_product_attributes_gewicht_shortcode( $atts ) {
extract( shortcode_atts( array(
    'id'    => get_the_ID(),
), $atts, 'display-attributes-gewicht' ) );

global $product;

if ( ! is_a($product, 'WC_Product') ) {
    $product = wc_get_product( $id );
}
if ( is_a($product, 'WC_Product') ) {
    $gewicht = $product->get_attribute( 'Gewicht (gram)' );
    $hoogte = $product->get_attribute( 'Hoogte (mm)');
    $lengte = $product->get_attribute( 'Lengte (mm)');
    $breedte = $product->get_attribute( 'Breedte (mm)');
    return '<div class="divTableAtt LichtBlauweRegels">' .
                '<div class="divTableAttBody">' .
                    '<div class="divTableAttRow">' .
                        '<div class="divTableAttCell">Gewicht (gram)</div>' .
                        '<div class="divTableAttCell">' . $gewicht . '</div>' .
                    '</div>' .
                    '<div class="divTableAttRow">' .
                        '<div class="divTableAttCell">Hoogte (mm)</div>' .
                        '<div class="divTableAttCell">' . $hoogte . '</div>' .
                    '</div>' .
                    '<div class="divTableAttRow">' .
                        '<div class="divTableAttCell">Lengte (mm)</div>' .
                        '<div class="divTableAttCell">' . $lengte . '</div>' .
                    '</div>' .
                    '<div class="divTableAttRow">' .
                        '<div class="divTableAttCell">Breedte (mm)</div>' .
                        '<div class="divTableAttCell">' . $breedte . '</div>' .
                    '</div>' .
                '</div>' .
            '</div>';
}
}
add_shortcode( 'display-attributes-gewicht', 'get_product_attributes_gewicht_shortcode' );`

I want to hide the if the attirube in that row is empty. I tried to use and if statement around that row, but it doesn't work.

if (isset($breedte)){
return '<div class="divTableAttRow">' .
'<div class="divTableAttCell">Breedte (mm)</div>' .
'<div class="divTableAttCell">' . $breedte . '</div>' .
'</div>';
}

I did close the line before with a ; and started the line after with a new 'return' statement.

The results are that the entire result of other functions are shown and not only this set as it is suposed to.

I am still learning this and figuring out how to get it to work.

Answer 1

Try the following revised shortcode that will display only the defined product attributes:

// Display grouped attributes Gewicht en Omvang
add_shortcode( 'display-product-attributes', 'shortcode_display_product_attributes' );
function shortcode_display_product_attributes( $atts ) {
    extract( shortcode_atts( array(
        'id'    => get_the_ID(),
    ), $atts, 'display-product-attributes' ) );

    global $product;

    if ( ! is_a($product, 'WC_Product') ) {
        $product = wc_get_product( $id );
    }

    if ( is_a($product, 'WC_Product') ) {
        $gewicht = $product->get_attribute('Gewicht (gram)');
        $hoogte  = $product->get_attribute('Hoogte (mm)');
        $lengte  = $product->get_attribute('Lengte (mm)');
        $breedte = $product->get_attribute('Breedte (mm)');

        if ( $gewicht || $hoogte || $lengte || $breedte ) {
            $output = '<div class="divTableAtt LichtBlauweRegels">
            <div class="divTableAttBody">';

            if ( $gewicht ) {
                $output .= '<div class="divTableAttRow">
                <div class="divTableAttCell">Gewicht (gram)</div>
                <div class="divTableAttCell">' . $gewicht . '</div>
                </div>';
            }

            if ( $hoogte ) {
                $output .= '<div class="divTableAttRow">
                <div class="divTableAttCell">Hoogte (mm)</div>
                <div class="divTableAttCell">' . $hoogte . '</div>
                </div>';
            }

            if ( $lengte ) {
                $output .= '<div class="divTableAttRow">
                <div class="divTableAttCell">Lengte (mm)</div>
                <div class="divTableAttCell">' . $lengte . '</div>
                </div>';
            }

            if ( $breedte ) {
                $output .= '<div class="divTableAttRow">
                <div class="divTableAttCell">Breedte (mm)</div>
                <div class="divTableAttCell">' . $breedte . '</div>
                </div>';
            }

            return $output . '</div></div>';
        }
    }
}

Code goes in functions.php file of your child theme (or in a plugin). It should work.