Как перевести WooCommerce (рассматривается каждая ситуация)

Опубликовано: 2022-01-26

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

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

  1. Покупатели могут просматривать ваш магазин на предпочитаемых ими языках, что значительно повышает их покупательский опыт. На самом деле, исследование Gallup, проведенное по заказу Европейского Союза, показало, что 42% покупателей не будут покупать в магазинах, которые не доступны на их родном языке.
  2. Вы можете привлечь больше покупателей в первую очередь благодаря многоязычному SEO. То есть вы можете ранжировать свои продукты в Google на разных языках, что поможет вам привлечь больше органического трафика в ваш магазин.

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

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

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

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

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

Готовы узнать, как настроить перевод WooCommerce? Давайте копать!

Что нужно для перевода WooCommerce

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

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

Что ж, как это часто бывает с WordPress, вам понадобится помощь плагина.

Несмотря на то, что существует ряд популярных многоязычных плагинов, мы собираемся использовать плагин TranslatePress для этого руководства по нескольким причинам:

  1. Он предлагает готовую поддержку WooCommerce, поэтому вы сможете полностью перевести WooCommerce, включая страницы корзины и оформления заказа.
  2. Существует бесплатная версия, позволяющая создать полностью многоязычный магазин на одном новом языке. То есть вы можете следовать большей части этого руководства, используя только бесплатную версию.
  3. Вы можете управлять своими переводами с помощью визуального интерфейса, как вы видели выше.
  4. Он поддерживает автоматический машинный перевод через Google Translate или DeepL, если вы хотите сэкономить время.

Как перевести WooCommerce с TranslatePress

Теперь, когда вы знаете, что такое TranslatePress, давайте рассмотрим, как переводить WooCommerce с помощью плагина.

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

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

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

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

1. Установите TranslatePress и выберите языки

Для начала установите и активируйте плагин TranslatePress.

Вы можете установить бесплатную версию с WordPress.org. Или, если вы решите приобрести премиум-версию TranslatePress, вы можете загрузить премиум-плагин со своей панели управления TranslatePress.

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

После активации плагина перейдите в « Настройки» → «TranslatePress », чтобы выбрать языки, которые вы хотите использовать в своем магазине:

  • Язык по умолчанию — язык, на котором существует весь текущий контент вашего магазина.
  • Все языки — один или несколько новых языков, на которые вы хотите перевести содержимое вашего магазина. Бесплатная версия TranslatePress позволяет добавить один новый язык ( всего два языка ). Чтобы добавить два или более новых языка, вам понадобится премиум-версия TranslatePress, которая поддерживает неограниченное количество языков.

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

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

Однако, если вы не видите язык, который хотите использовать, TranslatePress также позволяет добавить собственные языки.

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

2. Настройте автоматический перевод (необязательно)

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

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

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

Если вы хотите использовать машинный перевод, TranslatePress поддерживает два разных сервиса:

  • Google Translate API — вы можете использовать его с бесплатной версией TranslatePress;
  • DeepL — для этого сервиса требуется премиальная лицензия TranslatePress Business.

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

Однако недостатком DeepL является то, что он не поддерживает столько языков, сколько Google Translate, поэтому вам нужно еще раз проверить, поддерживает ли он выбранный вами язык.

Вы можете настроить эти службы, перейдя на вкладку « Автоматический перевод » в области настроек TranslatePress.

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

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

У TranslatePress есть пошаговая документация о том, как получить ключ API для обеих служб:

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

Плагин TranslatePress не взимает с вас плату за использование машинного перевода. Однако вам может потребоваться оплатить Google Translate или DeepL напрямую в зависимости от вашего использования.

И Google Translate, и DeepL предлагают бесплатные планы, которые позволяют бесплатно переводить 500 000 символов в месяц , что Если вам нужно перевести более 500 000 символов за один месяц, вам нужно будет заплатить:

  • Google Translate взимает 20 долларов за миллион символов сверх бесплатного лимита.
  • DeepL взимает фиксированную плату в размере 5,49 долларов в месяц плюс 25 долларов за миллион символов, что делает его немного дороже, чем Google Translate.

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

После того, как вы сделали свой выбор, не забудьте нажать кнопку « Сохранить изменения ». Затем TranslatePress начнет перевод вашего контента.

