Snippet for displaying WooCommerce brands taxonomy in a grid format using shortcode

widget_for_woocommerce_brands_grid.php

<?php
/**
 * Shortcode: [wc_brands_grid_styled]
 * Usage: [wc_brands_grid_styled cols="6" cols_tablet="3" cols_mobile="2" hide_empty="true" limit="0" show_count="true"]
 * Put this in a snippet plugin (Code Snippets, WPCode, etc.) and activate.
 */

add_shortcode( 'wc_brands_grid_styled', function( $atts ) {
	// attributes
	$atts = shortcode_atts( array(
		'cols'         => 6,
		'cols_tablet'  => 3,
		'cols_mobile'  => 2,
		'hide_empty'   => 'true',
		'limit'        => 0,
		'show_count'   => 'true',
		'image_size'   => 'large', // adjust if you want medium
	), $atts, 'wc_brands_grid_styled' );

	$args = array(
		'taxonomy'   => 'product_brand',
		'hide_empty' => filter_var( $atts['hide_empty'], FILTER_VALIDATE_BOOLEAN ),
	);

	if ( intval( $atts['limit'] ) > 0 ) {
		$args['number'] = intval( $atts['limit'] );
	}

	$terms = get_terms( $args );
	if ( is_wp_error( $terms ) || empty( $terms ) ) {
		return '<div class="wc-brands-grid-styled wc-brands-grid--empty">No brands found.</div>';
	}

	// Output CSS only once per page
	static $printed_css = false;
	ob_start();
	if ( ! $printed_css ) {
		$printed_css = true;
		?>
		<style>
		.wc-brands-grid-styled {
		  margin: 0;
		  padding: 0;
		  display: grid;
		  gap: 28px;
		  align-items: start;
		}
		/* column classes applied to wrapper */
		.wc-brands-grid-styled--cols-1 { grid-template-columns: repeat(1, 1fr); }
		.wc-brands-grid-styled--cols-2 { grid-template-columns: repeat(2, 1fr); }
		.wc-brands-grid-styled--cols-3 { grid-template-columns: repeat(3, 1fr); }
		.wc-brands-grid-styled--cols-4 { grid-template-columns: repeat(4, 1fr); }
		.wc-brands-grid-styled--cols-5 { grid-template-columns: repeat(5, 1fr); }
		.wc-brands-grid-styled--cols-6 { grid-template-columns: repeat(6, 1fr); }

		.brand-card {
		  position: relative;
		  overflow: hidden;
		  background: #fff;
		  border-radius: 4px;
		  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, .1)!important;
		  transition: transform .22s ease, box-shadow .22s ease;
		  display:block;
		  color: inherit;
		  text-decoration: none;
		}
		.brand-card:hover {
		  transform: translateY(-8px);
		  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
		}

		.brand-card__media {
		  width: 100%;
		  height: auto; 
 		  display: block; 
		}
		.brand-card__media img {
		  width: 100%;
		  height: auto;
		  object-fit: cover; 
		  display: block;
		}

		.brand-card__label {
		  position: relative;
		  background: #f2f0f0;
		  padding: 10px 20px;
		  min-width: 100%;
		  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
		  text-align: center;
		  border-radius: 2px;
		  margin-top:-50px;
		  display: block;
		}
		.brand-card__title {
		  display:block;
		  font-weight: 800;
		  letter-spacing: 0.6px;
		  text-transform: uppercase;
		  font-size: 14px;
		  color: #111111;
		}
		.brand-card__count {
		  display:block;
		  font-size: 12px;
		  color: #8a8a8a;
		  margin-top: 6px;
		  font-weight: 600;
		}

		/* responsive */
		@media (max-width: 1024px) {
		  .brand-card__media { height: 260px; }
		}
		@media (max-width: 767px) {
		  .brand-card__media { height: 200px; }
		}
		</style>
		<?php
	} // end printed css

	// wrapper classes based on columns
	$cols = max(1, intval( $atts['cols'] ));
	$cols_tablet = max(1, intval( $atts['cols_tablet'] ));
	$cols_mobile = max(1, intval( $atts['cols_mobile'] ));

	$wrapper_classes = sprintf(
		'wc-brands-grid-styled wc-brands-grid-styled--cols-%d wc-brands-grid-styled--cols-tablet-%d wc-brands-grid-styled--cols-mobile-%d',
		$cols, $cols_tablet, $cols_mobile
	);

	// Inline responsive helper: produce media rules to switch template columns for tablet/mobile
	// We'll output a small inline style block scoped to this wrapper id so columns respond
	$unique_id = 'wc-brands-grid-styled-' . wp_generate_password( 6, false, false );
	?>
	<div id="<?php echo esc_attr( $unique_id ); ?>" class="<?php echo esc_attr( $wrapper_classes ); ?>">
	<?php foreach ( $terms as $term ) :
		// get thumbnail id (WooCommerce core uses 'thumbnail_id')
		$thumb_id = get_term_meta( $term->term_id, 'thumbnail_id', true );
		if ( empty( $thumb_id ) ) {
			// try common alternate meta keys
			$thumb_id = get_term_meta( $term->term_id, 'brand_image', true );
		}

		// fallback markup for image
		$img_html = '';
		if ( $thumb_id ) {
			$img_html = wp_get_attachment_image( intval( $thumb_id ), $atts['image_size'], false, array( 'alt' => $term->name ) );
		} else {
			$img_html  = '<div style="width:120px;height:120px;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;color:#777;">';
			$img_html .= '</div>';
		}

		$term_link = get_term_link( $term );
		$show_count = filter_var( $atts['show_count'], FILTER_VALIDATE_BOOLEAN );
		$count_text = $show_count ? sprintf( _n( '%d product', '%d products', intval( $term->count ), 'wc-brands' ), intval( $term->count ) ) : '';
		?>
		<a class="brand-card" href="<?php echo esc_url( $term_link ); ?>">
			<div class="brand-card__media">
				<?php echo $img_html; ?>
			</div>
			<span class="brand-card__label" aria-hidden="false">
				<span class="brand-card__title"><?php echo esc_html( $term->name ); ?></span>
				<?php if ( $show_count ) : ?>
					<span class="brand-card__count"><?php echo esc_html( $count_text ); ?></span>
				<?php endif; ?>
			</span>
		</a>
	<?php endforeach; ?>
	</div>

	<style>
	/* responsive grid columns for this wrapper only */
	#<?php echo esc_attr( $unique_id ); ?>.wc-brands-grid-styled--cols-<?php echo $cols; ?> { grid-template-columns: repeat(<?php echo $cols; ?>, 1fr); }
	@media (max-width: 1024px) {
		#<?php echo esc_attr( $unique_id ); ?>.wc-brands-grid-styled--cols-tablet-<?php echo $cols_tablet; ?> { grid-template-columns: repeat(<?php echo $cols_tablet; ?>, 1fr) !important; }
	}
	@media (max-width: 767px) {
		#<?php echo esc_attr( $unique_id ); ?>.wc-brands-grid-styled--cols-mobile-<?php echo $cols_mobile; ?> { grid-template-columns: repeat(<?php echo $cols_mobile; ?>, 1fr) !important; }
	}
	</style>

	<?php
	return ob_get_clean();
} );