Knowledgebase

WooCommerce: How to remove shop sidebar – make shop full-width

Intro

Go to Theme Options and enter the following into the Custom CSS area .woocommerce #left-column{width: 100%;} .woocommerce #right-column{display: none;} The number of columns are usually determined by the Catalog Image size you set in WooCommerce Settings on the Catalog tab. In most cases, changing it to 300 will grant 3 columns, 220 will grant 4 […]

Solution

  1. Go to Theme Options and enter the following into the Custom CSS area
    .woocommerce #left-column{width: 100%;}
    .woocommerce #right-column{display: none;}
  2. The number of columns are usually determined by the Catalog Image size you set in WooCommerce Settings on the Catalog tab. In most cases, changing it to 300 will grant 3 columns, 220 will grant 4 and so on. You will need to experiment and possibly adjust the styling to get a perfect look. If your layout is sticking to 2 columns, add the following and adjust the percentage to change the column number:
    .woocommerce ul.products li{width: 30%;}

 

Get 15% off!

Signup and get 15% off any of our Ghost or Framer themes immediately