Максим Тимофеев

можно сверстать поигравшись с border-radius:
shpargalkablog.ru/2017/08/semicircle.html

подгрузка происходит в клиенте, html формируется на сервере. Никакой связи. У Вас долго грузится по 2 причинам:
1. это wp, он не летает
2. много картинок, каждая - это отдельный запрос на сервер.
Что делать: ну про wp промолчу, в остальном нужно оптимизировать размер картинок, если пагинации нет и там товар кучей. то сделать асинхронную подгрузку. Грузить все нофото, а потом в js загружать фотки вместо заглушки. Например:

<img src="/image/nophoto.png" data-img="/image/product/some_photo.jpg">

Соответственно дожидаемся загрузки страницы, и постепенно заменяем src на data-img. Если пойти дальше и делать оптимизацию под разные размеры дисплея, то есть замечательный тег:

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Но можно и первым методом этого добиться. Если в data-img хранить просто имя картинки или даже id товара и формировать url к нужному размеру в js.

если Вы уже указали 'data-toggle' => 'modal', то зачем еще раз клик обрабатываете. Она же дважды срабатывает. Возможно в этом и проблема.

Все упирается во время и качество. Плюс не стоит забывать, что если человек использует framework, это не значит, что он не использует свои наработки на нем. Например, можно 1 раз написать админку для сайта визитки на yii например и потом использовать. Что будет в разы быстрее работать, чем монстр типа WP. Ну и разрабатывать удобнее неимоверно.
писал статью на тему cms vs framework