Выводишь все карточки на php, но в style корневого div-а каждой ставишь им display:none, а скриптом на js в зависимости от фильтра пробегаешь по всем корневым div-ам каждой карточки и включаешь их отображение display:inline (тогда карточки будут располагаться друг за другом), можешь использовать display:block тогда один над другим будет (там еще от float зависит)
Работа с элементами на javascript зависит от выбранного фреймворка, например в jquery ты можешь написать $('.имя_класса').
each(function(){...}), а чтобы удобнее было фильтровать, заранее на php добавь каждому корневому тегу атрибуты со значениями по которым будешь проводить фильтрацию, например атрибут category а значения Шведский стол, другой атрибут curency а значения usd/rub/... тогда выбирая в фильтре значения в функции erach просто проверяешь сравниваешь значения атрибутов с выбранными на форме и соответственно включаешь и выключаешь их.
Этот подход наиболее простой, для тех кто большую работу по формированию страницы делает на php но хочет внести в логику страницы больше динамики на основе javascript. Недостаток - клиент получает вне зависимости от выбранного фильтра полный список карточек, и если их много, лучше реализовать другой способ...
Если формировать карточки на javascript, размер данных, передаваемых с сервера будет в несколько раз меньше, так как описание карточки занимает значительно меньше места в сетевом трафике чем готовых html (с оговорками, если включено сжатие страницы на сервере, то разница в размерах будет уже не такой значимой)