Skip to content
Popular Search cheat sheetshopchangechange coursecha

WooCommerce Global Appearance

Table of Contents

The Global Appearance for your WooCommerce store can be edited within the Customizer. To open the Customizer, from your admin dashboard select Global Appearance > Customize. Once the Customizer opens, there will be a new option titled WooCommerce for you to make these changes.

Shop Page #

The Shop Page can be edited under Global Appearance > Customize > WooCommerce > Product Catalog. There are seven areas of customization available.

General #

This is the area where you can customize:

  1. Shop page display – you have the possibility to show products / categories / products & categories.
  2. Category display – show products / subcategories / products & subcategories.
  3. Default product sorting – you have the possibility to choose between: custom ordering + name / popularity (sales) / sort by most recent / sort by price( asc / desc).

Page Layout #

This is the area where you can customize:

  1. Number of products per row – it represents the number of products displayed on each row, from 0 up to 6.
  2. Number of products per page – it represents the number of products displayed on each page, there is no limit.
  3. Pagination – can be designed as numeric ( 1, 2, 3 .. ) or infinite scroll ( loading a new batch of products on each scroll ).
  4. Product filtering – it works along with the sorting, can be disabled if needed. 
  5. Layout toggle – it works along with the product’s card layout, can be enabled ( this will add a toggle on the Shop page, which will display the products either in a grid view or a list view ) 

Note: There are Typography options for this page under Dashboard > Appearance > Customize > Typography > WooCommerce

Product Card #

This is the area where you can customize:

  1. Layout – it can modify the way that the products are displayed: grid / list.
  2. Add to cart Button – it is the button that allows the customer to buy a product and has three options of display: none / after image / over image.
  3. Quick view – it is the button that allows the customer to have a quick look at the product and has three options of display: none / over image/ bottom.
  4. Wish List –  it will automatically add the selected products to a special list of favorite products and has three options: none / top / bottom.
    • To navigate to the wishlist page, make sure you add the Wish List component in the Header builder. 
  5. Enable Variation Swatches – this is an option that allows you to configure a variable product ( e.g. depending on its colors ).

Card Image #

This is the area where you can customize:

  1. Force Same Image Height – it makes all your products use the exact same height ( no matter their individual sizes) Once that option is selected, you get a new field where you can enter the exact height ( in px ) that you want to use. 
  2. Image style – another useful option is to select a hover effect for the product images. You can choose between None, Zoom (make the image bigger), Swipe Next Image ( on hover, show the first image from the gallery, if there is an image ), Blur, Fade In, Fade Out, Glow, Colorize, and Grayscale.

Card Content #

In this area there are three options available:

  1. Elements Order – easily enable / disable (by clicking the 👁️ button) and reorder elements in the product box ( title, reviews, price, category, and the short description ).
  2. Alignment – it represents the alignment of the product’s details left / right-aligned, center, or inline.
  3. Advanced reviews – apart from the total review score displayed in the form of stars, display the total review score <number> and how many reviews are recorded for a particular product. It can be enabled or disabled.

Sale Tag #

This is the area where you can customize the Sale tag which appears on discounted products by choosing its: 

  1. Position – inside the product box, or just on the edge
  2. Alignment – it changes the alignment of the Sale tag and has two options: left / right.
  3. Border-radius – modifies the shape of the Sale tag.
  4. Background and text color – change the color of the background and text of the Sale tag.
  5. Text – which would replace the default Sale! text. You have to disable the sale percentage in order to see the text.

If you want to display a percentage of the sale, you can  Enable sale percentage and the products will display a 30% sale for example ( based on the actual selling prices ). Once the sale percentage is enabled, a new file will appear for the Sale tag format. There is where you can enter a formatted value for the percentage sale like {value}%.

Note: Typography option for the sale tag are available at Dashboard > Appearance > Customize > Typography > WooCommerce.

Category Card #

This is the area where you can choose the desired  layout for the category card.

Single Product Page #

There are four customization options available for the Single Product Page. These can be edited at Global Appearance > Customize > WooCommerce > Single Product.

Elements Order #

