Electro Brands List Pages

function.php

if ( ! function_exists( 'electro_brands_list_element' ) ) :
	function electro_brands_list_element( $atts, $content = null ){
		extract(shortcode_atts(array(
			'has_no_products'	=> false,
			'orderby' 			=> 'title',
			'order' 			=> 'asc',
		), $atts));
		
		$taxonomy_args = array(
			'orderby'		=> $orderby,
			'order'			=> $order,
			'hide_empty'	=> $has_no_products
		);

		$html = '';

		$brand_taxonomy = electro_get_brands_taxonomy();

		if( ! empty( $brand_taxonomy ) ) {
				$terms = get_terms( $brand_taxonomy, $taxonomy_args );
				
				if( ! is_wp_error( $terms ) && !empty( $terms ) ) {
					?>
					<section class="brands-list">
						<h2 class="sr-only"><?php echo esc_html__( 'Brands Carousel', 'electro' ); ?></h2>
						<div class="items row">
						
							<?php foreach ( $terms as $term ) :	?>
							
							<div class="item col-sm-3">

								<a href="<?php echo esc_url( get_term_link( $term ) ); ?>">
								<figure>
									
									<?php 
										$thumbnail_id 	  = get_woocommerce_term_meta( $term->term_id, 'thumbnail_id', true );
										$image_attributes = '';
										if ( $thumbnail_id ) {
											
											$image_attributes = wp_get_attachment_image_src( $thumbnail_id, 'full' );
											
											if( $image_attributes ) {
												$image_src    = $image_attributes[0];
												$image_width  = $image_attributes[1];
												$image_height = $image_attributes[2];
											}
										} 
										
										if ( empty( $image_attributes ) ) {
											
											$dimensions   = wc_get_image_size( 'shop_thumbnail' );
											$image_src    = wc_placeholder_img_src();
											$image_width  = $dimensions['width'];
											$image_height = $dimensions['height'];
										}
										$image_src = str_replace( ' ', '%20', $image_src ); 
									?>
									<img src="<?php echo esc_url( $image_src ); ?>" alt="<?php echo esc_attr( $term->name ); ?>" width="<?php echo esc_attr( $image_width ); ?>" height="<?php echo esc_attr( $image_height ); ?>" class="<?php echo esc_attr( $img_classes ); ?>">

									<figcaption class="text-overlay">
										<div class="info">
											<h4  class="brand-title"><?php echo esc_html( $term->name ); ?></h4>
										</div><!-- /.info -->
									</figcaption>

								</figure>
								</a>
							</div><!-- /.item -->

							<?php endforeach; ?>
							
						</div><!-- /.owl-carousel -->
					</section>
					<?php 
				}
			}

		//
	    return $html;
	}
	add_shortcode( 'electro_brands_list' , 'electro_brands_list_element' );
endif;

style.css

.brands-list .brand-title {
    font-size: .8rem;
}
.brands-list figcaption {
   background-color: red; 
   padding: 10px;
   text-align: center
}
.brands-list figure {
    border:1px solid #000000;
}
 .brands-list img {
      margin:auto;
}