Help with WooCommerce Product Archives in Mobile View – Single Column Layout

  • I have a problem with the display of WooCommerce product archives in the mobile view. Currently, two products are displayed side by side, which doesn’t look good on any mobile phone. I want to ensure that only one product per row is displayed, with the next one below it.

    Here is what I’ve tried so far:

    1. In the Astra settings under Settings – WooCommerce – Product Catalog, I switched to mobile view and set the column layout to 1. However, this had no effect.
    2. I am using Astra Pro and Elementor Pro.

    My question is: Why is it that Astra, by default, displays two products side by side in mobile view? This doesn’t look good on any phone.

    How exactly can I adjust it so that in mobile view, only one product is displayed per row in the product archive pages, with the next one below it?

    I heard that custom CSS might help achieve this. If that’s true, could someone please provide the exact CSS code and steps for implementing it?

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @crownst,

    There’s Shop Columns setting that has responsive option, which means you can have different setting for different device. Refer to this screenshot, please. You can find it from the Customizer > WooCommerce > Product Catalog.

    Let us know if you need more help, otherwise please mark the topic as Resolved.

    Kind regards,
    Herman ??

    Thread Starter crownst

    (@crownst)

    Hi Herman (@bsfherman),

    Thanks for your response. Unfortunately, the issue still persists. When I set the column layout to 1 under Customizer > WooCommerce > Product Catalog in the mobile view, it has no effect, and two columns are still displayed.

    To clarify, the problem is not understanding what the setting does, but that the setting itself does not seem to be applying correctly. Do you have any insight into why this might be happening and how it can be resolved?

    If custom CSS is needed, could you please provide the exact code and steps for implementing it to ensure that only one product per row is displayed in mobile view?

    Thank you for your assistance.

    Hi @crownst,

    Have you tried disabling all plugin except WooCommerce and see if the setting works?

    Please export the Astra Settings and share it here. I will import it on my dev site and see if I am able to replicate the issue.

    I look forward to hearing from you.

    Kind regards,
    Herman ??

    hollywood07

    (@hollywood07)

    I am having this same issue. Changing the column, weather its 1 or 5 does nothing in mobile view.

    Please advise. Thanks

    Hi @hollywood07,

    As per the forum guidelines, please start your own topic. You are welcome to cross-link it to this thread, so we are aware of both.

    Kind regards,
    Herman ??

    uros071

    (@uros071)

    Has this problem been resolved? I’m trying to find a solution but I’m unable to.

    Thanks in advance.

    Hi @uros071,

    Could you kindly share the full URL of your website? This will allow us to take a closer look and assist you more effectively.

    Also, as per the forum guidelines, please start your own topic. You are welcome to cross-link it to this thread, so we are aware of both.

    Kind regards,
    Aradhy

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

Tags