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
 * @community     https://businessbloomer.com/club/
 */

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
 * @community     https://businessbloomer.com/club/
 */

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
 * @community     https://businessbloomer.com/club/
 */

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 custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Custom Add to Cart URLs – The Ultimate Guide
    In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID. This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Remove / Edit “Added to Your Cart” Message
    A client asked me to completely remove the message that appears after you add a product to the cart from the product page. This is simply done by using a PHP snippet, so here’s the quick fix for you!
  • WooCommerce: Add to Cart Quantity Plus & Minus Buttons
    Here’s a quick snippet you can simply copy/paste or a mini-plugin you can install to show a “+” and a “-” on each side of the quantity number input on the WooCommerce single product page and Cart page. The custom code comes with a jQuery script as well, as we need to detect whether the […]
  • WooCommerce: Redirect to Checkout on Add to Cart
    Here’s how you force redirection to the checkout page every time a product is added to cart, no matter if you do so from the loop/shop pages or the single product page. On top of adding the code to your functions.php you also need to double check your WooCommerce settings, see screenshot below. Enjoy!

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. Follow @rmelogli

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? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. 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 the Business Bloomer Club to get quick WooCommerce support. Thank you!

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