Как редактировать и настраивать страницы продуктов WooCommerce

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

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

Как оптимизировать шаблон страницы продукта WooCommerce

Существует несколько способов настроить страницы или шаблон продукта WooCommerce. Некоторые методы включены в WooCommerce. Для других вам понадобится расширение. Вы также можете использовать Редактор сайта или внести изменения вручную. Рассмотрим подробнее каждый вариант.

Как настроить страницу продукта WooCommerce с помощью встроенных функций

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

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

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

Как настроить страницу продукта с помощью расширений WooCommerce

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

1. Расширенный вариант продукта для WooCommerce

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

Для более наглядного подхода Advanced Product Variation for WooCommerce позволяет демонстрировать варианты продуктов с помощью образцов (цвета, изображения и текст), галерей и таблиц. Вы даже можете включать видео в свои образцы.

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

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

Узнайте больше о расширенных вариантах продукта для WooCommerce.

2. Диспетчер вкладок WooCommerce

Вкладки страницы продукта WooCommerce отображаются под кнопкой «Добавить в корзину» и позволяют отображать дополнительную информацию, сохраняя при этом ключевые элементы, такие как название и цена, в верхней части страницы.

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

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

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

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

Узнайте больше о диспетчере вкладок WooCommerce.

3. Часто задаваемые вопросы о продукте

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

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

В интерфейсе часто задаваемые вопросы отображаются в стиле аккордеона с анимацией.

Узнайте больше о часто задаваемых вопросах о продукте.

4. Композитные продукты

С составными продуктами ваши клиенты могут создавать комплекты или настраиваемые продукты.

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

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

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

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

Узнайте больше о композитных продуктах.

5. Дополнения к продукту

Расширение Product Add-Ons позволяет вашим покупателям настраивать и улучшать свои покупки с помощью бесплатных и платных дополнений.

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

Некоммерческие организации могут позволить покупателям включить пожертвование в свою покупку и сделать пожертвование в честь кого-то, добавив имя и сообщение.

Если у вас есть WooCommerce Bookings, дополнения к продукту позволяют создавать опции для дополнительных услуг (ополаскивание волос после стрижки) или VIP-повышения для специальных мест и доступа. Он также работает с подписками WooCommerce, так что вы можете предлагать дополнения к своим продуктам по подписке.

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

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

Узнайте больше о надстройках продукта.

Настройте страницу продукта с помощью редактора сайта.

С блочными темами вы можете настроить внешний вид страницы вашего продукта, отредактировав шаблон страницы с одним продуктом в редакторе сайта. В админке WordPress перейдите в Внешний вид → Редактор .  

Выберите «Просмотреть все шаблоны» в раскрывающемся меню вверху в центре страницы. Выберите шаблон «Один продукт» из появившегося списка.

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

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

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

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

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

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

Как настроить тело одного продукта

В блоке «Один продукт» вверху отображается жирное предупреждение: «Не удалять этот блок! Удаление этого блока вызовет непредвиденные последствия для вашего магазина». Отнеситесь к этому сообщению серьезно!

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

Используйте значок + , чтобы добавить элементы выше или ниже блока «Один продукт», а затем включите любые блоки, которые вы хотите настроить на странице.

Используйте блок «Абзац», чтобы включить текущие предложения («Потратьте 100 долларов или больше на бесплатную доставку»), гарантию удовлетворения или что-либо, что поможет посетителям принять решение о покупке. Добавьте блок видео, который позволяет заглянуть за кулисы ваших процессов. Или включите конкретные рекомендуемые продукты, которые вы хотели бы продвигать. Небо здесь предел!

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

Настройте страницу продукта вручную (используя код и хуки)

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

Прежде чем вносить какие-либо изменения в свои файлы, важно уделить время резервному копированию WooCommerce. Если вы используете Jetpack VaultPress Backup, это делается автоматически в режиме реального времени. Поэтому, если какое-либо из ваших изменений приведет к падению сайта, вы можете восстановить резервную копию всего за несколько кликов, даже если у вас нет доступа к панели управления WordPress.

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

Настройте страницы продуктов WooCommerce с помощью хуков

Хуки позволяют владельцам сайтов добавлять код и настраивать страницы без опасностей, связанных с редактированием основных файлов. Есть два типа хуков: действия и фильтры. Действия позволяют вставлять код в определенные точки, а фильтры позволяют управлять переменной и возвращать ее.

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

Вот еще несколько примеров изменений, которые вы можете внести на страницы своих продуктов с помощью хуков:

• Измените текст кнопки «Добавить в корзину». Например, вместо этого вы можете сказать «Пожертвовать сейчас».
• Настройте хлебные крошки WooCommerce. Замените разделитель панировочных сухарей, уберите полностью панировочные сухари и т. д.
• Удаляйте, переименовывайте и меняйте порядок вкладок товаров. Например, добавьте вкладку «Ингредиенты» или добавьте видео на одну из вкладок.

