DooX

Тут все от вас зависит. Или плагин используете.
Или если знаете jq или js то у wp или wc есть endpoint для ajax запроса. И тогда все можно сделать.

Врятли, так как размер экрана сервер должен получить от клиента.
а это динамическая история.
В твоём случае не делал бы геморой, а выводил бы на экран товары через допустим ajax запрос.
И в случае после загрузки документа js получает ширину экрана и взависимости от ширины отправляет ajax, который аргументом говорит сколько вернуть товаров. ну и все

ну или сказал бы дизайнеру пусть сам мучается дальше так.

ну во первых!
все что обведено это input
который имеет тип числовой
чтоб можно было вводить ручками числа

если вы хотите чтоб посетитель мог использовать стрелки вверх и вниз то присмотритесь в сторону
атрибута step="any"
в нем вы число шага указываем. если указать 0.1 то при клике вверх он будет плюсовать к числу 0.1
далее по аналогии.
потом нужно установить плагин для вуу который меняет тип этого поля
или ручками проследить если где фильтр который значение с этого поля меняет на int даже если стоит float и данный код поменять

Без перезагрузки это значит ajax ну или rest api wp юзать.
а так смотрите ссылку

В этом плагине есть специальный шорткод котрый отправляет пюна почту с какой страницы была заполнена форма. Читайте документацию. Там много чего.