3. Переведите контент WooCommerce

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

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

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

    Чтобы запустить редактор перевода, откройте фрагмент контента, который вы хотите перевести, в интерфейсе вашего сайта. Затем щелкните новую опцию « Перевести страницу » на панели инструментов WordPress:

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

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

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

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

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

    Чтобы перевести продукт WooCommerce, откройте продукт, который вы хотите перевести, в интерфейсе вашего магазина. Затем нажмите кнопку « Перевести страницу » на панели инструментов WordPress, чтобы запустить редактор.

    Затем вы можете перевести все детали продукта, как мы показали вам в GIF выше.

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

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

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

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

    Как перевести страницу магазина WooCommerce

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

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

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

    TranslatePress также упрощает перевод страницы корзины WooCommerce с помощью визуального редактора.

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

    Ваша корзина покупок WooCommerce имеет два разных состояния, которые необходимо перевести:

    1. Пусто — содержимое корзины до того, как покупатель добавил какие-либо товары.
    2. Полная — содержимое корзины, когда покупатель добавил один или несколько товаров.

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

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

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

    Затем вернитесь на страницу корзины и снова запустите редактор TranslatePress. Теперь вы можете использовать тот же подход для перевода всего контента, который будет отображаться, когда у покупателя есть товары в корзине:

    Как перевести страницу оформления заказа WooCommerce

    Вы можете перевести страницу оформления заказа WooCommerce точно так же, как вы перевели страницу корзины.

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

    Когда у вас откроется страница оформления заказа, используйте кнопку на панели инструментов WordPress, чтобы запустить редактор TranslatePress, как вы делали это раньше.

    Теперь вы можете перевести оформление заказа WooCommerce, используя тот же подход «укажи и щелкни».

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

    Как перевести пункты меню, виджеты и другое содержимое внешнего интерфейса

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

    • Пункты меню;
    • Виджеты (или блок-виджеты);
    • Контент из редактора WordPress — он работает как с новым блочным редактором (Gutenberg), так и с классическим редактором TinyMCE;
    • Контент, созданный вами с помощью плагинов конструктора страниц;
    • Формы из любого плагина конструктора форм;
    • Попапы из плагинов всплывающих окон;
    • …и так далее.

    Например, если вы хотите перевести один из пунктов меню вашего магазина, вы можете просто навести курсор на пункт меню и щелкнуть значок карандаша:

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

    Как перевести метаданные SEO

    Если вы хотите извлечь выгоду из многоязычного SEO WooCommerce, вам также необходимо перевести внутренние SEO-детали вашего магазина, такие как SEO-заголовки, метаописания, URL-адреса, информацию Open Graph и т. д.

    TranslatePress также может помочь вам перевести все эти детали, но для этого вам понадобится надстройка SEO Pack, которая доступна в премиальной персональной лицензии TranslatePress.

    С помощью этого дополнения вы сможете переводить всю SEO-информацию вашего сайта. Для этого TranslatePress автоматически интегрируется с наиболее популярными SEO-плагинами, включая Yoast SEO, Rank Math и другие.

    После установки надстройки SEO Pack вы сможете перевести эти данные, выбрав их в раскрывающемся списке в редакторе перевода.

    Например, если вы уже установили свои данные SEO с помощью Yoast SEO, вы увидите, что эти данные появятся в редакторе, а затем вы сможете перевести их так же, как и другой контент:

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

    Для кратких URL-адресов всего сайта, таких как базовые слаги категорий продуктов, вы можете открыть интерфейс перевода строк :

    4. Настройте переключатель языка WooCommerce

    На данный момент у вас есть работающий многоязычный магазин WooCommerce.

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

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

    Вот ваши варианты размещения переключателя языка вашего магазина:

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

    Вы также получаете настройки для управления содержимым и поведением переключателя языка. Например:

    • Названия языков — выберите, отображать ли полное название языка или только двухбуквенный код ISO.
    • Флаги стран — выберите, показывать ли флаги стран. Если вы включите флаги, TranslatePress покажет флаг для конкретной выбранной вами локали. Итак, если вы выбрали испанский язык (Испания), он покажет испанский флаг. Но если вы выберете испанский язык (Мексика), будет показан мексиканский флаг.

    Чтобы настроить эти параметры, перейдите в « Настройки» → «TranslatePress » и прокрутите вниз до настроек « Переключатель языка» :

    Теперь давайте посмотрим на некоторые альтернативные варианты размещения плавающего переключателя языка по умолчанию.

    Чтобы добавить переключатель языка WooCommerce в качестве элемента меню, перейдите в « Внешний вид» → «Меню », чтобы получить доступ к обычному редактору меню WordPress и открыть меню, которое вы хотите отредактировать.

    Затем вы можете использовать настройки переключателя языка для настройки переключателя языка.

    Здесь у вас есть два основных варианта…

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

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

    Другой вариант — использовать пункт меню « Текущий язык» . Это отобразит язык, на котором в данный момент просматривает покупатель. Затем вы можете добавить определенные языки в качестве пунктов подменю пункта меню « Текущий язык» , например:

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

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

    Как добавить переключатель языка WooCommerce в качестве шорткода

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

     [переключатель языка]

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

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

    Создайте многоязычный магазин WooCommerce уже сегодня

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

    Хотя WooCommerce не поддерживает многоязычность в основном плагине, вы можете легко создать многоязычный магазин с помощью плагина TranslatePress.

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

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

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

    Если вы готовы начать, установите бесплатный плагин TranslatePress сегодня, чтобы увидеть, как он работает.

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

    У вас остались вопросы о переводе WooCommerce? Дайте нам знать об этом в комментариях!

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