WooCommerce Blocks: Hide Images Etc. From Product Grid Block

Business Bloomer enters the world of Gutenberg today, and we do it with a simple customization tutorial related to the “Product Grid” WooCommerce Gutenberg Blocks: currently these are “Best Selling Products“, “Newest Products“, “On Sale Products“, “Top Rated Products“, “Products by Category” and use the same base code…

However, all of them use custom code and not the default WooCommerce templates (and therefore we can’t take advantage of the WooCommerce hooks for the shop / product archive / product loop unfortunately), so we need to find a workaround if we wish to remove some of the default elements that come up with the product grid items: product permalink, product image, product title*, sale badge, product price*, rating*, add to cart button* in this exact order.

* As you can see from the screenshot below, actually, you can already remove the information with an asterisk from the Block settings. So, in this article, we will see how to remove the rest in case you don’t want it: permalink, image, sale badge. Enjoy!

The default WooCommerce Product Grid content options allow you to hide product title, price, rating and add to cart button. But you can’t hide image, remove the product permalink or the sale badge. In this tutorial we’ll find out how!

WooCommerce Core (Source Code)

This is the function responsible to output the Product Grid ( “Best Selling Products“, “Newest Products“, “On Sale Products“, “Top Rated Products“, “Products by Category“) blocks:

protected function render_product( $product ) {
	$data = (object) array(
		'permalink' => esc_url( $product->get_permalink() ),
		'image'     => $this->get_image_html( $product ),
		'title'     => $this->get_title_html( $product ),
		'rating'    => $this->get_rating_html( $product ),
		'price'     => $this->get_price_html( $product ),
		'badge'     => $this->get_sale_badge_html( $product ),
		'button'    => $this->get_button_html( $product ),
	);

	return apply_filters(
		'woocommerce_blocks_product_grid_item_html',
		"<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>",
		$data,
		$product
	);
}

As you can see, there is a handy filter hook (woocommerce_blocks_product_grid_item_html) that we can use if we wish to override the HTML result.

We can remove (like in this tutorial), reorder (stay tuned) and even add custom info such as custom fields or HTML (stay tuned) to the item blocks. Here follow some “remove” examples.

PHP Snippet: Remove Image From WooCommerce Product Grid Blocks

Hint: to remove the product image, simply call the filter hook we’ve mentioned via add_filter() and remove “{$data->image}” from the code!

/**
 * @snippet       Hide Item Image - WooCommerce Product Grid Blocks
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_blocks_product_grid_item_html', 'bbloomer_remove_product_grid_block_inmage', 9999, 3 );

function bbloomer_remove_product_grid_block_image( $html, $data, $product ) {
	return "<li class=\"wc-block-grid__product\">
				<a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
					{$data->title}
				</a>
				{$data->badge}
				{$data->price}
				{$data->rating}
				{$data->button}
			</li>";
}

PHP Snippet: Remove Sale Badge From WooCommerce Product Grid Blocks

Hint: to remove the product sale badge, simply call the filter hook we’ve mentioned via add_filter() and remove “{$data->badge}” from the code!

/**
 * @snippet       Hide Item Image - WooCommerce Product Grid Blocks
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_blocks_product_grid_item_html', 'bbloomer_remove_product_grid_block_badge', 9999, 3 );

function bbloomer_remove_product_grid_block_badge( $html, $data, $product ) {
	return "<li class=\"wc-block-grid__product\">
				<a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
					{$data->image}
					{$data->title}
				</a>
				{$data->price}
				{$data->rating}
				{$data->button}
			</li>";
}

PHP Snippet: Remove Permalink From WooCommerce Product Grid Blocks

Hint: to remove the product permalink, simply call the filter hook we’ve mentioned via add_filter() and remove the a href tag from the code!

/**
 * @snippet       Remove Item Permalink - WooCommerce Product Grid Blocks
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_blocks_product_grid_item_html', 'bbloomer_remove_product_grid_block_permalink', 9999, 3 );

function bbloomer_remove_product_grid_block_permalink( $html, $data, $product ) {
	return "<li class=\"wc-block-grid__product\">
				{$data->image}
				{$data->title}
				{$data->badge}
				{$data->price}
				{$data->rating}
				{$data->button}
			</li>";
}

Where to add custom code?

You should place PHP snippets at the bottom of your child theme functions.php file and CSS at the bottom of its style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my guide "Should I Add Custom Code Via WP Editor, FTP or Code Snippets?" and my video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything went as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting.

If you think this code saved you time & money, feel free to join 17,000+ WooCommerce Weekly subscribers for blog post updates and 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance!

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

2 thoughts on “WooCommerce Blocks: Hide Images Etc. From Product Grid Block

  1. Unfortunately the woocommerce_blocks_product_grid_item_html hook doesn’t work on the ‘All Products’ block.
    Would have been nice if the All Products block used it, because the filter blocks that work with it would be a super easy way to implement product search filters, but I need to find another solution since I just need to put another attribute in the product box, and registering blocks with React is beyond me.

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published. Required fields are marked *