Category_Shortcode

Function.php(using a rare case this code)

[ rest case use "CPT Widget plugin"]

 function product_categories( $atts )
{
ob_start();
$terms = get_terms(
array(
'taxonomy' => 'products_category',
'hide_empty' => false,
)
);
echo '<div class="product-category-wrapper">';
foreach ($terms as $term) {
$term_link = get_term_link( $term, 'products_category' );
echo '<div class="product-cat-box">
<a href="' . $term_link . '">
<figure>
<img src="'.get_field('category_image',$term).'" />
</figure>
<h3>' . $term->name . '</h3>
</a>
<a href="' . $term_link . '" class="btn-products">View Products</a>
</div>';
}
echo '</div>';
return ob_get_clean();
}
add_shortcode( 'product_categories', 'product_categories' );

CSS

.product-category-wrapper{
display: flex;
flex-wrap: wrap;
}
.product-category-wrapper .product-cat-box{
width: 30%;
margin-right: 5%;
margin-bottom: 40px;
text-align: center;
}
.product-category-wrapper .product-cat-box:nth-of-type(3n + 3){
margin-right: 0;
}
.product-category-wrapper .product-cat-box figure{
margin-bottom: 25px !important;
}
.product-category-wrapper .product-cat-box h3{
  font-family: "Playfair Display", Sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2em;
  color: #000;
  margin-bottom: 15px;
}
.btn-products{
display: inline-block;
font-family: "Work Sans", Sans-serif;
font-size: 16px;
font-weight: 500;
color: #939393;
border-bottom: 2px solid #FF0000;
padding-bottom: 4px;
transition: all 0.4s;
}
.btn-products:hover{
color: #555;
}
.product-sidebar-category h5{
display: none !important;
}
.product-sidebar-category ul{
padding: 0;
margin: 0;
list-style: none;
}
.product-sidebar-category ul li {
margin-bottom: 4px;
}
.product-sidebar-category ul li a{
display: block;
color: #202020;
font-size: 16px;
font-family: "Work Sans", Sans-serif;
border-radius: 7px;
padding: 8px 14px;
transition: all 0.4s;
}
.product-sidebar-category ul li a:hover,
.product-sidebar-category ul li.current-cat a{
background: #FFFFFF;
box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.03);
}
.take-tour-section .elementor-background-overlay{
opacity: 0 !important;
}