Swatches on Woo Widgets

Posted on by Lavender Vu

Important Note:

As of WordPress 5.8, the Block Widgets Editor replaces the previous widgets administration. All widgets are still available as Legacy Widgets when using the new Block Widgets Editor. However, to maintain full widget settings functionality, you must install the Classic Widgets plugin which restores the previous (“classic”) WordPress widgets settings screens. You can visit this article for more information.

With the new Block Widget, our plugin can’t interfere and make changes to the swatches. Therefore, users would need to install the Classic Widgets plugin to configure the swatches settings in the Woo Widgets.

 

How to add Filter Products by Attribute to Widget?

Note: This filter is function of WooCommerce. Our plugin makes the variations in the filter look better, but we don’t interfere the filter function. If you encounter any filter relating issue, please follow this instruction to test.

To display “Filter Products by Attribute’ on the product list, Go to Dashboard/ Appearance/Widgets and click on Add Widget to add the Filter Products by Attribute.

Configure the opened window for Widget Filter Products by Attribute.

  1. Add Widget: Click the button to add the Filter Product by Attribute Widget.
  2. Title: Set the Title For the Widget Filter Product by Attribute.
  3. Attribute: Choose the attribute for  Attribute Filter.
  4.  Display Type: Choose the list type to use swatches style.
  5. Query type:  Choose “AND” or “OR” query type for Filter.
  6. Swatches settings: Click the button to do the settings of swatches on the filter

 

 

Setting the Swatches for “Filter Products by Attribute” WooCommerce.

Go to Dashboard >> Variation Swatches >> Woo Filter Widget

  1. Enable: Enable it to use “Filter Products by Attribute” for WooCommerce Store.
  2. Max items: Number of attribute terms to be visible on Woo widget. Leave 0 and all items will be shown without the “Show more” button
  3. Display Style: Display the attribute terms vertically or horizontally.
  4. Design attribute: Customize all settings relating to term detail.
  5. Product count: Customize all settings relating to product count.

 

Design attribute

These settings are to customize the swatches on the Woo widgets.

Default styling: Customize the default style of the swatches.

  • Show attribute label: Enable this option to display name of the attribute term. Only works when the Display Type is color/image
  • Color: Swatches text color in default status.
  • Background: Swatches background color in default status.
  • Box shadow color: Select the box shadow color.
  • Padding: Manage the swatches padding.

Hover styling: Customize the swatches on Woo widgets when hovered

  • Color: Swatches text color when hovered.
  • Background: Swatches background color when hovered.
  • Box shadow color: Swatches box shadow color when hovered.

Selected styling: Customize the swatches on Woo widgets when selected

  • Color: Swatches text color when selected.
  • Background: Swatches background color when selected.
  • Box shadow color: Choose the box shadow color.

 

Product count

These settings enable and allow the admin to customize product count for filter of attributes.

Default styling: Customize the default style of the product quantity.

  • Enable: Enable to show the quantity of product.
  • Color: Text color of the product quantity.
  • Background: Background color of the product quantity.
  • Border color: Border color of the product quantity.
  • Padding: Padding of the product quantity.
  • Border width: Manage the width of all four sides of the product quantity border.
  • Border radius: Manage the radius of the product quantity’s corners.

Hover styling: Customize the product quantity when hovered.

  • Color: Text color of the product quantity when hovered.
  • Background: Product quantity background color when hovered.
  • Border color: Product quantity border color when hovered.
  • Border radius: Manage the radius of the product quantity’s corners when hovered.

Selected styling: Customize the product quantity when the swatches is selected.

  • Color: Text color of the product quantity when the attribute is selected.
  • Background: Background color of the product quantity when the attribute is selected.
  • Border color: Product quantity border color when selected.
  • Border radius: Manage the radius of the product quantity’s corners when the attribute is selected.