Similar to the Shop page, the  order of the elements highlighted in the image below can be updated according to your needs. 

The following options can be enabled on the product page, in case you need them:

  1. Elements Order – it can modify the order of the mentioned details of the product.
  2. Enable Gallery Thumbnails Slider – display the product gallery images in a carousel.
  3. Enable Image Zoom Effect – it zooms in the product featured image when hovering over it.
  4. Show Breadcrumbs – display the path from the home page to the current product
  5. Show Product Tabs – a table with multiple tabs like product description and reviews.
  6. Enable Seamless Add to Cart – add the product to the cart without refreshing the page.
  7. Show Upsell Products – display the upsells configured in the product settings (⚙️) below the description. Those are the products that you recommend instead of the currently viewed product.
  8. Show Recently Viewed Products – display recently viewed products in a two columns grid layout on the right side of the page.
  9. Enable Product Navigation – display arrows for navigating through the products without returning to the shop page.

Related Products #

In this area there are four available options:

  1. Show Related Products –  enables the presence of the related products
  2. Enable Related Products Slider – display the related products in a carousel
  3. Number of Related products – type the desired number of related products
  4. Number of Columns – type how many columns you want to be displayed

Sticky Add to Cart #

As suggested by the name, the add to cart button can be visible all the time on the single product page, by setting it to be sticky. Available customizations:

  1. Position of the button – can be either at the bottom of the page header or above the page footer. 
  2. Color and background color – modify the color of the section where the button is displayed. 
    • 📝Note: You can boost the website’s appearance by using the Gradient option that can be accessed from the  Background color.
  3. Enable Tabs in the Sticky Add to Cart – the tabs are product’s Description, Reviews, and others in case you add more of them to the website – check the image below

Exclusive Products #

This is a section on the product page that allows you to edit its:

  1. Title – it is the title of the exclusive products section.
  2. Category – it is the category of the products that will be displayed.

Note: There are Typography options for this page at Dashboard > Appearance > Customize > Typography > WooCommerce.

Cart Page #

The available options for the cart page are the following:

  1. Layout  – display the Cart totals table on the normal side of the page or side by side.
  2. Enable Fixed Total Box – make the total box sticky when scrolling the page down.
  3. Show Cross-Sell Products – display a table with cross-sells configured on the individual products.
  4. Enable Payment Icons – show payment icons in the Cart’s total table. Those just inform the user which payment methods are available.

Checkout #

The available  options for the checkout page are:

Checkout Style #

There are three layouts available for this page:

  • Standard – the form with the billing details on the left side and the cart totals table with the Place Order button in the right sidebar.
  • Vertical – the form with the billing details centered and the cart totals table with the Place Order button below.
  • Stepped  – the page will be structured as a wizard with three steps, each tab displaying the information centered. It also has some settings (⚙️) available.

You can also add a boxed style for any of the three styles.

  • 📝Note: You can boost the website’s appearance by using the Gradient option that can be accessed from the Page Background color or Box Background.

General Options #

  • Required/optional fields  – some fields can be optional, required, or hidden. Those are the Company name, Address line 2, and Phone field.
  • Highlight required fields with an asterisk – display a red asterisk near the required fields.
  • Enable Fixed Order Box – this option is available only for the Standard layout
  • Use Labels as Placeholders – it places the fields labels inside them and reduces the table height.
  • Show Order Note – display the Additional information form.
  • Show Coupon  – display the coupon field.
  • Privacy policy page  – set the desired text and page.
  • Terms and conditions  – set the desired text and page.

Off-Canvas Sidebar for the Shop Page #

There are  multiple customization options for the sidebar layout. These options can be found at Global Appearance > Customize > Layout > Content / Sidebar > Shop / Archive. You can opt-in for the sidebar layout to be the same on the entire site or have a more advanced model, where different types of pages have different sidebar layouts.

If you decide on the second option, you will find there are 5 options:

  1. default
  2. none
  3. left
  4. right  
  5. off-canvas – the sidebar is hidden by default, and it slides in from the left side of the screen when clicking on the dedicated sidebar button.