Implement product card and grid design into Gutenberg blog post.

Hi!

We are usually writing lots of marketing and review posts with gutenberg (gutenberg is good for post content).
Our problem is the product listing design.

Could you help me, how can using the Hitek product design in gutenberg? We dont want to use for post’s Elementor.

Attachments:

You must be logged in to view attached files.

Hello,

Product design in the theme is implemented only through Elementor widgets. You can use an HTML block created in Elementor and use it in Gutenberg content. You need to create an HTML block and copy the shortcode – https://monosnap.com/file/FMfi2yyrxeciLCdRBHnT7rdMgpnJcM, then go to Gutenberg and use the Shortcode block and paste the copied HTML block shortcode – https://monosnap.com/file/PWmwhjy6wllbKUrb9UziAF4HhgUJRc

Kind Regards

Hi Luke!

Thanks for you answer.

This doesn’t work because in each article and within it, if there are multiple such lists, I always have to create unique fixed html blocks. This is a huge waste of time and database garbage. It would be unsustainable to operate in the long term.

But if there was, say, a css class that, if I specify it, would take on that design, it would still be less manual work and burden.

BTW, If the HITEK theme finally got the gutenberg mode, like woodmart did, it would be even more amazing! 😀

Hi Luke! With helping by Ai, I made a small snippet exclusively for hitek theme and Gutenberg Hand-Picked Products block.

I have run 2-3 test and seem to be working. (But not optimal usage it! It would be more better that built-in theme solution)

Although I added various filters to prevent the script from running every time the page loads, this rendering solution is still quite resource-intensive.

/**
* Plugin Name: Hitek Classic Theme Optimized Product Block Renderer
* Description: Conditionally intercepts the ‘woocommerce/product-collection’ block on the front-end and replaces its output with a theme-friendly [products] shortcode. This filter only runs on pages that actually contain the block.
* Version: 6.0.0 (Optimized)
* Author: simplecreative.hu
* License: GPL-2.0-or-later
*/

if ( ! defined( ‘ABSPATH’ ) ) {
exit;
}

/**
* STEP 1: The “Conditional Loader”
* This function checks if the converter is needed on the current page and only activates it if necessary.
*/
function sony_conditionally_add_product_block_filter() {

// The filter is not needed in the admin area, RSS feeds, REST API requests, etc.
// is_singular() ensures this runs only on single posts/pages where searching for blocks makes sense.
if ( is_admin() || ! is_singular() ) {
return;
}

// Use WordPress’s built-in has_block() function to check if the current post’s
// content contains our target block. This is the fastest and most efficient way to check.
if ( has_block( ‘woocommerce/product-collection’ ) ) {
// IF, AND ONLY IF, the block is found on the page,
// then we add our heavyweight converter/renderer filter.
add_filter( ‘render_block’, ‘sony_final_force_classic_output’, 20, 2 );
}
}
// The ‘wp’ action hook is ideal for this check. It runs after the main query is set up
// but before rendering begins, so has_block() works reliably.
add_action( ‘wp’, ‘sony_conditionally_add_product_block_filter’ );

/**
* STEP 2: The “Converter” Function (unchanged)
* This function will only be executed if the check in STEP 1 was successful.
* It intercepts the block, reads its attributes, and returns a [products] shortcode instead.
*
* @param string $block_content The original, default HTML content of the block.
* @param array $block The parsed block data containing its name and attributes.
* @return string The modified block content (the output of our shortcode).
*/
function sony_final_force_classic_output( $block_content, $block ) {

// As a safeguard, we double-check the block name, though it should only receive the correct blocks now.
if ( ! isset( $block[‘blockName’] ) || $block[‘blockName’] !== ‘woocommerce/product-collection’ ) {
return $block_content;
}

// Read the product IDs from the site-specific ‘woocommerceHandPickedProducts’ attribute we discovered.
$product_ids = $block[‘attrs’][‘query’][‘woocommerceHandPickedProducts’] ?? [];

// If this is not a “Hand-Picked” block (the array is empty), we should leave it alone
// to avoid breaking other block types (e.g., “Newest Products”).
if ( empty( $product_ids ) ) {
return $block_content;
}

// Assemble the shortcode from the block’s attributes.
$ids_string = implode( ‘,’, array_map( ‘absint’, $product_ids ) );

// Get the column count from the displayLayout attribute, as found during diagnostics.
$columns = $block[‘attrs’][‘displayLayout’][‘columns’] ?? 4;

// For hand-picked products, ‘post__in’ ensures the shortcode respects the manual selection order.
$orderby = ‘post__in’;

$shortcode_atts = [
‘ids’ => esc_attr( $ids_string ),
‘columns’ => absint( $columns ),
‘orderby’ => $orderby,
];

$atts_str = ”;
foreach ( $shortcode_atts as $key => $value ) {
$atts_str .= ” {$key}=\”” . esc_attr($value) . “\””;
}

// Execute the shortcode and return its output, replacing the original block HTML entirely.
return do_shortcode( “[products{$atts_str}]” );
}

Hello,

Thank you for sharing your solution. At the moment, the Gutenberg editor is supported, but we don’t have plans to add custom blocks in the near future.

Kind Regards

In my opinion, it shouldn’t be said that Gutenberg is supported if it can’t incorporate the template’s design elements. 🙁

Just because I can insert Gutenberg blocks into a post that are in no way consistent with the template’s layout, doesn’t mean it’s supported.

We understand, but there are no other options at the moment. We will consider such improvements for the future updates but we don’t have a quick solution now.

[Author]

Posts