Добро пожаловать на восемнадцатый урок. Сегодня поговорим про WooCommerce и создание интернет-магазина.

WooCommerce — это популярный плагин для WordPress, который превращает ваш сайт в полноценный интернет-магазин. Он предлагает множество функций для управления продажами, а также бесплатен для использования.

С помощью WooCommerce вы можете создать каталог товаров, обрабатывать заказы, управлять запасами и настраивать способы оплаты и доставки. Этот плагин также очень гибкий и масштабируемый, что позволяет вам начать с простого одностраничного магазина и постепенно расширять его функционал по мере роста вашего бизнеса. Кроме того, WooCommerce поддерживает множество расширений, благодаря чему вы можете адаптировать свой магазин под конкретные нужды и требования.

Ещё одна важная особенность этого плагина — его открытость и доступность. Он полностью бесплатен и не имеет ограничений по настройке, что делает его идеальным выбором для малого бизнеса и стартапов, которые хотят быстро и недорого запустить свой онлайн-магазин.

Давайте зайдём в консоль WordPress, «Плагины». И добавим плагин WooCommerce. Woo-com-mer-ce.

Вот он так выглядит. Давайте установим его. Происходит установка. И теперь активируем.

После активации мы попадаем на страницу «Настройки плагина». Тут вам предложат пройти небольшую регистрацию. Уберём сразу галочку и нажмём «Настроить магазин». Тут предлагают ответить: «Для чего использовать?» Можно пропустить этот шаг. Давайте нажмём «Я настраиваю магазин для клиента». Это нужно для самого WooCommerce — он собирает данные.

Давайте нажмём «Продолжить». Здесь просят рассказать о магазине. «Дать название своему магазину». Давайте оставим. Подсказки пишут, что вы всегда можете изменить этот ответ позже. Можно выбрать отрасль. Можно, наверное, оставить пустую, но давайте выберем «Еда и напитки».

В зависимости от выбора отраслей будет настраиваться функционал WooCommerce. Так как у нас макет как раз на тему еды, то мы так и оставим. Теперь надо обязательно выбрать регион. Давайте выберем «Россия».

Электронную почту поставим любую. Или совсем ее уберем. «Продолжить». В этом поле мы отключаем все галочки, они нам не понадобятся. Продолжаем. И после этого у нас предварительная загрузка завершена, установка завершена.

На самом деле все эти настройки нужны для менеджера магазина. Нам как разработчикам в принципе это ничего не нужно. В панели слева у нас появилась новая вкладка WooCommerce: «Товары», «Аналитика» и «Маркетинг». Кроме товаров, нас в принципе ничего больше не интересует, но для начала давайте зайдем в Elementor, в «Настройки». И здесь в поле появилась новая вкладка — «Товары». Иногда здесь галочка стоит, иногда не стоит. Её ставим, сохраняем изменения.

Также WooCommerce установил несколько страниц. Давайте зайдем. Это «Корзина», «Магазин», «Мой аккаунт», «Оформление заказа» и «Политика возврата». Теперь посмотрим на «Товары». Она очень похожа на «Записи».

Теперь вместо рубрик будут категории. Давайте нажмём сюда — «Категории». И у нас здесь уже по умолчанию будет стоять категория Misc. Это то же самое, что рубрика в рубриках «Без рубрики».

Вернёмся в категории. Эту рубрику, эту категорию удалить нельзя. Она автоматически присваивается товарам без категории. Давайте посмотрим теперь на наш макет. У нас есть несколько категорий товаров. Это «Фрукты», «Овощи», «Консервация» и «Грибы». Давайте создадим категории этих товаров.

«Фрукты». По аналогии с рубриками также можно не добавлять ярлык. И также можно ничего не добавлять далее. Нажимаем на «Добавить категорию». Она у нас появилась. Теперь давайте создадим «Овощи».

Добавим категорию «Овощи». «Консервация» и «Грибы». Теперь создадим товары. Давайте нажмём «Товары» или «Все товары».

Будем создавать товары с нуля, так что нажимаем «Создать товар». Нам сразу предлагают ввести название товара. Вот появляется подсказка. Давайте. Это тоже очень похоже на «Записи» Только там шёл заголовок записи, а здесь — название товара.

