Карточка товара

Урок 2

  Получите бесплатный доступ к первому уроку курса, для этого зарегистрируйтесь или войдите.

Урок 2

Настройка отображения товара на страницах Каталога / Архивах

В этом уроке мы настроим (а точнее натянем вёрстку на код) для карточек товаров. Если конкретнее – то для карточек товаров, отображаемых на страницах каталога и архивах (категории, теги, поиск и т д).

В итоге они будут выглядеть точно так же, как и в нашей исходной вёрстке:

отображение товара на странице каталога WooCommerce
При наведении на товар появляется кнопка добавления в корзину.

Мы сделаем:

  • Динамическое отображение цены, например если товар на распродаже, или это – вариативный товар.
  • Динамическое отображение кнопки «Добавить в корзину», ведь к примеру нам не нужно её отображать для товаров, которых нет в наличии.
  • Покажу вам как настраивать изображение-миниатюру для WooCommerce (размер woocommerce-thumbnail)
  • Полностью запрограммируем плашку: «Новинка» / «Распродажа» / «Хит продаж».
  • Настроим корректное отображение товаров по сетке.


Методы класса WC_Product очень хорошо описаны в официальной документации WooCommerce.

Купить курс
5400 ₽
  • 12 видеоуроков
  • Доступ к HTML + CSS курса
  • Доступ к теме WooCommerce, которая получится в результате
  • Уроки регулярно обновляются в соответствии с изменениями WooCommerce
Ваш email будет использоваться только для регистрации на сайте. На него придёт письмо с логином и паролем. Войдите, если уже зарегистрированы.