product-grid-270.md

📣 Announcement: New documentation location

The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.

Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.

---

Product grid blocks style update in 2.7.0

Table of Contents

• Product images
• All Products prices

In WC Blocks 2.7.0, some of the styles of the product grid blocks were updated to make the experience more consistent. Below, there are CSS code snippets that can undo those changes.

Product images

Images in product grid blocks changed so they expand to occupy all the available horizontal space if they are small. This can be undone with this CSS snippet:

.wc-block-grid__products .wc-block-grid__product-image img {
	width: auto;
}

All Products prices

All Products block was updated so prices follow the same layout as the other product grid blocks (one line instead of two lines). It's possible to recover the old style with:

.wc-block-grid__product-price .wc-block-grid__product-price__regular {
	font-size: 0.8em;
	line-height: 1;
	color: #555;
	margin-top: -0.25em;
	display: block;
}
.wc-block-grid__product-price .wc-block-grid__product-price__value {
	letter-spacing: -1px;
	font-weight: 600;
	display: block;
	font-size: 1.25em;
	line-height: 1.25;
	color: #000;
	margin-left: 0;
}
.wc-block-grid__product-price .wc-block-grid__product-price__value span {
	white-space: nowrap;
}

---

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.