Давайте выберем название какого-нибудь товара. Самый первый — этот: мини-дыня. Скопируем. Вставим. Далее можно действовать по подсказкам или можно их отключить. И я покажу уже вживую, как это будет.

Давайте возьмём какое-нибудь описание товара. Вот, например, это. Скопируем, добавим описание товара. Потом нам надо задать изображение товара. Давайте выберем. Для дыни у нас вот это изображение.

В атрибуте Alt обязательно пишем описание. Для примера давайте возьмём название, но я рекомендую писать что-то осмысленное. Давайте зададим изображение. Поставим цену. Так, сколько у нас… 225 рублей. Вот и напишем — 225.

Метки товаров — не будем. А вот в категории товаров мы поставим «Фрукты». В краткое описание тоже что-нибудь добавим. Например, вот этот текст — «Пищевая ценность».

После того как мы установили название товара, описание товара, изображение, цену, краткое описание и после того как добавили категорию, можно опубликовать.

Теперь можно посмотреть товар. Давайте откроем в новой вкладке. Вот так он будет выглядеть по умолчанию. Давайте вернёмся во «Все товары». И вот у нас первый товар добавился: «Мини-дыня «Ананас Американо», цена и категория «Фрукты».

Давайте добавим ещё несколько товаров. Для этого можно нажать «Дублировать» или «Добавить». Давайте продублируем. Поменяем название. Например, на «Слива «Евразия», поменяем цену — 450 рублей. И поменяем изображение.

Также атрибут Alt не забываем прописывать. Категорию товаров «Фрукты» — оставляем. Это краткое описание товара и описание товара. Оставляем. Нажимаем «Опубликовать», и вот: у нас теперь уже два товара.

Вот я добавил товары. Цена, название, категории: «Грибы», «Консервация», «Овощи», «Фрукты» — все, какие были товары у нас.

После этого можно зайти в Elementor — «Шаблоны» — «Конструктор тем». В левой части у нас появились новые шаблоны. Это «Страница товаров» и «Архив товаров». Давайте добавим страницу товара. Вот у нас опять библиотека подтягивается. Она мне не нужна. С левой стороны у нас опять появились новые виджеты. Это «Добавить в корзину», «Цена товара», «Название товара» и т. д. Также появились виджеты WooCommerce: «Товары», «Страницы товаров».

Давайте сверимся с макетом и сделаем такую же страницу товара. Создадим двухколоночную структуру. Сразу же зададим отступы снаружи — примерно по 90 пикселей сверху и снизу.

Также давайте зададим макету отступы. Давайте на глаз — 40 пикселей. И теперь добавим изображение товара. По аналогии с «Записями» у нас подтягивается последнее изображение последней записи последнего товара.

Точно так же давайте стилизуем. Поставим, например, скругление углов 15 пикселей. Сейчас покажу, для чего нужны эскизы и отступы. Например, у нас есть галерея товаров. Это мини-картинки. Давайте для примера выберем несколько. Добавим в галерею. Обновим. Здесь тоже обновим.

И вот: у нас появились миниатюры такие, эскизы. Можно между ними делать отступы. Отступ от миниатюр также стилизуется, но так как у нас их нет, давайте удалим. Обновим. И здесь, в редакторе, тоже обновим страницу.

Также можно использовать, например, простой виджет изображения. Добавим изображение и используем динамический тег. Сопутствующее изображение также будет подтягиваться. Давайте уберём сопутствующее изображение.

И теперь давайте добавим название товара. Оно также будет подтягиваться. Тэг сразу поменяем. Теперь мы добавим описание товара. Оно также стилизуется. Графит. Размер текста на глаз сделаем 20 примерно. Давайте средний. Конечно, правильно забрать это всё отсюда или отсюда, но я сделаю на глаз, чтобы долго не мучиться.

Так, давайте теперь возьмём «Краткое описание». Также зададим цвет. Зададим типографику: «Текст».

Также есть кнопка «Добавить в корзину». Также есть кнопка ещё одна, от WooCommerce. Кнопка так же называется — «Добавить в корзину». Функционал у них одинаковый, что эта добавляет в корзину, что эта добавляет в корзину. Давайте количество скроем.

