WooCommerce Variation Swatches And Additional Gallery

Archives / Shop Page

Estimated reading: 4 minutes

WooCommerce Shop Page

IWPS comes with many features to enhance WooCommerce Shop pages. WooCommerce shop, store, product archives, and product search result. All these pages can be customised with IWPS.

Many themes have custom shop. Follow theme control Doc to find more.

Swatches on Shop Page

IWPS allows you to display variation swatches into product shop pages. It will help you displaying all types of variation swatches like image, button, color, dual color, radio buttons, and dropdown swatches too.

How to display variation swatches on product page?

Follow the below steps to add variation swatches on shop pages,

  • Go to IWP Swatches > Swatches
  • Open Archives/Shop Tab
  • In “Archives Page Settings” you will find activate swatches on shop page
  • Activate option
  • Click on save

Limiter

If you have products with high number of variations then you must need a limiter. Showcasing a high number of swatches on shop page for every product may cause design breakdown.

How Variation Limiter works?

If you have products with high number of variations then you must need a limiter. Showcasing a high number of swatches on shop page for every product may cause design breakdown.

What you can do with Limiter text?

You can choose between 2 actions,

  1. Use limiter text to reveal all variations
  2. Use limiter text to open the product

How to setup Variation Limiter?

Follow the below steps to activate this option,

  • Go to IWP Swatches > Swatches
  • Open IWPS Advanced Tab
  • Activate “One Variation Feature”
  • Add your preferred “Attribute display limit”
  • Add your preferred “Limiter link working”
  • Click on save settings

Gallery Images on Shop Page

IWPS helps you add variation swatches on your WooCommerce shop pages. Here, You can perform any 1 type of action from below 2 options.

  1. Open the product
  2. Update the product image

How to setup Link behaviour?

Follow the below steps to setup your shop page URL behaviour,

  • Go to IWP Swatches > Swatches
  • Open IWPS Advanced Tab
  • Open One Variation Feature
  • Update Catalog More Link Behaviour 
  • Click on save

Stock Info

As shown in the above image, you can display product’s stock info in the WooCommerce shop, search result, archives and store pages with IWPS.

Note – Display and element design of the stock info may vary based on your theme.

How to change Shape Of Swatches?

Follow the below steps to activate stock info on your shop pages,

  • Go to IWP Swatches > Swatches
  • Open Archives / Shop Tab
  • Open Product Information Settings
  • Activate Product Stock Info
  • Click on save

Swatches Dimension

With IWPS, you can customize the dimensions and design of the swatches.

How to change Shape Of Swatches?

You can setup 2 shapes of swatches,

  1. Square Swatches
  2. Circle Swatches

Follow the below steps to activate this option,

  • Go to IWP Swatches > Swatches
  • Open Settings tab > Swatches settings
  • Choose your preferred swatches design
  • Click on save

Note – Customising this option will affect all the products. It is a global setting setup.

How to change Shape of Swatches Separately?

If you want to change the swatches design of any specific product separatly then follow the below steps,

  • Click on Edit product on which you want to change shape
  • Open Swatches Settings > Choose shape style for specific variation type
  • Click on save

How to change Dimension of Swatches?

You can change variation swatche’s dimensions both globally and separately.

Follow this doc to change dimensions separatly, It is converted as a advanced feature.

To apply dimension settings globally, follow the below steps.

  • Open IWP Swatches > Swatches
  • Open Designing tab
  • You can customize all the variation swatches and tooltips related elements from designing tab.
  • Follow the hints and descriptions given to designing tab to create your perfect design.
  • Click on save

Tooltips on Shop Page

You can show product tooltips on product pages. But with IWPS, you can show the tooltips on shop pages too.

How to setup Shop Page Tooltips?

Follow the below steps to activate this option,

  • Go to IWP Swatches > Swatches
  • Open Archives/Shop Tab
  • Activate “Archives Page Tooltip” in Archives Page Settings
  • Click on save

You will be able to showcase the product tooltips on archives page.

EASY ACCESS