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: 2403

24 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!

Join the conversation