Но обычно я использую вот эту кнопку в «Товаре» — «Добавить в корзину». Также ее стилизую. Делаем типографику «Акцент», скругление углов — 10 пикселей давайте добавим. Цвет текста белый, цвет фона — рыжий, добавим отступы какие-нибудь сверху, снизу, например по 12.

Давайте здесь по 40 поставим и посмотрим, чем они отличаются, эти кнопки. Функционал у них в принципе одинаковый. Предпросмотр. Так, картинка почему-то не подгрузилась. Ладно. Нажимая на корзину, мы попадаем…

Вернёмся. Нажимаем «Добавить в корзину». На этой кнопке у нас, получается, появляется такая дополнительная как бы ссылка на просмотр корзины. Вернёмся в редактор. Как я говорил, обычно я использую вот эту кнопку. Эту можно удалить. Так, давайте здесь, в макете, сделаем по центру.

Давайте дальше сверимся с макетом. У нас здесь есть секция «Похожие товары». Давайте зададим структуру. Сразу же ей можно дополнительные опции добавить. Тег section. В стилях сделаем графит и в расширенных — отступы внутри мы сделаем сверху и снизу. Давайте по 120 пикселей.

Добавим заголовок, в стилях зададим цвет белый. И сделаем заголовок «Похожие товары». И теперь по аналогии с записями мы можем добавить виджет Loop Grid, чтобы создать вот такие карточки. Только в макете мы сделаем не «Записи», а «Товары».

Также давайте сделаем запрос. В запросах поставим «Похожие товары» и теперь сделаем структуру. Сохраняем. Также можно создать структуру. Сделаем и добавим сопутствующее изображение. Поставим полный — Full.

Далее у нас идёт название товара. Тег сразу поставим H3. Цвет — белый, и поменяем размер, чтобы не такой большой был. Так, давайте лучше сверимся. Сколько у нас? 30 пикселей. Font size — 30 пикселей. Давайте так и сделаем: 30 пикселей.

Далее у нас идёт цена товара. Поменяем ей цвет, типографику. Давайте сделаем «Акцент», немножко изменим, например здесь 16, так оставим, Letter Spacing 0.

Я не заметил, что у нас есть копейки, давайте их уберём, так как у нас в макете их нет, только рубли. Для этого давайте перейдём в WooCommerce, «Настройки», и здесь, в основных настройках, есть число дробных знаков. Давайте поставим 0.

«Сохранить изменения». Всё остальное не будем трогать. Российский рубль справа с пробелом. И давайте вернёмся в редактор. После того как мы обновим и сохраним страницу, у нас эти нули исчезнут. Далее у нас идут две кнопки: «В корзину» и «Подробнее». Давайте поставим их. Для этого мы к макету добавим контейнер и в контейнер уже добавим кнопки.

Добавим кнопку «Добавить в корзину». Количество мы сразу уберём и добавим кнопку, обычную кнопку. Только к её динамическому тегу мы приставим URL-записи.

Так, у контейнера давайте поменяем расположение на горизонтальное. Кнопки поменяем местами и будем делать в соответствии с макетом. Текст: «Подробнее». И стилизуем типографику. «Акцент» поставим. Цвет текста — белый. Цвет фона оставляем.

Скругление углов —10 пикселей. Отступы внутри — пока ничего не будем делать. Сделаем выравнивание по ширине. Цвет сделаем прозрачный.

Тип границы — добавим сплошную, толщину в один пиксель и цвет рыжий. Сделаем при наведении, например, чтобы цвет текста был также белый. Тип фона мы сделаем рыжий. И теперь при наведении у нас будет меняться кнопка.

Аналогично давайте сделаем эту кнопку. Также сделаем «По ширине», скругление углов 10 пикселей, типографику мы поставим «Акцент», отступы внутри — давайте сделаем по 12 сверху и снизу. Цвет текста — белый, цвет фона — рыжий.

Давайте пройдём в «Расширенные», сделаем кнопку во всю ширину. Эту кнопку аналогично сделаем во всю ширину, ещё немножко стилизуем, добавим отступы. Сверху и снизу добавим по 12, и теперь можно этой кнопке тоже добавить.

Давайте при наведении цвет текста сделаем графит, а цвет фона сделаем белый. И у нас вот всё корректно отображается. Можно обновить и сохранить, и выйти.

