Как запустили интернет-магазин по продаже постеров на WooCommerce. Сложности и нюансы работы с платформой. Кейс

Фото: Сайт Woocomerce

Компания организует различные выставки в сфере искусства, а постеры для продажи — это репродукции картин. В какой-то момент появилась необходимость в сайте, который бы легко поддерживался и стоил недорого. 

Какой функционал реализовали? Почему выбрали платформу WooCommerce? И какие возникли сложности? Обо всем рассказывает директор по развитию бизнеса в Solaurum Юрий Семенов.

Функционал магазина

Старались планировать все до мелочей. Например, валидацию форм, Thank you page, страницы ошибок, в том числе 404. Также настройку состояния для отсутствия данных, когда, скажем, в магазине нет ни одного товара или на странице "Коллекции" нет ни одной коллекции.

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

И, конечно, сайт должен был обладать удобным пользовательским интерфейсом и адаптивным дизайном — ведь большая часть покупок сейчас совершается с мобильных телефонов.

Для покупателей реализовали функционал:

• Возможность просмотра серии изображений постеров в высоком разрешении и в разных интерьерах.
• У каждой карточки товара есть детальное описание, что упрощает процесс покупок и положительно отражается на поисковой оптимизации.
• Выбор формата печати: размер, бумага, ламинирование.
• Полный цикл оформления заказа: добавление в корзину, редактирование корзины; указание контактных данных, адреса доставки и способа оплаты; получение подтверждения о заказе на электронную почту.
• Настроили отправку email-уведомлений. Когда заказ был оформлен, клиенту приходило письмо со всеми данными о заказе и уведомление о смене статуса заказа.

Функционал для сотрудников магазина: 

• Управление заказами в панели администратора: просмотр, редактирование и экспорт списка заказов.
• Отправка посылки клиентам с возможностью отслеживания: интеграция со службами доставки, автоматическое уведомление клиентов.
• Автоматизация налогового учета: интеграция с бухгалтерскими программами, формирование отчетов, автоматический расчет налогов.

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

На данный момент сайт магазина успешно запущен и стабильно работает.

Выбор платформы и технологии

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

На начальном этапе разработки интернет-магазина сошлись на том, что в базовом коде будут минимальные изменения и что мы ограничимся работой со стилями (CSS) вместо изменения ядра WooCommerce. Это позволило в будущем избежать непредвиденных ошибок в работе сайта, конфликтов с плагинами и упростить дальнейшее обслуживание проекта.

Дополнительным преимуществом стало большое количество доступных модулей и расширений, которые легко приобрести и интегрировать в будущем. Это позволяет гибко масштабировать магазин — например, добавлять систему скидок, программу лояльности или новые способы оплаты без необходимости кардинально менять платформу.

Большинство тем WordPress позволяют настраивать внешний вид сайта под свои нужды, изменяя цвета, шрифты, расположение элементов, а некоторые из них уже сразу адаптированы под мобильные устройства.

Удобным бонусом была возможность быстро добавить на сайт необходимые функции с помощью плагинов: для SEO, email-маркетинга, отслеживания поведения пользователей на сайте, автоматизации процесса отправки заказов, учета продаж/расходов и налогов.

Среди плагинов именно для WooCommerce были подключены:

• Maximum Products per User for WooCommerce (максимальное количество товаров на пользователя) — плагин, позволяющий ограничить количество определенных товаров, которые может приобрести один пользователь.
• WooCommerce Recently Viewed Products (недавно просмотренные товары) — отображает список товаров, которые покупатель недавно просматривал
• TI WooCommerce Wishlist — добавляет функцию списка желаний (отложенные товары). Позволяет покупателям сохранять интересующие товары и возвращаться к ним позже.
• Woocommerce Products Per Page (товары на странице) — определяет, сколько товаров будет отображаться на одной странице.
• Multi-Step Checkout for WooCommerce (многошаговое оформление заказа) — разбивает процесс оформления заказа на несколько этапов.

