Pofily – WooCommerce Product Filters

Created: 10/2021

Update: 10/2023 – Updated version: 1.2.1

By Villatheme

Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!

FILE INCLUDES

INSTRUCTION

Pofily is designed for WooCommerce that helps you add filters to products. With various options of Filters the plugin provides, customers can search for their in-need products with just a few manipulations. Users can design how to show filters on the frontend with Customize settings, choose a place to display filters by using shortcodes or adding rules, and make the Filter look friendly and convenient to use for customers.

THE PLUGIN FEATURES:

Show Filter in Modal

  1. Choose to show Filter in Modal window with Off-canvas style or Top product loop style

  2. Edit icon to show Modal window with Icon position and Modal icon style

  3. Edit Modal with position to appear, effect, column layout

  4. Choose a style: Theme style or Custom style

  5. Design filter area with color of Title, Background and Accent color

  6. Set default color for Color swatches type (Taxonomy)

  7. Design label with default, hovered, and active status: font size, border width, border radius, background color, text color

Create filters that help customers search for products conveniently.

  1. Create multiple filter blocks for particular searching purposes with different options: Taxonomy, Price, Review, OnSale/Instock, Name, Metadata.

  2. Choose Taxonomy to apply the filter: Categories, Product tags, Attribute (Color, Size,…), …

  3. Show Filter as checkboxes, buttons, color swatches, images, range, range slider, search field (with Name)

  4. Customize terms or values with labels to replace the original name, and tooltip when hovered mouse…

  5. Customize range with Min and Max value. Create as many ranges as you want with Range type. Choose range

  6. Enable, disable to show the number of items, “clear” button, “view more” button, or toggle, and allow customers to choose multiple selections.

  7. Select Order by Name, Slug, or ID and choose Order type between ASC or DESC (for Taxonomy)

  8. Edit display type – Vertical or Horizontal – for Button type

  9. With Filter By Metadata, we provide meta keys of Products available in the database. Manage at settings and the plugin will display corresponding meta value

Customize and arrange the menu display on the front end.

  1. Choose and add blocks you want the menu to display on your website with created blocks

  2. Set rules to display Filter Menu at Display Conditions

  3. Enable, disable to show “Apply Filter” button

  4. Enable, disable to show menu in a modal window

Show Filter Menu using provided shortcode: We provided a shortcode to display Filter Menu, you can use it to display on a position you need just by copying and pasting to your ideal place.

INSTALLATION

System required:

  • WordPress 5.0.x or higher
  • memory_limit 125M
  • post_max_size 64M
  • upload_max_filesize 64M

Download plugin:

Go to Plugin/Add New/Upload Plugin/Choose file/

Select plugin zip file pofily-woocommerce-product-filters.zip

Install now –> Activate plugin

 

Video for guidance on How to install and use Pofily – WooCommerce Product Filters

HOW TO USE

After installing and activating Pofily, you can:

  1. Add and edit filter blocks with various options to customize at Filter Blocks.

  2. Add and edit filters menu with new-made or available filter blocks you created and customize how it displays on the frontend at Filter Menu.

  3. Manage other customization at  Settings.

HOW DOES THIS WORK

FILTER BLOCKS

Go to Pofily –> Filter Blocks –> Add Filter Blocks

Now you can start creating new Filter Blocks

  1. Add title: Enter the title of the block. This title will show on the backend in Filter Blocks
  2. Filter name: This field is compulsory. The name you add will appear on frontend.
  3. Filter For: Choose the type of filter that will apply to products among 6 options: Taxonomy, Price, Review, OnSale/InStock, Name, or Metadata.

 

 

Filter By Taxonomy

  1. Choose taxonomy: Choose one option of taxonomy.

  2. Choose term: You can add terms of category or tag based on your selection above manually. Or use Add all Button to add all available terms.

  3. Show type: Type to display taxonomy filter. There are 6 options: Button, Checkbox, Select, Color Swatches, and Images.

 

BUTTON TYPE

