Storefront Design Customizer

  1. Home
  2. Storefront Design Customizer
  3. WooCommerce

WooCommerce

Shop Page

Change the width of Storefront Shop page

You can change the standard width of Storefront product archive or shop page. Follow these steps to widen your the shop page width:

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Shop Page – Product Listings
  3. Write your new content width in Shop Content Width field.
  4. For example, if you want to expand your product archive page to 1400px, write 1400
  5. Click on Save & Publish.

Change Shop Products Layout

If you have Storefront Design Customizer installed on your website, you can change the layout by following these steps:

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Shop Page – Product Listings
  3. Select one of the six layouts from Products Archive Layout
  4. Click on Save & Publish.

Change Shop Products Column/ Grid

You display your shop products in 1, 2, 3 or even 4 columns.

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Shop Page – Product Listings
  3. Select 2 Column from Products Per Row
  4. Click on Save & Publish.

Change Shop Page Number of Products

You can determine how many products you want to display in your WooCommerce shop page.

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Shop Page – Product Listings
  3. Select number of product you want to display from Products per page drop down.
  4. Click on Save & Publish.

Remove Shop Page Product Meta Information

There are various parts in WooCommerce shop page. For example, there is the Shop page Description, Product Sorting, Product Result at top and additional product information like Sale Badge, Product Title, Price, Ratings and Add to Cart Buttons. Using Storefront Design Customizer you can easily remove them individually according to your need.

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Shop Page – Product Listings
  3. Scroll down to Shop Details section.
  4. Un-tick the element you don’t want to display. For example you can hide (Shop page Description, Product Sorting, Product Result, Sale Badge, Product Title, Price, Ratings and Add to Cart Buttons )
  5. Click on Save & Publish.

 

Single Product page

Change the Single Product page Width

Change the standard width of Storefront single product page without touching any code. Follow these steps to widen your the product details page width:

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Single Product – Product Details
  3. Write your new content width in Single Product Container Width field.
  4. For example, if you want to expand your product archive page to 1400px, write 1400
  5. Click on Save & Publish.

Change Single Products Layout in Storefront Theme

If you have Storefront Design Customizer installed on your website, you can change the layout by following these steps:

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Single Product – Product Details
  3. Select one of the 4 layouts from Products Archive Layout
  4. Click on Save & Publish.

Remove Product Summary, Product Sorting, Price, Ratings and Add to Cart from Single Product Page

There are various elements in WooCommerce single product page. For example, there are product Summary, product Sorting, price, ratings and Add to Cart from Single Product Page. Using Storefront Design Customizer you can easily remove them individually according to your need.

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Single Product – Product Details
  3. Scroll down to Product Description section.
  4. Un-tick the element you don’t want to display. For example you can hide ( Product Summary, product Sorting, price, ratings and Add to Cart button )
  5. Click on Save & Publish.

Remove Data Tabs from Single Product Page

In every WooCommerce single product page this a data tab section that display the product description and reviews. You can remove the product data tabs following these steps:

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Single Product – Product Details
  3. Scroll down to Product Data Tabs section.
  4. Un-tick the Display Data Tabs
  5. Click on Save & Publish.

Change Product Data Tabs Layout

You can customize the product data tabs layout without getting your hands dirty in code. Just follow these steps:

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Single Product – Product Details
  3. Scroll down to Product Data Tabs section.
  4. Select one of the 4 layouts from Tab Layout
  5. Click on Save & Publish.

Changing Product Data Tabs Color

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Single Product – Product Details
  3. Scroll down to Product Data Tabs section.
  4. Use the Data Tabs Color picker.
  5. Click on Save & Publish.

Remove Upsell, Related products from Product Page

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Single Product – Product Details
  3. Scroll down to Related & Upsell Products section.
  4. Un-check Display Upsell Products or Display Related Products
  5. Click on Save & Publish.

Change Number of Related, Upsell Products

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Single Product – Product Details
  3. Scroll down to Related & Upsell Products section.
  4. Select number of products from No of Related & Upsell Products to display
  5. Click on Save & Publish.

Change Related, Upsell Products Column

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Single Product – Product Details
  3. Scroll down to Related & Upsell Products section.
  4. Select number of column from Related & Upsell Products Column
  5. Click on Save & Publish.

Product Category

Sale Badge

Change Sale Badge Color

WooCommerce adds sale badge to help users identify the items that are on sale. You can change the color of this sale badge from Storefront Design Customizer dashboard section:

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Rating, Sale Badge & Others
  3. Click on Sale Badge Color picker to change the text color
  4. Click on Sale Badge Background Color picker to change the background color
  5. Click on Save & Publish.

Star Rating

Change Star Rating Color

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Rating, Sale Badge & Others
  3. Click on Star Color picker to change the color
  4. Click on Save & Publish.

Add to Cart Button

Change Add To Cart Button Color

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Rating, Sale Badge & Others
  3. Click on Add To Cart Button Text Color picker to change the text color
  4. Click on Add To Cart Button Color picker to change the background color
  5. Click on Save & Publish.

Change Add To Cart Button Text

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > Rating, Sale Badge & Others
  3. Write your new button text (e.g. Buy Now) in Change Add To Cart Button Text field
  4. Click on Save & Publish.

WooCommerce Sidebar

Remove Sidebar from Cart Page

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > WooCommerce Sidebar
  3. Tick the Disable Sidebar on Cart Page
  4. Click on Save & Publish.

Remove Sidebar from Checkout Page

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > WooCommerce Sidebar
  3. Tick the Disable Sidebar on Checkout Page
  4. Click on Save & Publish.

Remove Sidebar from Shop Page

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > WooCommerce Sidebar
  3. Tick the Disable Sidebar on Shop Page
  4. Click on Save & Publish.

Remove Sidebar from Single Product Page

  1. Click on Dashboard > Appearance > Customize
  2. Go to WooCommerce > WooCommerce Sidebar
  3. Tick the Disable Sidebar on Product Page
  4. Click on Save & Publish.