Рассмотрим плюсы и минусы других важных плагинов, которые были установлены.

Yoast SEO

Один из самых популярных плагинов для поисковой оптимизации (SEO) сайтов на платформе WordPress.

Плюсы. Автоматически оптимизирует заголовки, метаописания и сниппеты, а также создает XML-карты сайта, которые помогают поисковым системам индексировать сайт. Анализирует контент сайта на соответствие ключевым словам. Интегрируется с социальными сетями и оптимизирует отображение страниц сайта в социальных сетях, когда кто-то решил поделиться этой страницей. Бесплатная версия подходит для большинства задач.

Минусы. Может замедлять сайт при больших объемах контента, конфликтовать с другими SEO-плагинами. Не всегда корректно анализирует тексты на русском языке. Иногда сложно настроить для нестандартных сайтов, а некоторые функции доступны только в премиум-версии.

ShortPixel Image Optimizer

Плагин для оптимизации изображений на сайте WordPress с бесплатным лимитом изображений.

Плюсы. Автоматически сжимает изображения для ускорения загрузки страниц и уменьшает нагрузку на сервер, что улучшает производительность сайта. Может работать в фоновом режиме, поддерживает форматы WebP и AVIF.

Минусы. Иногда снижает качество изображений при агрессивной компрессии. Также возможны ошибки с некоторыми типами изображений. Не всегда корректно работает с кэширующими плагинам. Может конфликтовать с другими плагинами оптимизации изображений. Бесплатный лимит изображений быстро заканчивается.

CookieYes

Плагин для WordPress, который помогает владельцам сайтов обеспечить соответствие требованиям Общего регламента по защите данных (GDPR) и другим законам о конфиденциальности, касающимся использования файлов cookie.

Плюсы. Просто настраивается, автоматически отображает баннер cookie. Есть возможность настройки пользовательского согласия, поддерживает различные языки. Совместим с большинством тем и плагинов.

Минусы. Бесплатная версия имеет ограниченный функционал, может потребовать технической настройки для полной совместимости. Требует регулярного обновления в соответствии с новыми законами и не всегда корректно работает с плагинами кэширования. Иногда замедляет сайт при загрузке скриптов.

Для безопасности и управления контентом также были использованы плагины Redirection и Jetpack.

Redirection

Плагин для управления перенаправлениями (редиректами) на сайте.

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

Минусы. Может замедлять работу сайта при большом количестве перенаправлений, иногда работает нестабильно при изменении структуры ссылок. Не поддерживает сложные правила редиректа без дополнительного кода. Требует периодического обновления списка редиректов.

Jetpack

Многофункциональный плагин для настройки безопасности, резервного копирования, аналитики и ускорения сайта.

Плюсы. Есть встроенная защита от атак и спама, в премиум-версии создает автоматические резервные копии. Позволяет использовать CDN для изображений и статики. Достаточно гибкий в настройке, т.к. можно включать только нужные модули.

Минусы. Может замедлять сайт, если включены все модули. Некоторые функции доступны только в платной версии. Может конфликтовать с другими плагинами, а для совместимости с WooCommerce необходима дополнительная настройка.

Также использовали плагин Autoptimize. Это популярное решение для оптимизации производительности сайта путем агрегации, минификации и кэширования скриптов (JavaScript), стилей (CSS) и HTML. Среди минусов стоит отметить несовместимость с некоторыми темами, иногда ломает стили CSS и оптимизирует только фронтенд.

Работа с оптимизацией сайта под требования поисковых систем состоит из технического и контентного SEО. Одной из важных составляющих технического этапа является достижение хороших показателей PageSpeed. Почти все можно исправить только с входом в код.

В карточках товарах обычно много изображений, которые могут сильно замедлять загрузку сайта, поэтому использовали плагин ShortPixel. Он сжимает изображения и позволяет добиться легкой загрузки страниц, хороших показателей PageSpeed уже без входа в код. Для этих же целей конвертировали изображения в формат WebP перед добавлением их на сайт.