When you choose this type, Taxonomy will display as a button.

  1. Customize term:

    • Name: After you add a term, the name of the term will appear in this column.

    • New Label: Add a label for the term. This field is optional and will appear on the frontend when you show Filter. If this field is empty, it will take the Name to display

    • Tooltip: Add tooltip. This field is optional. It will appear on the front end when the user hovers the mouse over the term.
  2. Order by: Sort the terms based on their name, slug, ID, or default order.
  3. Order type: ASC or DESC
  4. Show count of items: Enable to show the number of items
  5. Allow multiple selection: Enable this if you want to allow customers to choose more than 1 option
  6. Multiselect relation: If you enable “Allow multiple selection”, choose a relation “And” or “Or”
    If “And”: Products after being filtered MUST include all filter values selected
    If “Or”: Products after being filtered may include one/particular/all filter values selected.
  7. Display Type: Choose the display type for your filter block – Vertical or Horizontal
  8. Show “clear” button: Enable to show the “Clear” link above the filter block
  9. Show as toggle: Enable if you want to show this filter as a toggle
  10. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

 

CHECKBOX TYPE

When you choose this type, Taxonomy will display as checkboxes.

  1. Customize term:

    • Name: After you add a term, the name of the term will appear in this column.

    • New Label: Add a label for the term. This field is optional and will appear on the frontend when you show Filter. If this field is empty, it will take the Name to display

    • Tooltip: Add tooltip. This field is optional. It will appear on the front end when the user hovers the mouse over the term.
  2. Order by: Sort the terms based on their name, slug, ID, or default order.
  3. Order type: ASC or DESC
  4. Show count of items: Enable to show the number of items
  5. Allow multiple selection: Enable this if you want to allow customers to choose more than 1 option
  6. Multiselect relation: If you enable “Allow multiple selection”, choose a relation “And” or “Or”
    If “And”: Products after being filtered MUST include all filter values selected
    If “Or”: Products after being filtered may include one/particular/all filter values selected.
  7. Display type: Choose the display type for your filter block
  8. Show “clear” button: Enable to show the “Clear” link above the filter block
  9. Show as toggle: Enable if you want to show this filter as a toggle
  10. Show “view more” button: Show view more item

 

 

SELECT TYPE

When you choose this type, Taxonomy will show up as selections.

  1. Customize term:

    • Name: After you add a term, the name of t the term will appear in this column.

    • New Label: Add a label for the term. This field is optional and will appear on the frontend when you show Filter. If this field is empty, it will take the Name to display

    • Tooltip: Add tooltip. This field is optional. It will appear on the front end when the user hovers the mouse over the term.
  2. Show search field: Enable to show search field.
  3. Order by: Sort the terms based on their name, slug, ID, or default order.
  4. Order type: ASC or DESC
  5. Allow multiple selection: Enable this if you want to allow customers to choose more than 1 option
  6. Multiselect relation: If you enable “Allow multiple selection”, choose a relation “And” or “Or”
    If “And”: Products after being filtered MUST include all filter values selected
    If “Or”: Products after being filtered may include one/particular/all filter values selected.
  7. Show “clear” button: Enable to show the “Clear” link above the filter block
  8. Show as toggle: Enable if you want to show this filter as a toggle, and choose toggle style.

 

 

COLOR SWATCHES TYPE

When you choose this type, taxonomy will show up as colored buttons.

  1. Button template:  Customize button by changing the value in Width, Height, and Border-radius columns.
  2. Color separator: When you add more than one color variant for one term (maximum 3), choose a separator to separate the colors.
  3. Customize term:

    • Name: After you add a term, the name of the term will appear in this column.

    • New Label: Add a label for the term. This field is optional and will appear on the frontend when you show Filter. If this field is empty, it will take the Name to display

    • Tooltip: Add tooltip. This field is optional. It will appear on the front end when the user hovers the mouse over the term.
  4. Order by: Sort the terms based on their name, slug, ID, or default order.
  5. Order type: ASC or DESC
  6. Show count of items: Enable to show the number of items
  7. Allow multiple selection: Enable this if you want to allow customers to choose more than 1 option
  8. Multiselect relation: If you enable “Allow multiple selection”, choose a relation “And” or “Or”
    If “And”: Products after being filtered MUST include all filter values selected
    If “Or”: Products after being filtered may include one/particular/all filter values selected.
  9. Display type: Choose the display type for your filter block – Vertical or Horizontal
  10. Show “clear” button: Enable to show the “Clear” link above the filter block
  11. Show as toggle: Enable if you want to show this filter as a toggle
  12. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

 