Настройте страницы продуктов WooCommerce с помощью CSS

CSS — это язык кодирования, используемый для управления элементами дизайна (в отличие от JavaScript, который управляет действиями). Вы можете использовать его для изменения дизайна страниц вашего продукта. После того, как вы изучите основы CSS, вы сможете настраивать все, от цветов и шрифтов до размеров отдельных элементов.

Вы можете легко добавить код CSS, выбрав «Внешний вид» → «Настроить» → «Дополнительный CSS» на панели инструментов WordPress. Например, если вы хотите изменить цвет шрифта названий своих продуктов, вы должны использовать следующий код, заменив шестнадцатеричный код цвета своим собственным:

 .woocommerce div.product .product_title { color: #222222; }

Если вы хотите изменить цвет кнопки «Купить сейчас», вы должны использовать этот код, снова заменив шестнадцатеричный код цветом по вашему выбору:

 .woocommerce div.product .button {   background: #000000; }

Вы можете увидеть больше примеров в этой статье из WooCommerce.

Как увеличить скорость загрузки страницы вашего продукта

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

Буквально каждая секунда на счету — задержка загрузки в одну секунду может снизить конверсию на 20%!

Jetpack Boost — лучшее решение для оптимизации скорости и производительности сайта для WordPress. У него быстрый и простой процесс настройки — разработчик не требуется — и он может похвастаться результатами, которые превзошли пять лучших плагинов по производительности в прямом тесте.

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

Простая панель управления упрощает настройку параметров оптимизации с помощью активации одним щелчком мыши. Это дает вам возможность тестировать модули производительности по отдельности и настраивать Jetpack Boost для идеального соответствия любому сценарию.

Чтобы узнать больше о способах ускорения страниц товаров, ознакомьтесь с разделом «Девять способов ускорить работу магазина WooCommerce».

Часто задаваемые вопросы о настройке страниц продуктов

Остались вопросы? Взгляните на ответы на некоторые распространенные ниже.

Как лучше всего настроить страницу продукта WooCommerce?

Не существует единого лучшего способа. Лучший способ для вас зависит от вашего уровня комфорта с различными подходами.

Редактор сайта предоставляет всю мощь в ваши руки, позволяя перетаскивать элементы для создания собственной персонализированной страницы продукта без необходимости редактирования какого-либо кода. Это отличное решение как для начинающих, так и для продвинутых пользователей!

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

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

Должен ли я сделать резервную копию своего сайта перед редактированием шаблона страницы продукта?

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

Jetpack VaultPress Backup — это подключаемый модуль резервного копирования WordPress в режиме реального времени, а это означает, что резервное копирование вашего сайта происходит не только по ежедневному расписанию или когда вы делаете копию вручную. Вместо этого он автоматически сохраняется каждый раз, когда вы вносите изменения на свой сайт, клиент размещает заказ или посетитель оставляет комментарий. Каждый раз, когда происходит что-то важное? Это спасено!

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

С помощью Jetpack VaultPress Backup вы можете восстановить свой сайт одним щелчком мыши и быстро вернуться в сеть. С мобильным приложением Jetpack вы можете восстановить в любое время и в любом месте, даже если сайт полностью не работает.

Лучшая часть для владельцев магазинов? Все данные ваших клиентов и заказы защищены и остаются актуальными.

Каковы рекомендации по настройке страницы продукта WooCommerce?

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

Всегда сначала делайте резервную копию своего сайта . Когда вы добавляете или обновляете код сайта, одна ошибка может вызвать проблемы. Вы должны быть готовы восстановить сайт как можно скорее, не потеряв ни одного заказа. Jetpack VaultPress Backup — лучшее решение для автоматического резервного копирования в режиме реального времени для WordPress.

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

Внесите изменения в код за пределами файлов родительской темы . Когда вы редактируете файл темы или плагина, эти изменения будут перезаписаны и отменены при следующем обновлении темы или плагина.

Есть несколько способов добавить код на ваш сайт без непосредственного редактирования файлов темы или плагинов. Вы можете использовать плагин Code Snippets, чтобы добавлять, редактировать или удалять элементы на странице, а также стилизовать свой сайт с помощью поля «Дополнительный CSS» в настройщике тем. Вы также можете создать дочернюю тему. Важно вносить изменения там, где на них не повлияют обновления тем или плагинов.

Следите за скоростью. Независимо от того, как вы настраиваете страницы своих продуктов, вы хотите убедиться, что скорость вашего сайта не пострадает. С помощью Jetpack Boost вы можете мгновенно улучшить ключевые области, которые улучшат как взаимодействие с пользователем, так и восприятие Google качества вашего сайта. Более быстрый сайт означает, что клиенты с большей вероятностью останутся на нем, и Google с большей вероятностью порекомендует вас в результатах поиска. Быстрое повышение может иметь большое значение.