На этапе запуска проекта сжали все изображения; подготовили список всех контейнеров для иллюстраций, которые использовались на сайте; прописали инструкции с описанием необходимых размеров и форматов.

Сложности проекта

WooCommerce — это "коробочное решение", где сценарии работы программы, инструменты, чекауты уже готовы.

Из-за того, что было принято решение не делать ничего кастомного, не влезать в то, что работает из "коробки", дизайнер работал в ограниченных условиях и стилизовал то, что предлагала WooCommerce. Это не всегда его радовало и совпадало с профессиональным видением: нельзя менять местами поля, шаги, переносить поля из одного шага в другой. Работа шла с ограничениями,  поскольку в дальнейшем требовалась несложная поддержка сайта в будущем.

Таким образом, пришлось отказаться от кастомизации, чтобы впоследствии обеспечить более легкие и недорогие обновления.

Когда у WooCommerce выходит обновление, то они касаются только тех элементы, которые входят в стандартную функциональность платформы. Кастомные элементы — анимации, 3D-элементы — к их числу не относятся. Поэтому обновление может вступить в конфликт с кастомными элементами, которые в итоге приходится дорабатывать вручную. Для этого понадобится время разработчика и, соответственно, бюджет.

Примечание

WooCommerce регулярно обновляется, и каждое обновление может содержать исправления ошибок, улучшения безопасности и новые функции. Если в базовый код были внесены изменения, то обновление может привести к поломке сайта или потере этих изменений. Минимальное вмешательство в код упрощает процесс обновления и гарантирует, что сайт будет совместим с последней версией платформы.

Чем меньше изменений в коде, тем проще и дешевле поддерживать сайт в рабочем состоянии. В случае возникновения проблем, легче найти и исправить ошибку, не разбираясь в сложных изменениях.

Какие доработки могут потребоваться. Насколько они сложные и как их сделать

Оформление заказа

В исходном виде процесс оформления заказа может быть не очень удобным, поэтому требуются доработки. Можно выбрать шаблон (тему), который вам подходит и потребует минимально вмешательств. Есть путь внесения изменений через использование плагинов или уже с помощью разработчиков.

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

Понятие финансовых затрат, которые могут понадобится на доработки, достаточно размытое. Как мы уже упомянули выше, можно многое реализовать, но ограничения могут появиться там, где вы их не ожидаете. Стоимость зависит от часов работы разработчика: на что-то может понадобиться 2 часа, а на что-то — 42. Поэтому и вилка стоимости будет большой. Например, при вышеупомянутых обновлениях. Бывают случаи, когда тема или плагин обновляются со своими багами, и нужно понять, из-за чего возникла поломка — и на выяснения уходят часы работы.

Шаблоны

Работа с шаблонами была неудобной именно для дизайнера. Жесткие профессиональные рамки не дают возможности предложить эффективное решение, поэтому приходится выходить из "зоны комфорта" и пытаться встраиваться в определенные рамки.

Интеграция со сторонними сервисами

На сайт была добавлена возможность оплаты через Stripe. Stripe, как платежный шлюз, обрабатывает транзакции. Настройка достаточно легкая, с ней не было никаких проблем — работает исправно.

Для бухгалтерского учета интегрировали программное обеспечение QuickBooks, оно популярно среди малого и среднего бизнеса для управления финансами. Когда кто-то покупает товар на сайте, это автоматически записывается в онлайн-бухгалтерии: прописывается точная дата, сумма, товар и рассчитывает налог. Интеграция QuickBooks происходит именно со Stripe, а не с WooCommerce, поэтому здесь тоже не было никаких проблем.

Для удобного управления доставками подключили облачную платформу ShipStation.

Резюме

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

И основное — WooCommerce не подойдет для standalone-решений, т.к. зависит от WordPress.