Support » Plugin: WooCommerce Blocks » Responsive broken on updating from 2.1.0 to 2.2.1

  • Resolved ofabrics


    Hi, I have tryed to update from version 2.1.0 (working fine) to 2.2.1 and the responsive is broken (when I access the website from mobile I see 4 columns of products instead of each product one below the other).

    I’m using the “handpicked products” block, and I’ve tryed to edit the page and add the block again configuring it from scratch with same results.

    My website is using:
    – WordPress 5.2.2
    – Woocommerce: 3.6.4
    – Storefront: 2.5.1
    – PHP: 7.2
    – MySQL: 5.6

    Thank you very much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Albert Juhé Lluveras


    @ofabrics thanks for the report. In the 2.2 release, we changed the way the product grid is displayed and instead of using shortcodes like in the past, we are directly displaying the products from the block itself.

    That means that themes will need to update their styles to support the block too.

    In the meanwhile, you can directly use the shortcodes, for example:
    [products limit="3" columns="3" orderby="date" order="DESC"]

    Or use the blocks and add this CSS work-around to your site:

    @media (max-width: 724px) {
        .wc-block-grid__product {
            flex-basis: 100% !important;
            max-width: none !important;

    I used the CSS work-around and it worked great.

    Just for FYI, I’m using the free Storefront theme from WooCommerce along with their Boutique child theme. Hopefully, we will see their update to support these blocks soon.

    Thanks for this!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive broken on updating from 2.1.0 to 2.2.1’ is closed to new replies.