Add product attribute to Woocommerce's blocks in Gutenberg Add product attribute to Woocommerce's blocks in Gutenberg wordpress wordpress

Add product attribute to Woocommerce's blocks in Gutenberg


I was dealing with the exact same problem as you and I found the answer by digging deeply on the WC blocks plugin repo.

I found that you have to apply a filter to this hook: woocommerce_blocks_product_grid_item_html

The original HTML is this:

<li class="wc-block-grid__product">        <a href="{$data->permalink}" class="wc-block-grid__product-link">            {$data->image}            {$data->title}        </a>        {$data->badge}        {$data->price}        {$data->rating}        {$data->button}</li>

So that way you can filter the html code and modify it by adding this chunk of code to your functions.php and customizing it to fit your needs

function wc_add_date_to_gutenberg_block( $html, $data, $product ) {    $dateStr = get_post_meta($product->id, 'ticket_start_time', true);    $date = new DateTime($dateStr);    $data->date = "<p>Date: " . $date->format('d-m-Y H:i') . "</p>";    $output = "<li class=\"wc-block-grid__product\">        <a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">            {$data->image}            {$data->title}        </a>        {$data->date} <- I added this one        {$data->badge}        {$data->price}        {$data->rating}        {$data->button}</li>    ";    return $output;}add_filter("woocommerce_blocks_product_grid_item_html", "wc_add_date_to_gutenberg_block", 10, 3);


I'm not totally clear on what you're asking. You reference Gutenberg Blocks often, but have linked to a WooCommerce repository that doesn't have any Gutenberg Blocks.

But if I'm understanding you correctly, you're looking for the PHP template that controls products. You can find in content-product.php

You'll see a lot of calls to do_action which is core to WordPress hooks as used in plugin development.

<li <?php wc_product_class( '', $product ); ?>>    <?php    /**     * Hook: woocommerce_before_shop_loop_item.     *     * @hooked woocommerce_template_loop_product_link_open - 10     */    do_action( 'woocommerce_before_shop_loop_item' );    /**     * Hook: woocommerce_before_shop_loop_item_title.     *     * @hooked woocommerce_show_product_loop_sale_flash - 10     * @hooked woocommerce_template_loop_product_thumbnail - 10     */    do_action( 'woocommerce_before_shop_loop_item_title' );    /**     * Hook: woocommerce_shop_loop_item_title.     *     * @hooked woocommerce_template_loop_product_title - 10     */    do_action( 'woocommerce_shop_loop_item_title' );    /**     * Hook: woocommerce_after_shop_loop_item_title.     *     * @hooked woocommerce_template_loop_rating - 5     * @hooked woocommerce_template_loop_price - 10     */    do_action( 'woocommerce_after_shop_loop_item_title' );    /**     * Hook: woocommerce_after_shop_loop_item.     *     * @hooked woocommerce_template_loop_product_link_close - 5     * @hooked woocommerce_template_loop_add_to_cart - 10     */    do_action( 'woocommerce_after_shop_loop_item' );    ?></li>

If you do a search for the action hooks defined in content-product.php, you'll find them defined in wc-template-hooks.php. Hooks are named actions that functions are added to. For example if you look into the woocommerce_after_shop_loop_item action, you'll find these two functions being attached to it.

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

The woocommerce_template_loop_product_link_close and woocommerce_template_loop_add_to_cart functions are defined in wc-template-functions.php

You could create an entirely new content-product.php file in your theme by creating a file in yourtheme/woocommerce/content-product.php, however you then lose a lot of the built in power and compatibility of WooCommerce.

Better would be to remove then add new actions to the woocommerce_after_shop_loop_item hook. For example, woocommerce_template_loop_product_link_close is currently defined as:

function woocommerce_template_loop_product_link_close() {    echo '</a>';}

You could overwrite this by doing this in your functions.php file:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );function custom_template_loop_product_link_close() {    echo 'Hello world!</a>';}add_action( 'woocommerce_after_shop_loop_item', 'custom_template_loop_product_link_close', 5 );

I hope this helps.