Store Management

How to setup Store Notice, Catalog View and Product Images in WooCommerce?

Store Manager for WooCommerce

Different Product Types:

  1. How to Add a Simple Product in WooCommerce?
  2. How to Add a Grouped Product in WooCommerce?
  3. How to Add a Virtual Product in WooCommerce?
  4. How to Add a Downloadable Product in WooCommerce?
  5. How to add an External/Affiliate Product WooCommerce?
  6. How to Add a Variable Product in WooCommerce?

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

How to setup Store Notice, Catalog View and Product Images in WooCommerce 1

Under WooCommerce, you will find four different settings:

  • Store Notice
  • Product Catalog
  • Product Images
  • Checkout

How to setup Store Notice, Catalog View and Product Images in WooCommerce 2

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.

How to setup Store Notice, Catalog View and Product Images in WooCommerce 3

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

How to setup Store Notice, Catalog View and Product Images in WooCommerce 4
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.

How to setup Store Notice, Catalog View and Product Images in WooCommerce 5

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.
How to setup Store Notice, Catalog View and Product Images in WooCommerce 6
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
How to setup Store Notice, Catalog View and Product Images in WooCommerce 7
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)
How to setup Store Notice, Catalog View and Product Images in WooCommerce 8
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.

How to setup Store Notice, Catalog View and Product Images in WooCommerce 9
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.

How to setup Store Notice, Catalog View and Product Images in WooCommerce 10
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.
How to setup Store Notice, Catalog View and Product Images in WooCommerce 11
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.

How to setup Store Notice, Catalog View and Product Images in WooCommerce 12

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

How to setup Store Notice, Catalog View and Product Images in WooCommerce 13

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

How to setup Store Notice, Catalog View and Product Images in WooCommerce 14

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

How to setup Store Notice, Catalog View and Product Images in WooCommerce 15
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.

How to setup Store Notice, Catalog View and Product Images in WooCommerce 16
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.

How to setup Store Notice, Catalog View and Product Images in WooCommerce 17
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.

How to setup Store Notice, Catalog View and Product Images in WooCommerce 18
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.

How to setup Store Notice, Catalog View and Product Images in WooCommerce 19
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.

How to setup Store Notice, Catalog View and Product Images in WooCommerce 20
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.

Leave a Reply

Your email address will not be published. Required fields are marked *