IMAGES TYPE

When you choose this type, Taxonomy will display as images.

  1. Button template:  Customize image display by changing the value in Width, Height, and Border-radius columns.
  2. Customize term:

    • Name: After you add a term, the name of the term will appear in this column.

    • New Label: Add a label for the term. This field is optional and will appear on the frontend when you show Filter. If this field is empty, it will take the Name to display

    • Tooltip: Add tooltip. This field is optional. It will appear on the front end when the user hovers the mouse over the term.
  3. Order by: Sort the terms based on their name, slug, ID, or default order.
  4. Order type: ASC or DESC
  5. Allow multiple selection: Enable this if you want to allow customers to choose more than 1 option
  6. Multiselect relation: If you enable “Allow multiple selection”, choose a relation “And” or “Or”
    If “And”: Products after being filtered MUST include all filter values selected
    If “Or”: Products after being filtered may include one/particular/all filter values selected.
  7. Display type: Choose the display type for your filter block – Vertical or Horizontal
  8. Show “clear” button: Enable to show the “Clear” link above the filter block
  9. Show as toggle: Enable if you want to show this filter as a toggle, then choose toggle style
  10. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

 

Filter By Price

When you choose this Filter, customers can search for products with prices that match their needs.

There are 2 types of Filter: Price Range Slider and Price Range

 

PRICE RANGE SLIDER

Create a range slider that allows customers to search for products with ideal prices flexibly.

  1. Price range slider value: Create a range slider by adding values of price to Min and Max fields. If these fields are blank, the range will be automatically created by value on the Product page
  2. Show “clear” button: Enable to show the “Clear” link above the filter block
  3. Show as toggle: Enable if you want to show this filter as a toggle

 

 

PRICE RANGE

Create a stable range manually where customers can find their ideal price by selecting available options.

There are 3 options to display range on frontend: Button, Select and None

  1. Customize price ranges: Add as many ranges as you want by entering Min and Max value –> Choose “Add range”
  2. Show count of items: Enable to show the number of items
  3. Display Type: Choose the display type for your filter block – Vertical or Horizontal (only works with Button)
  4. Show “clear” button: Enable to show the “Clear” link above the filter block
  5. Show as toggle: Enable if you want to show this filter as a toggle
  6. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

 

Filter By Review

This Filter helps customers find products using ratings and reviews.

There are 2 types to display Filter By Review: Button and Select

  1. Show star icon: Enable to show star icon (Only works with Button)
  2. Show tooltip: Enable to show tooltip (Only works with Button)
  3. Show count of items: Enable to show the number of items
  4. Display Type: Choose the display type for your filter block – Vertical or Horizontal (Only works with Button)
  5. Show “clear” button: Enable to show the “Clear” link above the filter block
  6. Show as toggle: Enable if you want to show this filter as a toggle, then choose toggle style
  7. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

 

Filter By OnSale/InStock

This Filter helps customers find products on sale/in stock.

  1. Choose to display Filter for Onsale product or Instock product, enable both if you want to add the filter for all.
  2. Choose Filter Type: Button or Checkbox

  1. Show count of items: Enable to show the number of items
  2. Display Type: Choose the display type for your filter block – Vertical or Horizontal (Only works with Button)
  3. Show “clear” button: Enable to show the “Clear” link above the filter block
  4. Show as toggle: Enable if you want to show this filter as a toggle, then choose toggle style
  5. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

 

Filter By Name

This filter helps customers find their product by entering the product name into the search field

  1. Placeholder text: Enter the placeholder for the search field, it will be displayed on the frontend
  2. Show “clear” button: Enable to show the “Clear” link above the filter block
  3. Show as toggle: Enable if you want to show this filter as a toggle, then choose a toggle style

 

 

Filter By Metadata

