WooCommerce block columns and rows

Hi @indigojones66,

You are nesting the Products by Category block inside the Column block, right? I’m not sure why you’d want to do this since it can get complicated.

My category block has 3 columns and three rows, how do I add content to those rows? At present I have a separate 3 column block on top of a category block with 3 columns and 3 rows ~ How do I join them together?
Or does the content rows of category block only allow the WooCommerce, product title, product price etc?

The Products by Category block displays a grid of products from your selected category or categories. See screenshot here. You can’t add other content there other than this. You could add an additional block according to the type of element you wish to add. If you want to know more on how blocks work in WordPress check out this guide.

Cheers.

Hi @indigojones66,

You cannot add the column block to the Products by category block.

Since the Products by category block is a separate block and only supports product title, product price, product rating and the add to cart button to be displayed for each product.

Can you elaborate on what type of design you’re trying to achieve?

So that I can guide you appropriately.

Many thanks.

• This reply was modified 3 years, 3 months ago by Sandip Mondal - a11n.
• This reply was modified 3 years, 3 months ago by Sandip Mondal - a11n.

I have 3 categories Feature, Sales and Archive; I wanted to have that text above the images ~ WooCommerce only seems to allow the name of the product not what I want. I wanted my text actually linked to the image which it seems I cannot do

Sadly you cannot add those text above the product images of the Products by Category block.

From the image and description you shared, I would recommend you ?to use a column block of 3 columns and add a “Featured Category” block to each of those columns.

Make sure the category you select has an image. If they don’t. You can add them:
1. Go to Products > Categories
2. Edit the category you want (eg. Sales)
3. Upload Thumbnail for the category

I hope this helps.

Have a nice day ??

• This reply was modified 3 years, 3 months ago by Sandip Mondal - a11n.

Thanks very much Sandip ~ hope you have a good weekend. Regards Garry

I’m happy to hear @sandipmondal could clarify this for you and going to mark this as resolved – if you have any further questions, you can reopen it again if you need be.

https://heritagecountrypottery.com/blocks/

How do I target the red column with three images?
I want to stop this block from stacking the images on mobile.

I have targeted the top six images with…

@media (max-width: 480px) {
.wc-block-handpicked-products .wc-block-grid__products {
display: flex !important;
}

.wc-block-handpicked-products .wc-block-grid__product {
flex: 1 0 33% !important;
}
}

I have targeted the bottom four images with…

@media (max-width: 480px) {
.peter3-class .wc-block-grid__products {
display: flex !important;
}
.peter3-class .wc-block-grid__product {
flex: 1 0 25% !important;
}
}

Hi @indigojones66,

Have you tried setting your container’s flex-wrap to nowrap?

.wp-block-columns.midmost-class.has-vivid-red-background-color.has-background {
	flex-wrap: nowrap;
}

Let us know how it goes.
Thanks.

Hi Abwaita, thanks for your response. That was the target but it looses margins and kicks the centre image down.

see image ~ https://www.hardy.global/text_middle.jpg

.wp-block-columns.midmost-class.has-vivid-red-background-color.has-background {
flex-wrap: nowrap;
}`

Thanks for getting back @indigojones66.

Taking a look at your site, I didn’t find that part.

However, from your screenshot, I see that the “Sales Inventory” text is pushing the second image down a bit. If viable, you could opt to reduce this text as that space is a bit small.

If that still does not work, maybe you could show the section once again for further checks.

Thanks.