Homepage on mobile – how to have product columns?

  • Resolved garethrtac

    (@garethrtac)


    3 years, 6 months ago

    Hi all.

    As you can see, on mobile, we only have 1 product showing and it is a lot to scroll through.

    All of my WooCommerce category pages show 2 products, side by side, and this is what I want to achieve on the homepage.

    Can you please advise as to how I can create columns, and have 2 products, side by side on the HP please.

    https://hollings.uk.com/

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    Hi @garethrtac,

    With smartphones and smaller screen devices, WooCommerce would display a single product per row. You may however be able to change this using a combination of Media Queries and custom CSS.

    To achieve this type of customization I’d recommend using Google Chrome Developer Tools. You can right click anywhere on your webpage to select ‘Inspect Element’, the HTML and CSS properties show up right in your browser.

    You can then use those CSS Classes to alter the layout by writing your own custom CSS to override the plugins default CSS.

    Thread Starter garethrtac

    (@garethrtac)

    Thank you for the reply @stuartduff however I am not au fait with writing my own custom CSS, do you know of a way how I could achieve 2 columns for products on the homepage please?

    Thanks.

    Hi @garethrtac !

    CSS can be a bit complex sometimes; I have found this CSS that might resolve your need. I haven’t tested the code, but it looks if it’s applied and adjusted correctly can sort out your needs.

    Additionally, I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

    You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

    Hi, we’ve built a plugin called storefront blocks that gives you control over mobile columns with WooCommerce pages. It’s not a free one though but here’s details and examples https://storefrontblocks.com/mobile/

    jamie

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Homepage on mobile – how to have product columns?’ is closed to new replies.