Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How to get WooCommerce shop page to show full width

I’m struggling to get my WooCommerce shop page full size (or at least wider than default). I’ve tried all sorts of CSS codes from other posts, but they either also change my other pages, or don’t do anything at all.
I’m using Fascinate child theme, and WooCommerce width settings are not available in the customizer.

This is my shop page: https://www.blankamorikawa.art/shop/
Ideally, I’d like it as wide as my portfolio pages – i.e.: https://www.blankamorikawa.art/portfolio/2024-2/.

Any advice on how to achieve this?

Tags:

2

Answers


  1. 0

    Remove or increase the max width value

    .fb-container {
  max-width: 1170px;
}

    This is how it looks after the modification.

    enter image description here

    this is how it was before

    enter image description here

    If you want to be specific to the page, point to the class

    Login or Signup to reply.
  2. 0

    This can be done using CSS. You have to inspect the elements within the page in order to target the right class/id.

    You do so by: Right click anywhere on a page -> Select inspect/inspect element -> Elements panel will open, showing the HTML and CSS of the page.

    Checking you specific portfolio page, you can see that the element with class body.no-sidebar .alignfull containing your portfolio items has a width set to 90vw.

    Portofolio page
    enter image description here

    In your shop page check class .fb-container. This has a max-width set to max-width: 1170px;. This limits your shop page to being maximum 1170px in width. So in order to have full width, you would have to set the max-width to e.g. 100% for class .fb-container.

    Shop page
    enter image description here

    In order to only target the shop page, you can target the specific <body> class woocommerce-shop.

    enter image description here

    So your CSS code could look like this:

    .woocommerce-shop .fb-container {
   max-width: 100% !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search