This Filter helps customers find products they want by using meta keys and meta values in metadata.

  1. Choose meta key: To choose a meta key, you need to manage at Setting > Metadata to add the meta_key you want to display
  2. Choose meta type:  Choose your meta-type – String or Numeric

 

STRING TYPE

There are 3 types to display this Filter with String type on the frontend: Button, Checkbox, and Select

 

  1. Search/Add Meta Value: Type to add Meta value manually, or use the “Add all” button to add all available meta values
  2. Customize meta value: 

    • Name: After you add a value, the original value will appear in this column.

    • New Label: Add a label for the value. This field is optional and will appear on the front end when you show Filter. If this field is empty, it will take the Name to display

    • Tooltip: Add tooltip. This field is optional. It will appear on the front end when the user hovers the mouse over the meta value
  3. Show count of items: Enable to show the number of items
  4. Allow multiple selection: Enable this if you want to allow customers to choose more than 1 option
  5. Multiselect relation: If you enable “Allow multiple selection”, choose a relation “And” or “Or”
  6. Display type: Choose the display type for your filter block – Vertical or Horizontal (Only works with Button)
  7. Show “clear” button: Enable to show the “Clear” link above the filter block
  8. Show as toggle: Enable if you want to show this filter as a toggle, then choose toggle style.

 

 

 

NUMERIC TYPE

There are 2 options to show Filter with Numeric type

 

Range

  1. Customize ranges: Choose “Add range”, then fill values into Min and Max fields. You can add as many ranges as you want
  2. Display type: Choose the display type for your filter block – Vertical or Horizontal
  3. Show “clear” button: Enable to show the “Clear” link above the filter block
  4. Show as toggle: Enable if you want to show this filter as a toggle
  5. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

 

Range Slider

  1. Ranger slider value: Fill values into Min and Max fields. Choose the slider step.
  2. Show “clear” button: Enable to show the “Clear” link above the filter block
  3. Show as toggle: Enable if you want to show this filter as a toggle, then choose a toggle style

WooCommerce popular meta key:

_price filter by Product price (Custom Field Num)
_stock_status filter by Product Stock status (Custom Field)
_sale_price by Sale Price (Custom Field Num) or on Sale Status (Custom Field Exists)
total_sales by Sales Count
_backorders by Backorders Status (Custom Field)
_downloadable by Downloadable Status (Custom Field)
_sold_individually by Sold Individually status (Custom Field)
_stock by Stock Quantity (Custom Field Num)
_virtual by Product Virtual status (Custom Field)
_length by product Length
_width by product Width
_height by product Height
_weight by product Weight
_wc_average_rating filter by Product Average Rating.

 

 

 

FILTER MENUS

Create Filter Menus to display Filter Blocks on the frontend.

You can create as many menus as you want, and set rules to apply them in different places.

Go to Dashboard –> Pofily –> Filter Menus –> Add Filter Menus

Then start to create a Filter Menu

  1. Add title: Enter a title for Filter Menu, this field will not show on the frontend
  2. Choose Filter Block: Filter Blocks you created will appear in the left field. Click to the Block to add it to the menu. The Block you choose will appear in the right field. You can drag the Blocks to change their position appearing on the frontend.
  3. Using button to filter: Enable to show a button “Apply Filter” to apply all filters
  4. Show menu in modal: Enable to show the menu filter in content modal
  5. Display Conditions: Add rule display conditions you want. For example: Menu is only applied to the product category or Shop page…

 

 

MANAGE SETTING AND DESIGN

Manage general settings and design how the Filter Menu appears on the frontend as you want at Pofily –> Settings.

 

GENERAL

  1. Filter Ajax: When this option is enabled, the page does not reload when the user filters the products.
  2. Shop loop container: Selector for the tag that is holding the shop loop. In most cases, you won’t need to change this.
  3. Shop pagination container: The selector for the tag containing the shop pagination is provided here. In most cases, you won’t need to modify this.
  4. Auto hide modal: Enabel to Auto Hide modal after filter by ajax.
  5. Hide product out-of-stock: If you enable this option, out-of-stock items that were filtered will be automatically invisible. If you have a “Filter by InStock” in the current menu, it will be hidden.
  6. Filter Modal: Enable Modal for the filter
  7. Modal auto open: Enable this option to make the modal open when the page reloads, if the modal was open before
  8. Show active filters: Filters that are selected will be displayed, letting users know what filters are applied
  9. Active filters labels position: Choose a position to show active filters.

 

 

