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.
- Default eg: https://d.pr/i/yeILq0 . A regular product page layout.
- Full-screen eg: https://d.pr/i/emadH6 . The product summary and gallery are stretched wide.
- Compact eg: https://d.pr/i/a8Z3Bz . The gallery is positioned under the product summary.
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. This is an alternative method to the top bar you can custom create in your Global Section header
Checkout (Legacy) #
Customize the looks and content of the Checkout page. We have implemented a new version of the checkout, so these settings are not used.
Wishlist #
Enable and customize the Wishlist. Head over to Wishlist informations for more about it.