Filters and Blocks: Image Skin Settings

— title: Filter Editor Filters: Image Skin Settings description: Manual Reference for image-style filter options. doc_type: reference section: Filter Editor audience: Store owners, catalog managers, developers, and support manual_reference: true parent_page: reference/filter-editor-filters-blocks.md option_count: 12 updated: 2026-05-24 source_refs: – _docs/Final/options/fe-tab2-filters.md – _docs/Final/html/05_tab2.html ai_summary: Covers image sources, dimensions, shape, fit, selected states, labels, fallbacks, ACF field names, and debug indicators. status: needs-verification —

This page covers Image Skin Settings options for individual filter blocks in the Filter Editor. Use it with the Filters and Blocks index when navigating the full block-level Reference.

Image Skin Settings

Image Source

• Public label: Image Source
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Select
• Default value: WooCommerce native category image.
• Shown when: Display Type is Image.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Chooses where term images come from.
• When to use: Use native category images for category filters, manual term images for custom taxonomies, or ACF when an existing field already stores images.
• Side effects / performance notes: Featured-product image sources can be more expensive because they need product lookups.
• Related options: Fallback Strategy, ACF Field Name, Show Term Images.

Width

• Public label: Width
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Number
• Default value: 64
• Shown when: Display Type is Image.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Sets image width in pixels.
• When to use: Adjust it to match the filter layout and image detail needed.
• Side effects / performance notes: Wider images increase visual weight and can wrap horizontal layouts.
• Related options: Aspect Ratio, Image Fit.

Shape (Image)

• Public label: Shape
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Select
• Default value: Rounded
• Shown when: Display Type is Image.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Sets image corner shape.
• When to use: Match it to the store's card or thumbnail style.
• Side effects / performance notes: Circle shapes work best with square images.
• Related options: Aspect Ratio.

Aspect Ratio

• Public label: Aspect Ratio
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Select
• Default value: 1:1
• Shown when: Display Type is Image.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Sets the image container ratio.
• When to use: Use square for swatch-like thumbnails and wider ratios for category artwork.
• Side effects / performance notes: Ratios that do not match source images may crop or add empty space depending on Image Fit.
• Related options: Width, Image Fit.

Image Fit

• Public label: Image Fit
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Select
• Default value: Cover
• Shown when: Display Type is Image.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Controls how the source image fits its container.
• When to use: Use cover for consistent filled tiles and contain when the entire image must remain visible.
• Side effects / performance notes: Cover can crop important details.
• Related options: Aspect Ratio.

Selected Style (Images)

• Public label: Selected Style
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Select
• Default value: Border plus check
• Shown when: Display Type is Image.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Defines how selected image values are marked.
• When to use: Use border-plus-check for clear selection on varied image backgrounds.
• Side effects / performance notes: Selected states must remain visible on both dark and light images.
• Related options: Accent Color.

Label Position

• Public label: Label Position
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Select
• Default value: Below
• Shown when: Display Type is Image.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Places the label below, over, on hover, or hides it.
• When to use: Use below for clarity and overlay only when space is tight.
• Side effects / performance notes: Hidden labels can hurt accessibility unless tooltips or names remain available.
• Related options: Label Background.

Label Background

• Public label: Label Background
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Select
• Default value: Scrim
• Shown when: Label Position overlays the image.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Adds a background treatment behind overlay text.
• When to use: Use scrim or solid background when labels sit over images.
• Side effects / performance notes: Transparent labels over busy images can become unreadable.
• Related options: Label Position.

Fallback Strategy

• Public label: Fallback Strategy
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Select
• Default value: Placeholder
• Shown when: Display Type is Image.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Defines what appears when a value has no image.
• When to use: Use placeholder to preserve grid shape, generated text for quick setup, or hidden when missing images should not show.
• Side effects / performance notes: Hiding missing images can remove valid choices from view.
• Related options: Fallback Placeholder, Image Source.

Fallback Placeholder

• Public label: Fallback Placeholder
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Image URL or media attachment
• Default value: Empty.
• Shown when: Fallback Strategy is Placeholder.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Sets the placeholder image for values without their own image.
• When to use: Use a neutral placeholder that matches the store's visual style.
• Side effects / performance notes: One generic placeholder can make many values look identical.
• Related options: Fallback Strategy.

ACF Field Name

• Public label: ACF Field Name
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Text
• Default value: Empty.
• Shown when: Image Source uses an ACF image field.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Names the ACF image field used as the source.
• When to use: Use it when taxonomy terms already store images in an ACF field.
• Side effects / performance notes: A wrong field name results in missing images and fallback behavior.
• Related options: Image Source, ACF compatibility.

Source Debug Indicator

• Public label: Source Debug Indicator
• Location: Filter Editor > Filters / Blocks > Image Skin Settings
• Type: Toggle
• Default value: Off
• Shown when: Display Type is Image.
• Availability: Free setting inside the selected skin; skin availability follows Display Type.
• What it does: Shows admin-only indicators for where each term image comes from.
• When to use: Use it while setting up or troubleshooting image sources.
• Side effects / performance notes: It is for admin debugging and should not affect storefront rendering.
• Related options: Image Source, Fallback Strategy.