TarfandTech Category Navigator

TarfandTech Category Navigator displays WooCommerce product categories as responsive image cards and lets shoppers move through their category hierarchy without a full page reload or AJAX requests.

Features

• Uses the standard WooCommerce product_cat taxonomy.
• Responsive category cards with category thumbnails or WooCommerce placeholder images.
• Same-page drill-down navigation without AJAX.
• Breadcrumb and back navigation, including a selected start-category boundary.
• Maximum navigation depth configurable up to five levels.
• Settings grouped into five tabs.
• Global settings can be overridden for individual shortcode instances.
• Keyboard-focus styling and support for prefers-reduced-motion.

Usage

Insert this shortcode into a page or a Shortcode block:

[wcdd_category_grid]

Example with common overrides:

[wcdd_category_grid columns_desktop=”3″ columns_tablet=”2″ columns_mobile=”1″ title=”Product Categories” show_title=”yes” max_level=”5″]

Shortcode attributes

• columns_desktop, columns_tablet, columns_mobile: card columns at each viewport size.
• title, show_title: section title text and visibility.
• start_category: start from a category ID or slug.
• max_level: maximum navigation depth (1 to 5).
• hide_empty: set to yes to hide empty categories, while keeping ancestors needed to reach non-empty descendants.
• image_fit: contain or cover.
• image_height, image_height_mobile: image area height in pixels.
• card_gap, card_gap_mobile: gap between cards in pixels.
• card_radius: card corner radius in pixels.
• card_padding, card_padding_mobile: inner card padding in pixels.
• card_bg, card_border: card background and border colors in hex.
• card_border_width, card_border_style: border width and style (solid, dashed, dotted, double).
• card_text, card_text_size, card_text_weight, card_text_align: category-name text appearance.
• card_hover: enable or disable the hover effect.
• card_hover_border: hover border color.
• card_hover_shadow: enable or disable hover shadow.
• card_hover_shadow_color: hover shadow color.
• card_hover_lift: hover movement in pixels (0 to 8).
• card_hover_duration: hover transition duration in milliseconds (0 to 600).

When an attribute is omitted, the global setting is used. Explicit shortcode values take priority over global settings.