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.