Теперь давайте перейдём к виджету. Настроим его. Добавим, чтобы у нас было три Items Per Page. Включим вот эту галочку. Проверим опять запрос «Похожие товары», у нас включено. И теперь можно эту страницу опубликовать. Нажимаем «Опубликовать». Добавляем условие, и у нас сразу же включается «Товары». Давайте так и сделаем.

Теперь наш шаблон будет подтягиваться ко всем товарам, неважно, какой категории. Давайте откроем редактор, посмотрим действующий сайт. И вот у нас здесь добавились кнопки «В корзину» и «Подробнее». Давайте нажмём. Например, вешенки посмотрим. И вот у нас появились вешенки и шампиньоны. Также обратно к лисичкам можно вернуться.

Вернёмся в редактор и вернёмся в конструктор. Вот у нас шаблоны, опять же, с непонятным названием. Давайте их переименуем. «Переименовать». И, например, давайте сделаем «Страница товара».

Изменим. Вернёмся ко всем частям. Карточки так и сделаем, карточки товаров назовём «Карточки товаров». «Изменить». И давайте посмотрим на товары. Например, вот этот — лисички. Давайте нажмём «Перейти».

Даже не так… Давайте какой-нибудь другой. Давайте возьмём лук репчатый. Перейдём. И вот у нас лук подтягивается, подтягивается заголовок. И похожие товары можем посмотреть. Давайте. Морковь. Ещё вот огурцы.

Всё работает корректно. Теперь можно создать архив товаров. Создадим. Опять закрываем библиотеку. И по аналогии с прошлым уроком добавим структуру и стиль. Например, фон зададим графит, в «Расширенных» — отступы внутри мы сделаем тоже, наверное, по 90 сверху и снизу. И по аналогии с прошлым уроком добавим заголовок архива. Это будет как заголовок архива записей.

Добавляем. Так, в стиле сразу поменяем цвет: сливается. И точно так же уберём вот эту галочку, у нас будет просто магазин. Давайте добавим еще виджет — наш Loop Grid. Добавим ему «Товары» и отсюда выберем «карточка товаров (Шаблон)».

Так, он подтягивает последние наши карточки товаров. Если мы хотим сделать для всего магазина, давайте в запросе поставим «Последние товары», «Порядок» давайте сделаем по возрастанию. Здесь галочку поставим. Надо немножко здесь поправить. Сохраним, а то у нас, видите, всё вразнобой побежало. Для цен товаров, вспоминая предыдущие уроки, мы поставим здесь Grow. Обновим, сохраним и выйдем. Так, загрузилось.

Давайте здесь, в настройках, ещё в стилях добавим. Например, Gap between columns 40. Чтобы побольше было расстояние. И тут тоже 40 добавим, чтобы больше расстояние было. Выглядит замечательно.

Теперь я хочу сделать, чтобы выводились все товары. Можно добавить нумерацию страниц, добавить, например, номер и «Предыдущая плюс следующая». И давайте ещё включим индивидуальную пагинацию. Теперь можно это стилизовать. Перейдем к стилю. Нумерация страниц. Сделаем отступ побольше. Давайте типографику поставим. «Акцент» сделаем. Цвет сделаем белый, например, а при наведении и «Активный» сделаем рыжий. И вот: у нас всё аккуратненько.

Давайте сделаем предпросмотр. У нас отображается весь магазин. И теперь можно переключаться между товарами.

Вот вышло — овощи. Следующая страница у нас будет, наверное, «Консервация». А следующая будет, наверное,«Грибы».

Вернёмся на первую страницу. Также можно, например, разбить.

Можно отсортировать, например, в случайном порядке. И у нас будут вот так каждый раз выводиться разные товары. Давайте теперь опубликуем страницу. Нажимаем «Опубликовать». «Все архивы товаров». «Сохранить и закрыть».

Теперь можно выйти в «Конструктор тем», в наш архив товаров. Давайте опять также переименуем, например, сделаем «Все товары». «Переименовать». «Все товары». Или можно в «Магазин», как удобнее. Изменим. Аналогично делается для всех товаров отдельно. Давайте ещё создадим архив товаров.

