Максим Щирба

Как: через жопу.
С помощью чего: с помощью React.

Сделано на React, а подгружаются они с API, которое выдаёт данные (к примеру json), после чего клиент просто их отображает.

вот гайд - https://opttour.ru/plugins/razbiraem-woocommerce-n...

скопируйте шаблон из папки wp-content/plugins/woocommerce/templates в папку "ваша-тема/woocomerce/content-single-product.php"

content-single-product.php отвечает за карточку товара. Внутри вы обнаружите разметку и хуки. Его можно переписать на свой лад. Все что вам остается это ознакомиться с хуками и подключать их в свою разметку.

стилизация подтягивается с get_header () так что вы можете создавать даже новую разметку

Установи например phpstorm и там сразу ошибка покажется. В твоем случае, ты экранировал кавычку \"

Может так? https://codesandbox.io/s/static-ud0m5