Как подстроить список товаров под стили?

Доброго времени суток, форумчане. Возник вопрос: имеется список товаров, изображенный на скриншоте:
скриншот списка товаров
И он имеет следующий код:

<div class="items">
			<div class="container">
				<div class="row d-flex justify-content-around">
					<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 item">
						<div class="row d-block">
							<div class="offset-2 col cap-card">МОПС</div>
							<div class="col"><img src="<?php bloginfo('template_directory') ?>/img/1card.png"></div>
						</div>
							<div class="col">
								<div class="row d-flex bottom-card no-gutters">
									<div class="col-6 col-lg-5 col-xl-6"></div>
									<div class="col-6 col-lg-7 col-xl-6 buy-card"><a href="#">КУПИТЬ<i class="fas fa-fire"></i></a></div>
								</div>
							</div>
					</div>
					<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 item">
						<div class="row d-block">
							<div class="offset-2 col cap-card">СПАНЧ-БОБ 
							</div>
							<div class="col"><img src="<?php bloginfo('template_directory') ?>/img/2card.png"></div>
						</div>
							<div class="col">
								<div class="row d-flex bottom-card no-gutters">
									<div class="col-6 col-lg-5 col-xl-6"></div>
									<div class="col-6 col-lg-7 col-xl-6 buy-card"><a href="#">КУПИТЬ<i class="fas fa-fire"></i></a></div>
								</div>
							</div>
					</div>
//и так далее

Хотелось бы узнать, как можно подключить добавление товаров через админ панель, в частности woocommerce, чтоб они отображались в данном списке товаров с соответственными стилями. Можно ли добавить код по типу «<?php bloginfo(‘template_directory’) ?>», чтоб автоматически добавлялся товар в список, с соответствующей верхней подписью и картинкой, при добавлении товара через woocommerce?