Для отображения различных вариантов товаров на странице товара и добавления их в корзину при клике на вариацию, можно использовать функционал переменных продуктов в плагине WooCommerce на WordPress.
Для начала необходимо создать переменные продукты, указать их название, цену и другие характеристики. Затем на странице товара можно использовать шорткод [product_page] для отображения всех вариаций товара с названием и ценой в списке. После этого можно добавить кнопку "Добавить в корзину" рядом с каждой вариацией, чтобы позволить пользователям выбирать нужный им вариант и добавлять его в корзину.
Другой вариант - использовать плагин "WooCommerce Product Variations Swatches". Он позволяет отображать все вариации товара в виде цветов, изображений или других визуальных элементов, делая выбор нужного варианта более удобным для пользователей.
Таким образом, с помощью переменных продуктов в WooCommerce и соответствующих плагинов можно легко реализовать отображение различных вариантов товаров на странице товара и добавление их в корзину при клике на нужный вариант.