Display WooCommerce product prices with Generateblocks

I develop WooCommerce sites using GeneratePress and GenerateBlocks. GeneratePress provides a strong middle ground between block themes and classic themes. It is stable, robust, comes with a full set of hooks, and allows the creation of very lightweight WordPress themes.

Display dynamic data with the “Query” block

To display products directly on a page using the Gutenberg editor, I use the GB (GenerateBlocks) Query block.

This block works like the native query loop block but with extended capabilities, offering more customization options to fetch and display data precisely.

I configure the block to fetch “product” post types.

Displaying data with a “Dynamic Tag”

Setting the dynamic tag on a “Text” block

In the post template, I add a GB Text block and select dynamic content using a Dynamic Tag as the block’s content. Here, I retrieve and display the product ID.

The Dynamic Tag products-query-attributes:true defines an option that allows me to filter how this data is displayed, using the retrieved ID to show the specific information I need.

Filter data display to show product price

After retrieving the product ID, you can look up and display its price. In this example, I apply the associated taxes directly. I also format the output in HTML and return the result.

/*  -----------------------------------------------------------------------------------------------
    DISPLAY PRODUCT PRICE & TAXES WITH GENERATEBLOCKS DYNAMIC TAG
--------------------------------------------------------------------------------------------------- */
add_filter('generateblocks_dynamic_tag_output', function($output, $options) {
    if (!isset($options['products-query-attributes']) || !is_numeric($output)) {
        return $output;
    }

    $product_id = esc_html($output);
    $product = wc_get_product($product_id);

    if (!$product) {
        return $output;
    }

    $price_html = wc_price(wc_get_price_including_tax($product));

    $html_output = '<span class="price">';
    $html_output .= $price_html . '&nbsp;';
    $html_output .= '<small class="woocommerce-price-suffix">VAT included</small>';
    $html_output .= '</span>';

    return $html_output;
}, 10, 2);Code language: PHP (php)

The code can be adapted to display other product data, such as stock status or a custom attribute like sizes when the store sells clothing items.

/*  -----------------------------------------------------------------------------------------------
    DISPLAY PRODUCT PRICE WITH TAXES, STOCK AND CUSTOM ATTRIBUTE WITH GENERATEBLOCKS DYNAMIC TAG
--------------------------------------------------------------------------------------------------- */
add_filter('generateblocks_dynamic_tag_output', function($output, $options) {
    if (!isset($options['products-query-attributes']) || !is_numeric($output)) {
        return $output;
    }

    $product_id = esc_html($output);
    $product = wc_get_product($product_id);

    if (!$product) {
        return $output;
    }

    $price_html = wc_price(wc_get_price_including_tax($product));

    $html_output = '<span class="price">';
    $html_output .= $price_html . '&nbsp;';

    $html_output .= '</span>';

    // Get the size attribute
    $the_size = $product->get_attribute('pa_taille');

    if (!empty($the_size)) {
        $sizes = array_map('trim', explode(',', $the_size));
        $size_count = count($sizes);

        $html_output .= '<div class="product-size">';

        if ($size_count === 1) {
            $html_output .= '<span class="size-value">' . esc_html($sizes[0]) . '</span>';
        } elseif ($size_count === 2) {
            $html_output .= '<span class="size-value">' . esc_html($sizes[0]) . ' ' . __('to') . ' ' . esc_html($sizes[1]) . '</span>';
        } else {
            $html_output .= '<span class="size-value">' . esc_html($sizes[0]) . ' ' . __('to') . ' ' . esc_html($sizes[$size_count - 1]) . '</span>';
        }

        $html_output .= '</div>';
    }

    if ($product->is_in_stock()) {
        $html_output .= '<div class="stock-status"><span class="in-stock">' . __('In stock') . '</span></div>';
    } else {
        $html_output .= '<div class="stock-status"><span class="out-of-stock">' . __('Out of stock') . '</span></div>';
    }

    return $html_output;
}, 10, 2);Code language: PHP (php)

This information will be displayed directly in the Gutenberg editor and on the site. The Query block allows you to display virtually any data you need.

More stable, more robust

It is a solid alternative to WooCommerce’s native blocks, which may change during development. I find the Query block more stable and lightweight.

Sources

• https://generate.support/topic/show-woocommerce-price-field-using-query-loop/
• https://learn.generatepress.com/blocks/block/query/
• https://learn.generatepress.com/blocks/block-guide/getting-started-generateblocks/dynamic-tags/