Например, для овощей. Также по аналогии делаем макет. Стилизуем его. Графит. «Расширенные». Снаружи 90, снизу 90… Ой, не там — внутри. Заголовок добавляем. Сразу же ему задаём тег H2. Отключаем контекст, меняем цвет и добавляем наш Loop Grid.

Товары выбираем. Карточки товаров выбираем. И в запросе по термину будем выбирать, например, овощи. «Овощи». Категория товаров — «Овощи».

Порядок сделаем по возрастанию. Также можно добавить нумерацию страниц. Давайте добавим, включим индивидуальную пагинацию. Это нужно для того, чтобы переключались пронумерованные страницы. Если её не включить, эту галочку, то они переключаться не будут.

Давайте ещё. Так как у нас мало товаров, пять штук, нумерация страниц не отображается, но когда добавятся еще товары, она будет включиться. Давайте ее стилизуем сразу. Типографику мы сделаем «Акцент». Отступ — не помню, сколько там было, но давайте на глаз, 30. Цвет белый.

«Наведение»: цвет рыжий и «Активный» — тоже рыжий. В макете зададим расстояния 40 и 40. Теперь можно опубликовать. Я думаю, добавим условие, и вот у нас уже определилось, чтобы мы установили местоположение для других шаблонов. Давайте сделаем «Категория товаров», и именно для овощей. «Овощи».

Сохраняем, закрываем. Можно выйти в «Конструктор тем». Также переименуем. «Переименовать». В «Архив овощей», например.

Теперь можно выйти отсюда. Зайдем в «Товары», «Категории», и вот у нас овощи. Давайте перейдём на эту страницу. Нажимаем «Перейти». Вот у нас «Овощи» высвечивается. Возьмем отсюда, скопируем URL-адрес. «Внешний вид» — «Меню». Давайте зайдем, и у нас тут есть овощи.

Давайте вставим эту ссылку сюда. Сохраняем меню. Также можно сделать для этого сразу же меню в подвале. Давайте выберем подвал и сразу для овощей поставим сюда произвольную ссылку. Также сохраняем меню.

И теперь, когда мы перейдём на страницу на сайт, давайте откроем ссылку в новой вкладке. И вот у нас вот овощи. И у нас подтягиваются именно овощи. Также можно нажать «Подробнее». Так мы создали страницу, все отлично работает.

Можно, например, добавить товар в корзину. Давайте нажмём и добавим в корзину. И всё, у нас отложили морковь в корзину. Таким образом в конструкторе тем мы создаём все архивы: для овощей, фруктов, консервации и грибов.

Теперь после этого можно настроить корзину, но так как в макете у нас ее нет, будем делать на глаз. Давайте перейдём во «Все страницы», в «Корзину» И зайдём в «Изменить». Тут нам предлагают ознакомиться со статьёй, прежде чем мы начнем редактировать в Elementor. Там говорится, что это всё надо удалить, но можно сделать и так.

Давайте зайдём в Elementor. У нас здесь будет показываться корзина WooCommerce, но неправильная. Она сделана через текстовый редактор. Давайте сразу её удалим, уберем здесь в настройках — скроем заголовок и будем настраивать корзину. Перейдём в виджеты. Ищем. Вот, WooCommerce и виджет «Корзина».

Давайте добавим. Мы добавляли несколько товаров. Давайте немножко стилизуем. Отступы снаружи сделаем по 90. Опять сверху и снизу. И теперь мы можем стилизовать корзину в одном стиле со всем сайтом. Давайте ещё сюда, в наш блок, добавим заголовок. Например, «Корзина».

Пускай будет виджет «Корзина». Давайте сначала посмотрим, что такое «Общие». Можно сделать в две колонки или поставить в одну колонку. Сверху это будут товары, снизу — итоги. Но мне нравится в две колонки. Я хочу, чтобы было так. «Закрепленная правая колонка». Эта опция позволяет закрепить правую колонку, например итоги корзины при прокрутке. Давайте посмотрим, как это будет выглядеть.

Так, здесь не показывает. Давайте посмотрим изменения. Так как у нас мало товаров, давайте добавим ещё несколько товаров в корзину. Обновим корзину. Вот несколько товаров. И вот у нас правая колонка закрепилась. Смещение давайте сделаем примерно 100 пикселей. Обновим. Вот так, чтобы не прилипало сверху.

