Customizer – WooCommerce

You are here:
Estimated reading time: 5 min

These options can be found in Customizer > WooCommerce panel eg: https://d.pr/i/hoqDdn .

Product Catalog – Layout

Products per row

Choose how many products per row should be displayed. On mobiles, the default products per row count is 2, however read this article if you want to change to a single product per row on mobiles.

Rows per page

Choose how many rows of products to display.

Skin

Choose the product listing page’s layout. Currently these are the following skins:

  • Default eg: https://d.pr/i/SkZFRl .
  • Basic eg: https://d.pr/v/1SJ9WV . Mostly the same as Default, but with more advanced features, like hover animations and other options as well.
  • Wrapped eg: https://d.pr/v/0idIEv . Basically the product main image is the background of the product with all the content wrapped inside.

Content alignment

Select the product content alignment, left, right or center.

Pagination type

Choose the pagination type:

  • Simple pagination with paged numbers
  • Load More button (through Ajax)
  • Load More on scroll (infinite scrolling)

Tip: While infinite scrolling is kind of fun, it’s the worst in terms of user experience because the visitor cannot reach the footer.

Basic skin options – Hover Animation

Select if you want to enable the product footer animation when hovering the product. The animation will show Add to cart, Quickview and Wishlist icon on hover, while the price will be hidden.

This makes the layout of the product more compact and clean to the eye.

Basic skin options – Inner padding

You can specify an inner padding of the products. Usually combined with a background color.

Basic skin options – Background color

Change the background color of the item. Usually combined with the inner padding.

Sidebar – Sidebar position

Select the sidebar’s position, either left or right, or forced to be disabled.

Sidebar – Sidebar Size

Choose the sidebar’s size against the main content.

Typography – Product title

Customize the product’s title typography and color.


Product Catalog – Components

General – Quickview

Select if you want to display a Quickview button in the product item. This will open a popup with a compact version of the product page.

General – Brands

Select if you want to show the product brands. Please know that product brands are actually created with WooCommerce’s Attribute taxonomies.

Read more how to create product brands.

General – Category

Select if you want to show the product’s parent category. Hidden by default.

General – Ratings

Select if you want to show the product ratings stars. Hidden by default.

Price & labels – Price

Choose if you want to hide the product prices.

Price & labels – Sale / discount label

Choose if you want to display a discount label, and what type should it be:

  • Discount percentage
  • “SALE” label

Price & labels – Discount label position

Choose the discount label’s position, either inline near the price or in the top right product corner.

Price & labels – Discount label color

Choose the discount label’s color.

Variation Attributes – Attributes type

Choose if you want to display product variation swatches into product listing, by selecting which variation should be displayed.

Please know that WooCommerce Variation Swatches plugin is needed for these swatches. Learn how to install plugins.

Learn how to add product variations with the WooCommerce Variation Swatches plugin.

Variation Attributes – Position

Choose the position of the variation swatches / lists:

  • Before the title
  • Before the “Add to cart / Select options” button
  • After the “Add to cart / Select options” button

Variation Attributes – Attributes sizes

Customize the size of the variation swatches. Applicable for color and image attribute types.

Variation Attributes – Attributes display limit

Choose a limit for how many attributes to be shown. 0 means unlimited.

View switcher

Choose if you want to have a live product per row switcher. Please know that the selected option is stored in the browser’s local storage and is remembered every time the site is accessed.

View switcher – Column variants

Choose what sort of column variations to be shown, separated by comma. Please know that Rey supports up to 6 columns.


Product Catalog – Miscellaneous

Enable Catalog Mode

This option will disable the entire site’s “shoppable” functionality, transforming it into a catalog without Cart, Add to cart functionality.

Shop page display

Choose what to display on the main shop page, either products or categories too.

Category display

Choose what to display on product category pages, either categories or subcategories and products too .

Default product sorting

Select the default sorting of the products:

  • Popularity
  • Average rating
  • Most recent products
  • By prices (asc/desc)

Product Page – Layout

Skin

Choose the product page’s layout.

Product Summary – Flip Gallery & Summary

Flip the gallery and product summary content. By default the gallery is on the left side.

Product Summary – Summary Size

Choose the product summary size against the product gallery.

Product Summary – Enable Fixed Summary

Select if you want to enable the product summary to be fixed (sticky) while scrolling the product page. Best used with Cascade gallery layout.

Product Gallery – Layout

Select the product gallery layout. Available layouts are:

  • Vertical Layout eg: https://d.pr/i/sGgjCi . Will display the thumbnails on the left side of the main image.
  • Horizontal layout eg: https://d.pr/i/0DDmbq . Displays the thumbnails under the main image.
  • Grid layout eg: https://d.pr/i/MmvIyt . Displays all the images in a grid format, 2 per row.
  • Cascade layout eg: https://d.pr/v/ic8vYC . Displays all the images normally downwards.
  • Cascade & Grid layout eg: https://d.pr/v/6l0c1j . Displays the images downwards but starting with the 2nd image, they’re positioned 2 per row.
  • Cascade & Scattered layout eg: https://d.pr/v/M3vrAu . Displays the images downwards but starting with the 2nd image, they’re positioned 2 per row in a “scattered” layout eg:

Product Gallery – Enable Hover Zoom

Enable if you want the main image to display a zoomed image on mouse hover.

Product Gallery – Stretch Gallery (Fullscreen layout)

This option will make the gallery to be fully stretched inside the gallery container. Only available for Fullscreen Skin.

Product Gallery – Navigation Bullets (Cascade Gallery)

This option will add navigation bullets for the Cascade gallery.


Product Page – Components

Navigation

Select if you want to display a next/previous product navigation.

Share

Select if you want to enable the sharing icons. Learn how to add more icons .

Product SKU

Select if you want to hide the product SKU (Stock Keeping Unit).

Short description – Toggle Text

Select if you want the short description (excerpt) to be shown minimised with a Read more / less button that toggles it.

Product variation swatches

Not an option, just a notice in case you’re looking for the Variation swatches options. These are added by the WooCommerce Variation Swatches plugin and you should access its options in WordPress backend > Swatches settings.


Product Page – Content

Custom info block

You can add a block of text right next to the Description and Specifications blocks. In Rey’s demos it’s mainly used for miscellaneous informations such as delivery info or assistance informations.

Simply add whatever content you’d like to add.

Please know that you can either disable or add a different text per product. Simply access the product edit mode, and look for the Product settings block of options and customize.

Global sections – After product summary

Append global sections to the product page, after the product summary (gallery and product information). In Rey’s demos i emphasized it would be useful for other collections display, photo galleries, various content.

Learn how to create generic global sections .

Global sections – After content

With this option you can add global sections after the product content.

Please know that you can either disable or add a different global sections per product page. Simply access the product edit mode, and look for the Product settings block of options and customize.


Product Images

Main image width

Image size used for the main image on single product pages. These images will remain uncropped.

Thumbnail width

Image size used for products in the catalog (products listing).

Thumbnail cropping

Select if you want to crop images and what aspect ratio to be.

  • 1:1 means the images will be square
  • Custom eg: 3:4 or 4:3 , will be either taller or wider
  • Uncropped, will be shown using the aspect ratio in which they were uploaded.

Thumbnail inner padding

With this option you can customize the thumbnails to add a padding around them.

Don’t forget to add the unit, eg: 10px, 1em, 1rem, etc.


Store Notice

If enabled, this text will be shown site-wide sticked at the top edge of the site. You can use it to show events or promotions to visitors.


Checkout

Customize the looks and content of the Checkout page.


Was this article helpful?
Dislike 0
Views: 107

Join the conversation