Make Entire Category Card Clickable

[highwayman]

Currently, the image or title must be clicked on precisely to go to the category. What PHP snippet can I add to make the entire cateogry preview clickable?

[ihor]

Please try this CSS snippet Full category block clickable - #3 by yevhen

[highwayman]

Hey ihor, i tried adding this CSS snippet- however it makes the entire category card unclickable

[andrii]

Hi,

We checked this CSS snippet, and it seems to be okay.
Please make sure you add this code in the Appearance > Customize > Additional CSS section.
If this issue persists, make sure that caching is disabled for logged-in users.

[highwayman]

Hey Andrii

I appreciate the support however I was unable to make the CSS edit work- however I was able to achieve the same result with PHP snippet. leaving this code here for other people’s reference in case anyone else encounters the same issue as me.

add_filter(
	'hivepress/v1/templates/listing_category_view_block',
	function( $template ) {
		$template['blocks']['listing_category_description'] = [
			'type'       => 'part',
			'path'       => 'listing-category/view/block/description',
			'context'    => [ 'listing_category' ],
			'attributes' => [
				'class' => [ 'hp-listing-category__description' ],
			],
			'_order' => 20,
		];

		return $template;
	}
);

add_filter(
	'hivepress/v1/parts/listing_category/view/block/description',
	function( $output, $context ) {
		if ( isset( $context['listing_category'] ) && $context['listing_category'] instanceof \HivePress\Models\Listing_Category ) {
			$listing_category = $context['listing_category'];
			$description = $listing_category->get_description();

			if ( ! is_null( $description ) && '' !== $description ) {
				$output = '<div class="hp-listing-category__description">' . wp_kses_post( wpautop( $description ) ) . '</div>';
			}
		}

		return $output;
	},
	10,
	2
);

add_action(
	'wp_footer',
	function() {
		?>
		<script>
			document.addEventListener( 'DOMContentLoaded', function() {
				const listingCategoryDescriptions = document.querySelectorAll( '.hp-listing-category__description' );
				
				listingCategoryDescriptions.forEach( function( description ) {
					const link = description.closest( '.hp-listing-category' ).querySelector( '.hp-listing-category__name a' );
					if ( link ) {
						description.addEventListener( 'click', function() {
							window.location.href = link.href;
						} );
					}
				} );
			} );
		</script>
		<?php
	}
);

And then this CSS snippet to set cursor to pointer style when hovering over desc:

.hp-listing-category__description {
	cursor: pointer;
}