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.
- 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.
Checkout
Customize the looks and content of the Checkout page.
Wishlist
Enable and customize the Wishlist. Head over to Wishlist informations for more about it.
46 Replies to “Customizer – WooCommerce”
Victor
It’s possible to disable “Default product sorting function?” How? Thanks!
mariushoria[ Post Author ]
Hi Victor,
Rey doesn’t have a built-in functionality to disable it, however it could be doable with a code snippet you should add into rey-child/functions.php :
remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_catalog_ordering’, 30 );
Best,
Marius
Kyung Hwa Yoo
When I click the quick view option the images are huge (enlarged losing dps). Is there a way to fix this or remove the option
mariushoria[ Post Author ]
Hey there! There’s an option in Customizer > WooCommerce > Product catalog – Components >> Quickview – Image fit eg: https://d.pr/i/Zz5OiP . Try selecting Contain. It should force the image to be fully visible.
miz
Hi Marius,
I love your theme, but I’m very surprised by your choice to develop the woocommerce product page and catalog outside Elementor as 90% of the theme… why??
It makes it seriously lack of customisation feature (margin control, adding shortcode etc.). And product pages are the most important part for all eshop
Maybe for some future update, it’s something you can rethink? (integrated as a theme builder template or as a global section page)
thanks!
mariushoria[ Post Author ]
Hey there!
I 100% agree with you. It’s just that Rey’s product page layouts cannot be replicated easily with EPRO because i wrapped many blocks with divs, with hooks (which are not available in the theme builder) so exact replicas of them, cannot be made easily at this moment.
Also since Elementor Pro is paid, besides adding compatibility, i wanted to make Rey’s own page template solution for those not using EPRO, so this is my main reason why i’m not yet adding this feature, because it takes a while and i want to take my time to make it right.
Either way, i’m adding it soon.
Thanks a lot!!
Frank
“Customize the looks and content of the Checkout page.”
Can’t find anything on the “looks”? The default doesn’t fit the branding.
mariushoria[ Post Author ]
Hey Frank,
Indeed not many customization options for the Checkout page. I decided to wait for a Cart & Checkout Elementor elements which will have customisation options.
Thanks!
Jason Thomas Dawes
Hi great theme, however struggling a bit with the content blocks on the product description I like the demo content with specifications shipping info etc and want to keep the same format but i want to edit the text. How do you change the text in these blocks? thanks
website is on a temporary domain until built thanks
mariushoria[ Post Author ]
Hey Jason,
Aah indeed. Luckily in the upcoming version tomorrow you will be able to manage the tabs/blocks easier eg: https://d.pr/v/Q7KnVz . I’m pretty sure you’re mostly having troubles with the Specifications (Additional Information) one, which contains product attributes. Unfortunately it’s not editable and it’s autogenerated by WooCommerce, based on the attributes chosen in the product’s backend Attributes tab. I’m also planning a manageable interface for it to be able to add/remove/edit some of those rows, however in the version after this one. If you’re asking about the “Informations” block, right now, try accessing Customizer > WooCommerce > Product page – Content, and you should be able to find it there.
Marius
birju chatwani
Hello,
I was trying to edit shop page, but it’s showing error and suggesting to use elementor pro version, could you please tell me, how can I edit shop page of wooCommerce and other related things.
mariushoria[ Post Author ]
Hey!
Wrote an article here https://support.reytheme.com/kb/shop-page-elementor-and-the_content/ onto why this is happening and what alternative i suggest.
PS: I’m working on a separate branch to implement a similar feature like Elementor Pro’s Theme Builder, but it turns out it’s way complicated than i expected so it might take a few weeks to do it and test it properly.
Thanks!
marcos
Hello, i love THIS DEMO… i want to buy this woocomerce Layout, but i need to know if i need to buy elementor pro…
i will wait for you answer.
thank u.
mariushoria[ Post Author ]
Hey Marcos,
Rey is not dependent on Elementor PRO, so it is not mandatory to buy it.
However this doesn’t mean EPRO is not worthy, in fact it’s an amazing piece of software. I suggest trying Rey as it currently is, and if you feel something’s missing and EPRO has it, definitely worth buying it.
Thanks!
Chris N
I’ve created a page that I want to use as a shop page. However, after setting this page as a shop page (by going to Woocommerce Settings, Products, “Shop Page”) the entire look of the page is completely changed. How can I prevent this from happening and set this page to be the shop page? Thanks
mariushoria[ Post Author ]
Hi Chris,
This is likely happening because the WooCommerce’s Shop page is overriding any page’s content. The WC. Shop page is an autogenerated page, which injects a product listing grid instead of the default page content.
For the moment, having a custom built Elementor page as the Shop page, is only doable with Elementor PRO’s Theme Builder feature. I’m also working on this, but it will likely take a few weeks because it’s super complicated and i want to take my time to make it properly.
Marius
Chris N.
Thank you for your response.
I am using Elementor Pro, is there a workaround for getting the shop page set to a custom page being that I am using the Pro version?
mariushoria[ Post Author ]
Yes, sure! Just made a quick recording here https://d.pr/n/6Wre0a . Basically just apply the condition to show on the Shop page.
birju chatwani
hello ,
I need to display product category description for seo , currently description is not visible on category page.
mariushoria[ Post Author ]
Hey Birju,
I believe you’re using a Cover global section on product categories, otherwise the description should’ve been shown. Try to edit the Cover and inside it, add the Heading element and select Dynamic skin eg: https://d.pr/i/fRNR5e . It will pull the description dynamically.
You can also just disable the Cover for all product categories (Customizer > Cover > WooCommerce) or a specific product category (just edit the Product Cat. in backend).
mohammad
it is really great theme
i would to ask about one thing
the Quickview that is in the products catalog, i need to know which function is used for it, coz i need to reuse these in the product single page to view some info about the product itself
thank you
mariushoria[ Post Author ]
Hey there!
The quickview panel is not reusable for other uses. I noted however to find a way in the future to include this curtain effect for regular modal windows.
Thanks!
Marius
Walid
Hello,
I installed the theme but i get a weird “error”
When i click on the cart icon everything gets transparrent and the mouse turns into a circle with an X in it but nothing loads (shopping cart content)
How come?
mariushoria[ Post Author ]
Hey there!
I see, strange! Please submit a support ticket here https://support.reytheme.com/new/ with the site address so i can take a look and inspect with Chrome dev tools. Thanks!
Roman
Hi there,
First of all amazing theme! I am trying to change the position of product variations next to Quickview on the thumbnail. Could you please help with that?
Thank you
mariushoria[ Post Author ]
Hey! Thanks a lot!! 🙂
Try having a look in Customizer > WooCommerce > Product catalog – Components and look for the Position option in the Variation attributes area eg: https://d.pr/i/cCLGsE . Maybe this is what you’re looking for?
Marius
Peter
Hi, is there a optionto use range selector to take values from custom field?
BR
mariushoria[ Post Author ]
Hi Peter,
Not sure what you mean. You want to publish a custom field as range selector, into a post/page/product’s backend and display it into the frontend? The only way i can see a range selector to be added, is through ACF (eg: https://d.pr/i/uBgxDc ), somewhere published in the backend of the site where you want. But you’ll still need some code to display the values.
Marius
James Rogers
Hello – Love the theme and your response time for assistance!!!
Hopefully a quick question… when I hover over my brand pictures the secondary picture goes smaller than main picture – how do I change this to match same size?
mariushoria[ Post Author ]
Hi James,
Not sure exactly what you mean. Can you make a quick recording? Try using a tool like https://www.loom.com/ or https://www.usebubbles.com/ or https://gyazo.com/product (they’re all free).
Also, would be best if you can submit a ticket on https://support.reytheme.com/new/ because sometimes i may miss some of these comments here.
Thanks!
Marius
Peter
Hello how to set days for NEW badge on product?
mariushoria[ Post Author ]
Hi Peter,
There isn’t any option however you can add a code snippet. Here’s a quick read how to do it https://support.reytheme.com/kb/code-snippets/#change-new-badge-duration-time .
Peter
Thank you, working good
Yaming
Hi, I like this theme and consider to buy. I have a question though.
I want to change the “add to cart” on SKU detail page to something like “Go To” which will redirect the click to open new page (our affiliate page). Is there any way to achieve this?
mariushoria[ Post Author ]
Hey there!
Sure, any product can link externally if it’s set as an External product eg: https://d.pr/i/oZX2Dv .
Marius
Nicolas Vanlerberghe
Hi! When i exclude categories on the shop page in customizer > woocommerce > product catalog – Misc and save the settings. It all works fine and hides the categories i want. But when i go back to the customizer and edit something els in the customizer and i save it. The categories are all back in the shop page and none are excluded anymore.
So it means that every time i need to change something in the customizer, i always need to exclude my categories, every single time.
Can this be fixed or is there something i need to enable?
Thanks in advance!
mariushoria[ Post Author ]
Hi Nicolas,
That’s weird. This issue could happen when the category that was added in that option, somehow changed its “slug” by renaming it probably. Or, you might have had another tab opened with Customiser and might have overriden the previous settings?
If this issue still persist, please create a new support ticket and create a temporary admin account for me so i can take a closer look.
Thanks!
Marius
faizan nasir
In single product page, the product title is not showing……. And also when i i opened apperence of theme following message is showing. please help me………………………….website https://swissgallery.ca/product/u-boat-limited-edition-classico-left-hook-steel-53mm/
“Broken Themes
The following themes are installed but incomplete.
MACOSX Stylesheet is missing. Delete
themeforest-mCxgTldy-rey-multipurpose-woocommerce-theme-wordpress-theme Stylesheet is missing. Delete”
mariushoria[ Post Author ]
Hi there,
For the title, please try copying this css snippet from here https://d.pr/n/kzkOSJ and add it into Customizer > Additional CSS . It seems that in Elementor global settings, the titles have been chosen to be hidden. This should do the trick.
For the other error with missing stylesheet, this is usually what i recommend https://support.reytheme.com/kb/missing-style-sheet-error-when-installing-the-theme/ however i see the error actually points out there’s a folder called “MACOSX” in wp-content/themes/ folder. Please try to delete that folder either through your hosting panel file manager or FTP.
Marius
faizan nasir
The title problem has been solved Thanks for that……….
I dont have hosting.the developer has it…..he doesnt give it to me….how to delete macosx foldr in wordpress.
can you give me the stylesheet file.
mariushoria[ Post Author ]
You could use WP File Manager plugin. It will give you access to /wp-content/themes/ folder where you can delete that one.
Ben
Hi,
Is there anyway of changing the discount label’s color on the product page without showing prices and discounts on the product catalog page?
Many thanks,
Ben
mariushoria[ Post Author ]
Hi Ben,
Have you tried disabling the Price in Customizer > WooCommerce > Product catalog – Components eg: https://d.pr/i/FvDwAr ? Before doing that, try changing the color in that color picker below. It should change it in the product page too, even though it’s disabled for catalogue.
Marius
faizan nasir
how to Show first “instock” products in Woocommerce before outofstock product?
and how to out of stock product price hide in shop archive page
joshua
Hi, how can I change the “Additional information” text on the checkout page, to my own preference?
Marius H[ Post Author ]
Hi Joshua! For any text change, you can use plugins such as https://wordpress.org/plugins/loco-translate/ or https://wordpress.org/plugins/say-what/ , the source (text domain) of the text being WooCommerce .