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 .

LinkProduct 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.


LinkProduct 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.


LinkProduct 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)

LinkProduct 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.


LinkProduct 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.


LinkProduct 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.


LinkProduct 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.


LinkStore 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.


LinkCheckout

Customize the looks and content of the Checkout page.


LinkWishlist

Enable and customize the Wishlist. Head over to Wishlist informations for more about it.


Was this article helpful?
Dislike 0
Views: 13818

46 Replies to “Customizer – WooCommerce”

  1. Victor

    It’s possible to disable “Default product sorting function?” How? Thanks!

    1. 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

  2. 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

    1. 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.

  3. 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!

    1. 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!!

  4. Frank

    “Customize the looks and content of the Checkout page.”

    Can’t find anything on the “looks”? The default doesn’t fit the branding.

    1. 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!

  5. 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

    1. 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

  6. 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.

    1. 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!

  7. 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.

    1. 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!

  8. 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

    1. 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

      1. 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?

        1. 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.

  9. birju chatwani

    hello ,
    I need to display product category description for seo , currently description is not visible on category page.

    1. 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).

  10. 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

    1. 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

  11. 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?

    1. 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!

  12. 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

    1. 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

  13. Peter

    Hi, is there a optionto use range selector to take values from custom field?
    BR

    1. 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

  14. 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?

    1. 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

  15. Peter

    Hello how to set days for NEW badge on product?

    1. 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 .

      1. Peter

        Thank you, working good

  16. 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?

    1. 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

  17. 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!

    1. 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

  18. 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”

    1. 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

      1. 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.

        1. 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.

  19. 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

  20. 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

  21. 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

  22. joshua

    Hi, how can I change the “Additional information” text on the checkout page, to my own preference?

    1. 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 .

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!