Visual display between root categories and subcategories

Hi,

I need help differentiating the visual display between root categories and subcategories specifically on the /submit-listing/category/ page only — not on listing archives, homepage, or any other page.

MY SETUP:

  • WordPress with HivePress plugin + ListingHive child theme
  • I have 3 root/parent categories (Real Estate, Services, For Sale)
  • Each root category has subcategories beneath it
  • The submit listing category page is a virtual HivePress route (listing_submit_category_page) — it does not exist as a WordPress page

CURRENT BEHAVIOUR:

  • On /submit-listing/category/ all categories display as image cards in a 3-column grid
  • When a root category is clicked, subcategories load (same page, same layout)
  • Both root categories and subcategories render with identical HTML structure and identical CSS classes
  • The body already has the class: hp-template–listing-submit-category-page

WHAT I WANT:

  1. Root categories (depth 0, parent=0): keep the default image card grid — no changes
  2. Subcategories (depth 1+): display as a clean text list/rows instead of image cards — only on this submit page

THE PROBLEM:
Because root categories and subcategories share the exact same HTML markup and CSS classes (hp-listing-category, hp-listing-category–view-block), any CSS or template change affects both levels equally. I cannot find a reliable way to target subcategories only without also restyling the root category tiles.

ACTUAL HTML of a single tile (same for both root and subcategory):

6 Listings

QUESTIONS:

  1. Is there a HivePress hook or filter that adds a depth or parent indicator to the category tile HTML on the submit page? For example a class like hp-listing-category–depth-1 or a data attribute?
  2. Is there a safe template part I can override in my child theme that only affects the submit category route and not listing archive pages?
  3. Is there a recommended way to pass context (root vs subcategory) into the listing-category-image.php template part specifically when rendered on the listing_submit_category_page route?

I want to avoid editing core plugin files and need a child-theme-safe, update-proof solution.

Thank you

Thanks for your message — our team will reply shortly.

In the meantime, you can also get instant help from our AI Assistant, familiar with all the docs and solutions we’ve shared over the years.

Hi,

Unfortunately, there’s no hook available for what you’re looking to do. However, there is a workaround you can use: you could add a unique CSS class to the body element when subcategories are displayed, then use that class to restyle them via CSS.

Are you using the latest version of HivePress? In the current version, there’s no separate category select page, it uses a dropdown instead. If you’re seeing a legacy category selection page, you might be using an older version, or you might have category-specific memberships enabled, or perhaps a special code snippet that’s displaying that page.

Hi kseniia,

Thank you for the quick follow-up.

To clarify, I am indeed using the latest versions of both the HivePress plugin and the ListingHive theme. I am using a child theme with custom functions to maintain the card-based category selection, as my site structure requires this visual flow.

Regarding your suggestion to add a unique body class: since the subcategories load on the same URL path, could you please provide a specific PHP snippet (or point me to the correct filter) that I can add to my child theme’s functions.php to detect when the subcategory view is active and append a custom class to the body?

Additionally, if you have a recommended CSS snippet to transition those subcategory tiles into a text-based list layout once that class is active, that would be greatly appreciated.

Best regards

You can try this PHP snippet to add a custom body class:

add_filter(
	'body_class',
	function ( $classes ) {
		if ( hivepress()->router->get_current_route_name() === 'listing_submit_category_page' && hivepress()->request->get_param( 'listing_category_id' ) ) {
			$classes[] = 'my-custom-class';
		}

		return $classes;
	}
);

Then it’s possible to target and style categories via CSS this way:

.my-custom-class .hp-listing-category {...}

For example, you can try removing image backgrounds, paddings, etc. so the style would be close to a simple list.

Hope this helps