CUSTOMIZE

  1. Modal style: Choose to show Filter Menu in Modal in Off-canvas style or Top product loop style
  2. Icon position: Choose a position to show the modal icon on the frontend
  3. Off-canvas Position: Choose a position to show modal in Off-canvas style
  4. Off-canvas effect open: Choose an effect to show modal in Off-canvas style
  5. Modal icon style: Design icon with Default version and when hovered
  6. Options style: Choose a style between Theme style or Custom Style
  7. Filters area colors: Customize color for Title, Background, and Accent of Filter modal
  8. Color swatches/Image button default size: Set default design for Color swatches and Image button with Width, Height, Border radius value, and Color separator (for color swatches if you add more than 1 color variant to one term)
  9. Color swatches default color: Set the default color for the “Color swatches” button
  10. Label styles: Set default design, Hovered design, and Active design for Label.

NOTE:  The (1), (2), (3), (4), (5) will be unavailable if the Settings –> General –> Filter Modal feature is disabled

.

 

METADATA

In the Metadata setting, we provide meta keys for Products available in your database, choose as many meta keys you want to display. The meta key you chose will display on Filter By Metadata –> Choose meta key field. You need to manage the setting in this section before choosing the meta key when creating Filter By Metadata.

 

 

 

SEO Rule

Through these settings, the admin can make their website friendly to the search engine. By investing in creating an SEO-friendly website, you will rank better in the search results and drive more traffic to your page.

This function of our plugin will support your website along with an SEO plugin to make it rank better in the search results.

– Go the Dashboard > Pofily > Settings > SEO rule. Then enable the option “Enable SEO rule”
– Configure the 3 rules below
– Click “Save Settings”

 

SEO Title

Create a good SEO title easily with the provided shortcodes. You simply just need to click on the shortcodes to add, no need to write them manually or copy/paste them. It’s way quicker and more convenient.

The SEO title you formulate will appear with the construction it was built when a user filters.

For example; the title after editing the rule will be like this, see the title on the top left of the image below:

 

Meta Description

These settings support a friendly SEO Meta Description, which is a brief summary letting users know the general idea of the content within the page, after the filter is active.

 

SEO H1 Title

This controls the H1 Title of your website, the construction in this field will be added between the 2 tags <h1> and </h1>

Note: Not every theme/site has an H1 title, so please make sure you’re using one that has this title before checking this rule operation.

Below is an example of SEO H1 Title when you configure this rule:

 

 

Important Note:

  1. The slug of Product Permalinks > Custom Base can only work with the default slug, which is /product/
  2. When this function is enabled/disabled, you would need to go to Dashboard > Settings > Permalinks > Click “Save Changes”

 

 

SHORTCODE

The plugin provides shortcodes to:

1. DISPLAY FILTER MENU

The plugin provides a shortcode for each menu, so you can show the filter menu, by copying/pasting them on the position you need.

Step 1: Copy the shortcode in the filter menu list/filter menu editor with the “Copy” button

Step 2: Paste it to the place you want to display the filter menu.

Important note:

This filter menu shortcode can only show the filter menu on WooCommerce product archive pages (for example; Shop page, single product page…). If you put on a non-archive page of WooCommerce, the filter will not be visible (for example; a Blog page).

 

2. DISPLAY MODAL ICON

This shortcode helps to display the modal icon (if you’re using modal to display the filter menu) on any page.

[VIWCPF_SHORTCODE_MODAL_ICON link="http://google.com/"]

The parameter link="http://google.com/" is optional, you can add it or leave it empty.

  • If added,  customers will be redirected to that URL address when they click the icon outside of the Shop page.
  • If not added, customers will be redirected to the Shop page when they click the icon outside of the Shop page.

 

Extra information

Thank you for your attention!

If you have any questions, please create a topic at our FORUM, we will support within 24 hours.