Support » Plugin: WooCommerce » WooCommerce block columns and rows

  • Resolved Garry Rigby

    (@indigojones66)


    See image… http://hardy.global/howblocks.jpg

    How do I add the column block to the category block;
    the category block has 3 rows but I cant add anything to those rows

    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 page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Support Mirko P.

    (@rainfallnixfig)

    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.

    Thread Starter Garry Rigby

    (@indigojones66)

    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 🙂

    Thread Starter Garry Rigby

    (@indigojones66)

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

    Plugin Support Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    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.

    Thread Starter Garry Rigby

    (@indigojones66)

    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;
    }
    }

    Plugin Support abwaita

    (@abwaita)

    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.

    Thread Starter Garry Rigby

    (@indigojones66)

    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;
    }`

    Plugin Support abwaita

    (@abwaita)

    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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.