How to Set Up WooCommerce Customizer for Product Images, Catalog and Store Notice

WooCommerce Customizer

In the older versions of WooCommerce, you may have seen settings to change product display options. In the latest versions of WooCommerce, the Display option is absent under WooCommerce product settings. However, you will be able to find a new set of options under the Appearance tab. We will discuss the latest WooCommerce Customizer settings in detail in this article.

If you are using an older version of WooCommerce, and would like to know more about the display options under product settings, please check this article.

WooCommerce Customizer

You can access the WooCommerce customizer from the WordPress navigation panel (Appearance > Customize > WooCommerce).

WooCommerce Customizer

Under WooCommerce, you will find four different settings:

  • Store Notice
  • Product Catalog
  • Product Images
  • Checkout

WooCommerce Customizer

 

We will take a look at each of these settings in more detail:

Store Notice

A store notice on WooCommerce will help you communicate to your customers by displaying a site-wide message. You will be able to communicate an informational message such as shipping delays to a particular zone through this option. Alternatively, you will be able to catch your customers’ attention on discount offers, events or any other marketing initiatives on your store.

You can add the text to be displayed in the text area. Also, you need to enable the checkbox for Store Notice. Now, you will be able to see a preview of the store notice on the page. Click the Publish button to display it across your site.

WooCommerce Customizer

Once you publish the Store Notice, your visitors will be able to see it when they visit your site.

WooCommerce Customizer
The store notice that you set up in the back end will be visible to customers on the frontend.

Scheduling Store Notice

WooCommerce also provides an option to schedule store notices on your store. For example, if you have scheduled an offer on your store starting from December 1st, you can create a store notice and schedule to display it. The store notice will be displayed only from that date onward.

WooCommerce Customizer

Product Catalog

You can define how products are displayed on your Shop and category pages by adjusting the settings under Product Catalog.

Basically, there are five different settings under this section. Let us take a look at each:

Shop page display

Here you will be able to choose what to display on your main Shop page. There are three options available

  1. Show products – All your products will be displayed.
  2. Show categories – Only categories will be displayed.
  3. or, Show categories and products – Both categories and products will be displayed.
WooCommerce Customizer
You can choose to display only products or categories or both together in the shop page.

Category display

This choice will define the display on your Category page. Again, you will have three options.

  1. Show products
  2. Show subcategories
  3. and, Show subcategories and products
WooCommerce Customizer
On an individual category page, you can choose to display subcategories, products or both together.

Default product sorting

When a customer lands on your Shop page, how the products will appear to them is an important factor. WooCommerce allows you to choose the default product sorting according to your requirement. There are six different options for this as follows:

  1. Default sorting (custom ordering + name)
  2. Popularity (sales)
  3. Average rating
  4. Sort by most recent
  5. Sort by price (asc)
  6. and, Sort by price (desc)

 

WooCommerce Customizer
You can choose the default product sorting on the Shop page according to your requirements.

Product per row

You can change the number of products to be displayed in each row.

 

WooCommerce Customizer
WooCommerce allows you to change the number of products displayed in a row.

Rows per page

Also, you can specify how many rows of products to be displayed on a single page.

 

WooCommerce Customizer
Here, you can also specify how many rows of products you want to display on your Shop page.

Product Images

This section will help you control how product images are displayed. Basically, the appearance of catalog images and thumbnail images an be controlled using these settings. Catalog images are medium-sized images that are displayed along with products on Shop, Category pages, Related Products, up sells and cross sells. And thumbnail images are associated with product display on cart and widgets.

You can control the appearance of both catalog and thumbnail images here. However, single product images and image gallery settings cannot be controlled here, which you can do from individual product pages. We are describing the basic process of handling product images and image gallery a little later in the article.

There are three options to set up thumbnail and catalog images here:

  1. 1:1 – In the 1:1 ratio, images will be cropped to form a square.
  2. Custom – You can set up a custom aspect ratio off your choice if you select the second option. The images will be cropped into the aspect ratio that you choose.
  3. Uncropped – Here, the images will not be cropped by WooCommerce. The original aspect ratio with which you have uploaded the images will be maintained.
WooCommerce Customizer
You can choose a custom aspect ratio to determine the appearance of your catalog and thumbnail images.

How to handle product images from individual product pages?

You can set the main product image from the individual product page. On the right bottom corner of the product edit page, you will see the main product image as well as the product gallery images.

WooCommerce Customizer

You can remove or upload new images easily from the media library.

WooCommerce Customizer

Customers on the product detail page will be able to view both the main image and the multiple gallery images.

WooCommerce Customizer

There is also a default lightbox option, which will help customers view the product up close.

WooCommerce Customizer
WooCommerce offers a default lightbox option to help your customers view products in more detail.

Preview for different different devices

WooCommerce also lets you see the preview on different devices. By default, you can see preview for desktop. You can also change it to understand how it will look on a tablet or mobile phone as well.

On the right bottom corner of the customization panel of WooCommerce, you will be able to see the settings to change the preview option.

WooCommerce Customizer
By changing the preview mode, you can understand how your store content is displayed on mobile and tablets.

Checkout

With the WooCommerce Customizer, you can also make some adjustments to how your checkout page will be displayed. Here, you can make certain input fields mandatory, as well as set up text for your privacy policy and terms.

Making certain fields required

Firstly, you can define how you want certain input fields on the checkout page. You can define whether you want company name field, Address line 2 and phone number required or optional. Here there is an option to display an asterisk on required fields. You can tick the checkbox to enable it or leave it blank to not display asterisk.

WooCommerce Customizer
You can define whether to keep certain input fields required or optional here.

Here, you can also set pages for your Privacy Policy and Terms and Conditions. You have to create separate pages for these, and then just select those pages from the drop-down.

WooCommerce Custoomizer
You can set the page that will be displayed as your store’s privacy policy.

Also, you can optionally add a short text describing your privacy policy on the checkout page. The content for that can be set here.

WooCommerce Customizer
You can add or edit the short text above the Place Order button.

Now, when you have set a terms and conditions page, you can ensure that customers read it by adding a checkout field. You can also add or edit the text that will be displayed here.

WooCommerce customizer
When you set a terms and conditions page, a checkbox will be added on the frontend to ensure that customers read it.

Hope you got an overview of the WooCommerce customizer settings that you will see with the latest versions of WooCommerce. For those who are using the older versions, there is another set of options under the Display tab. Leave us a comment if you have any concerns.

Further reading

LEAVE A REPLY