Show a list of taxonomies using a Code Block

categories.css

.category-post-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.category-post {
  width: 33.33%;
}

.category-post-padding {
  margin: 1em;
  overflow: hidden;
  position: relative;
}

.category-post-image {
  transition: 0.5s ease-in-out all;
  position: relative;
  background-color: grey;
  background-image: repeating-linear-gradient( 
    45deg
    ,#eee,#eee 10px,#ddd 10px,#ddd 20px);
  width: 100%;
}

.category-post-image-fixed-ratio {
  padding-bottom: 52%;
  background-size: cover;
  background-position: center center;
}

.category-post-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(0,0,0,0.5);
  text-align: center;
  transition: 0.5s ease-in-out all;
  -webkit-font-smoothing: antialiased;
}

.category-post-title {
  font-size: 2em;
  color: white;
  line-height: 1.2em;
  font-weight: normal;  
}

.category-post:hover .category-post-image {
  transform: scale(1.2);
}

@media (max-width: 1120px) {
  .category-post {
    width: 50% !important;
  }
}

@media (max-width: 768px) {
  .category-post {
    width: 100% !important;
  }
}

categories.php

<?php

$terms = get_terms(['taxonomy' => 'product_cat','hide_empty' => true]);

if ($terms) { ?>

<div class="category-post-container">
  
  <?php

foreach ($terms as $term) {
  //var_dump($term);
  
	// GET IMAGE  
    // get the thumbnail id
    $thumbnail_id = get_woocommerce_term_meta( $term->term_id, 'thumbnail_id', true ); 

    // get the image URL
    $image = wp_get_attachment_url( $thumbnail_id ); 
    $srcset = wp_get_attachment_image_srcset( $thumbnail_id, array( 300, 300 ) );
    
  	if (empty ($image)) {
      $image = '/wp-content/uploads/woocommerce-placeholder-300x300.png';
    }
  
  	// GET NAME
  	$cat_name = $term->name;
  
  	// GET URL
    $cat_url = get_term_link( $term->term_id, 'product_cat' );
  
  ?>

  <a class="category-post" href="<?php echo $cat_url; ?>">
    <div class="category-post-padding">
      <div class="category-post-image">
        <div class="category-post-image-fixed-ratio" style="background-image: url(<?php echo $image; ?>);">
        </div>
      </div>
      <div class="category-post-overlay">
        <h2 class="category-post-title">
          <?php echo $cat_name; ?>	
        </h2>
      </div>
    </div>
  </a>

<?php
  
}

?>
  

</div>

<?php
  
}

?>