3.11 Set Up Products - WooCommerce Customizer – Manage Store Notice, Catalog View and Product Images

2/ Preview your selection live. You must be viewing the Shop page.

3/ Publish to save and go live.

Category Pages

Your Category Pages can display Products or Subcategories within a Category, or both. Selecting one is recommended.

If you only have a few products, or you have no subcategories, there may be no difference in appearance.

1/ Select Products or Subcategories from the dropdown.

2/ Preview your selection live. You must be viewing a Category page.

3/ Publish to save and go live.

Default product sorting

Default Product Sorting allows you to control the order in which products are displayed, which influences how products are viewed by default on Shop and Category pages. Visitors still have the option to sort product in a different way, if desired.

Default sorting (custom ordering + name) – display products alphabetically by name. Where the product sort order has been customized, that custom order is considered first, and alphabetically by name second (if products share the same order positions). In your store, customer will see this as Default Sorting.

Sort by Popularity (sales) – display products according to amounts sold, from most to least. Customers see Sort by Popularity.

Sort by Average rating – display products based on average review ratings, from highest to lowest.

Sort by most recent – display products in the order they were added to the store, newest to oldest. Customer see Sort by Latest.

Sort by price (asc / desc) – sort product by price either lowest to highest (asc) or highest to lowest (desc). Customer see either Sort by price: low to high, or Sort by price: high to low.

In this example, we’ve chosen Sort by price (asc) (Sort by price: low to high, shown with a ✔), and the customer is about to select to Sort by newsness.

To choose a Default Sort Order:

1/ Select an option from the dropdown:

2/ Preview your selection live. You can be viewing the Shop page or a Category page.

3/ Publish to save and go live.

Products per Row

Products per Row allows you to choose the number of items that appear in a single row on Shop and Category pages.

Be sensitive to:

• Size of a product image
• Space on a computer/laptop, tablet or mobile device
• The optimal experience for a customer viewing and buying your products

1/ Use arrows to increase/decrease the number of products.

2/ Preview your selection live. You can be viewing the Shop page or a Category page.

3/ Test on different devices. Below is an example of different views, using the same settings.

• On a computer/laptop screen

• On a tablet

• On a mobile device

*Scaling of image size and appearance will vary, depending on the theme you’re using. Screenshots above are with our free Storefront theme.

4/ Publish to save and go live.

Rows per Page

Rows per Page allows you to choose the number of rows that appear on Shop and Category pages.

Be sensitive to:

• Size of product images
• Number of products you sell
• Space on a computer/laptop, tablet or mobile device
• The optimal experience for a customer viewing and buying your products

1/ Use arrows to increase/decrease the number of rows.

2/ Preview your selection live. You can be viewing the Shop page or a Category page.

3/ Test on different devices. Below is an example of different views, using the same settings.

• On a computer/laptop screen

• On a tablet

• On a mobile device

*Scaling of image size and appearance will vary, depending on the theme you’re using. Screenshots above are with our free Storefront theme.

4/ Publish to save and go live.

Product Page

Product Page has two options that apply to single product pages:

• Sticky Add-to-Cart – It’s a small content bar at the top of the browser window which includes relevant product information and an add-to-cart button. It slides into view once the standard add-to-cart button has scrolled out of view.

• Product Pagination – Displays next and previous links on product pages. A product thumbnail is displayed with the title revealed on hover.

Product Images

Product Images has two features:

• Allows you to select how Catalog and Thumbnail images are sized and cropped
• Automatically resizes Catalog and Thumbnail images site-wide on your store when a published change is made*

This saves you time and energy in manually cropping and resizing each one.

Image Types

• Catalog Images are medium-sized images that appear on the Shop page, Category pages, and for Related products, Up-sells and Cross-sells.
• Thumbnail Images are the smallest images used in the Cart, Widgets and (optional) Gallery images underneath the Single Product Image on individual product details pages.
• Single Product Image is the largest image and refers to the main/featured image. Product Images settings in WooCommerce Customizer do not apply to these. To add, edit or delete the Single Product Image or Product Image Gallery, see: Adding Product Images and Galleries.

* Previously, thumbnails needed to be regenerated using a third-party plugin. WooCommerce 3.3x now handles this for you. Regeneration will not be triggered for changed made only in Preview mode.

Resize and Crop Thumbnail Images

1/ Go to: Appearance > Customize > WooCommerce > Product Images.

2/ Select one:

• 1:1 – Square image

• Custom – You select the ratio in which images are cropped. In this example, 1:2 is entered; and one image cannot be enlarged to meet this requirement.

• Uncropped – Images appear as is, which can result in all being different unless you used photos that are uniform in size and resolution. The screenshot below is an example of this: One is perfectly square, the next is a smaller square, and the last is a rectangle.

3/ Test on different devices. Below is an example of different views, using the same settings.

• On a computer/laptop screen

• On a tablet.

• On a mobile device.

4/ Publish to save and go live.

Checkout

All options for Checkout can be found at: Appearance > Customize > WooCommerce > Checkout.

You can now set whether certain fields are required or optional depending on the data you wish to collect. You can also choose to highlight the required fields with an asterisk, which is the default.

It is recommended to create Privacy Policy and Terms and Conditions pages, and then you can set them here. The pages set are linked to along with the text you enter and appear on the Checkout page like this:

The “privacy policy” link opens the page in a new window, while the “terms and conditions” link opens a box on the page showing the contents of the terms and conditions page.  An order cannot be placed without checking the required terms and conditions box.

FAQs

I cannot find WooCommerce Customizer.

Stores using WooCommerce 3.3x+ have this option available at: Appearance > Customize > WooCommerce. Stores using a version of WooCommerce prior to 3.3.0 will see Store Notice and Product Images at: WooCommerce > Settings > Products > Display section; Product Catalog is new.

We recommend updating to the latest version of WooCommerce to take advantage of new and improved features and functionality. Thanks!

Can I still use the Regenerate Thumbnails plugin?

Yes, you can. But it’s unnecessary if using WooCommerce 3.3.0 or above because a change to a new or different them, or any live change in Product Catalog or Product Images, triggers WooCommerce to auto-size and auto-update thumbnail and product catalog images for you.

You can also use the Regenerate Shop Thumbnails option at: WooCommerce > Status > Tools.