Далее идёт итог заказа. Это кнопка «Обновить корзину». Вот здесь можно поменять текст, но я оставлю так, как есть. Можно отключить применение купона. Но давайте оставим. «Итого» — это итоги в корзине. Давайте оставим так, как есть.

Во вкладке «Дополнительные опции» можно обновлять корзину автоматически. Если мы, например, здесь сейчас обновим и, например, добавим количество какого-нибудь товара, у нас она автоматически будет обновляться. Давайте уберём эту галочку. Если поставить эту галочку, у нас ещё и убирается вот эта кнопка — «Обновить корзину». Давайте оставим.

И ещё можно настроить пустую корзину. Если нет никаких товаров в корзине, то можно использовать какой-нибудь шаблон. Создаётся шаблон и вставляется здесь. Но я этого делать не буду.

Далее можно перейти к стилям. Давайте посмотрим. Зададим цвет фона разделов. Давайте какой-нибудь возьмём. Давайте вот этот. Тень также, границу. Давайте опять уберём, чтобы виднее было границу. Тип границы у нас можно убрать совсем или оставить сплошной. Ширина — всё настраивается.

Давайте настроим типографику. Заголовку зададим цвет — графит. И сделаем, например, H2, но сделаем поменьше размер — 26. Далее у нас идет вот это всё описание. Также цвет — графит. Типографику меняем, давайте, на «Текст».

Ссылки сделаем рыженькие. Формы давайте тоже как-нибудь поменяем. Разрыв рядов. Типографику давайте также «Текст» сделаем и сделаем цвет серый. Нет, цвет сделаем графит. А тип фона — серым.

Можно скрыть. Так, у нас тут при наведении ссылку давайте сделаем также рыжей. Итоги заказа — также все настраивается. Заголовки — цвет, как обычно. Типографику мы сделаем H2, давайте только уменьшим. Там 26 было, по-моему. Так же это всё настраивается. Примерно чтобы было, как в макете — в одном стиле.

«Разделители»: толщину — 1, ссылку на товар давайте также сделаем рыжей. Иконка «Удалить». Давайте при наведении сделаем её рыжей. И вот так. Обновим, посмотрим. И вот у нас так.

Далее идут все кнопки. Все заголовки. Кнопка «Оформить заказ». Меняем её в нужном нам стиле, также можно при наведении сделать ее изменение и т. д.

Так, «Формы». Давайте кнопкам добавим типографику «Акцент». Сделаем тип фона. Цвет — рыжий. Тип границы уберём, или оставим сплошной, но цвет поменяем тоже на рыжий. В общем, делаем как обычно. Настраиваем, чтобы было в одном стиле.

Давайте обновим, посмотрим. Ну вот, у нас всё замечательно. Можно удалить. Удаляем все товары.

Когда корзина пустая, можно сделать, как я сказал, здесь какой-нибудь шаблон. И в «Дополнительные опции» добавляется шаблон. Так, давайте вернемся во «Все товары». Вы, наверное, видели, что у нас при добавлении в корзину появляются вот такие кнопки — «Просмотр корзины». Давайте их удалим. F12.

Найдём эту форму. Вот она у нас. Класс e-loop-add-to-cart-form. Вот этот. Давайте мы его скопируем, этот класс. Зайдём в «Шаблоны», в «Конструктор темы». И в карточках товаров давайте отредактируем.

К этой кнопке в «Расширенных» — в «Пользовательские CSS» набираем selector. Добавляем этот класс, вернее, классы. Точку перед ним ставим и display: none.

Обновим. Простите, я взял не тот класс. Надо вот именно просмотр корзины. Давайте побольше сделаем. Вот этот. Ctrl+C. И теперь добавляем этот класс, только без selector.

И давайте ещё сделаем important. Im-por-tant. Обновим. И теперь должно всё сработать. Так, обновим. Нет, так что-то не срабатывает. Так, давайте тогда здесь пробел уберём. Обновим. Теперь точно должно сработать.

Теперь точно сработало. В корзину добавились товары.

Сегодня мы установили плагин WooCommerce, также настроили категории товаров, добавили товары, создали шаблоны для товаров и шаблоны для архивов товаров. Также настроили корзину.

На сегодня у меня всё. Увидимся на следующем уроке. Пока.