Changing Woocommerce Shop (product catalogue page) layout

  • Resolved gary.karki

    (@garykarki)


    6 years, 2 months ago

    Hi first of all thank you so much for the amazing theme. It looks great and I am giving your 5 stars rating.

    My question:

    The default layout for woocommerce shop page for big screen is

    woocommerce-sidebar (col-3) | products loop (col-9)

    How can I change it to col-12 for both as I need a full-width shop with horizontal filters on the top.

    Also, in small devices, the sidebar falls to the bottom of the catalogue (displayed products), can it be on the top of the displayed products.

    Can you guide me towards the proper page where I can change these codes.

    Thanks again.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author PressMaximum

    (@pressmaximum)

    Hello @garykarki,

    You don’t need to change the source code to make shop page full width, we have this option already. You just need to open the Shop edit page, select the Sidebar layout is Content (no sidebars): https://cl.ly/8c5a0b213eb0

    Second, please add this to Customize => Additional CSS to make the sidebar on top when seeing on the mobile:

    @media  ( max-width: 499px ) {
#main { order: 2 ; }
}

    Hope it helps!

    Thread Starter gary.karki

    (@garykarki)

    Thank you for your quick response.

    When I change the Sidebar layout to Content (no sidebars), YES it did change the shop page to 100% but the sidebar with filters disappears. I have all the filters on the Sidebar.

    All I need is,

    – Header
    – Sidebar in 100% width (for adding filters such as attributes dropdown)
    – 100% width product listings
    – Footer

    Do you think this theme is capable of this layout?

    Your help is much appreciated.

    Regards,
    Gary

    Theme Author PressMaximum

    (@pressmaximum)

    Hi @garykarki,

    You can try to add this:

    body.post-type-archive-product #main,
body.post-type-archive-product #sidebar-primary { max-width: 100%; flex-basic: 100%; }
body.post-type-archive-product #main { order: 2; }

    Let me know how it goes!

    Thread Starter gary.karki

    (@garykarki)

    Amazing it worked. How can I rate your 5-star service.

    This is an amazing theme with even more amazing is your quick responses.

    Thanks.

    • This reply was modified 6 years, 2 months ago by gary.karki.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing Woocommerce Shop (product catalogue page) layout’ is closed to new replies.