Как изменить админку WooCommerce

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

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

В данной статье вы узнаете 4 простых шага для кастомизации админки Вукоммерс.

В данной статье мы рассмотрим:

  1. Отключите ненужные эндпоинты
  2. Измените текст на главной странице( dashboard.php)
    • Переименуйте эндпоинты
    • Измените порядок эндпоинтов
  3. Отключите стандартное меню админки
  4. Создайте интерфейс при помощи пейдж-билдера
  5. Плагины

Внимание: Перед тем, как начнете, сделайте бэкап.

1. Отключите ненужные эндпоинты

После установки WooCommerce админка выглядит так:

Админка Вукоммерс
Стандартная админка WooCommerce

По умолчанию в админке Вукоммерс есть пару эндпоинтов, которые находятся в WooCommerceПараметраДополнительноЭндпоинты учётной записи:

Эндпоинты аккаунта WooCommerce
Эндпоинты админки WooCommerce

Чтобы отключить эндпоинт, необходимо удалить его адрес.

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

После этого админка Вукоммерс будет выглядеть так:

Админка Вукоммерс с отключенными эндпоинтами
Из меню ушли ссылки Адреса и Загрузки

2. Измените текст на главной странице(dashboard.php)

Стандартный текст на главной странице выглядит так:

Добро пожаловать, {текущий_пользователь}(не {текущий_пользователь}? Выйти)Из главной страницы аккаунта вы можете посмотреть недавние заказы, изменить платежный адрес и адрес доставки, а также настроить пароль и основную информацию.

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

Чтобы настроить этот текст, необходимо скопировать файл dashboard.php из папки WooCommerce в папку с дочерней темой и отредактировать пару строк.

  1. Скопируйте файл из /wp-content/plugins/woocommerce/templates/my-account/dashboard.php(или скачайте с Github).
  2. Создайте папку /wp-content/themes/текущая_тема/woocommerce/myaccount.
  3. Вставьте файл dashboard.php в созданную папку.
  4. Отредактируйте скрипт, который отображает этот текст:

Сейчас админка выглядит так:

Админка Вукоммерс после редактирования файла dashboard.php
Стандартная админка WooCommerce

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

а. Переименуйте эндпоинты

Чтобы переименовать эндпоинты, добавьте этот код в functions.php дочерней темы или при помощи специального плагина:

Удалите лишние эндпоинты и измените названия эндпоинтов в строках 4-9.

б. Измените порядок эндпоинтов

Чтобы настроить порядок эндпоинтов, поменяйте строки местами:

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

3. Отключите стандартное меню админки

Чтобы отключить стандартное меню админки, добавьте этот код во Внешний видИзменитьДополнительные стили или в style.css дочерней темы:

Сейчас консоль Вукоммерс должна выглядеть так:

Упрощенная админка WordPress

4. Создайте интерфейс при помощи пейдж-билдера

При помощи пейдж-билдера откройте страницу .../my-account/. Страницы эндпоинтов наследуют дизайн страницы Мой аккаунт.

Как настроить админку WooCommerce
Админка WooCommerce в редакторе Elementor

Динамический текст с именем посетителя я сделал при помощи Elementor Pro. Альтернатива — JetEngine.

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

Для вывода полей ввода вам понадобится Elementor Pro. Если вам необходимо отображать кастомные поля ввода, вам понадобится плагин Advanced Custom Fields или JetEngine.

Добавьте текст с динамическим именем посетителя
Добавьте текст с динамическим именем посетителя

Бесплатно можно сделать при помощи снипета в файл functions.php. Добавьте этот программный код в functions.php дочерней темы или при помощи специального плагина:

Вставьте этот шорткод в виджет Текстовый редактор: [current-username]

Добавьте текст перед и после шорткода.

Я сделал меню при помощи 4-х виджетов Картинка с текстом и ссылками на эндпоинты. Вы можете сделать по-своему.

Создайте меню для админки WooCommerce
Создайте меню для админки WooCommerce

Сделайте вывод оплаченных товаров(мембершипов) на главной странице, и добавьте шорткоды мембершипа, чтобы оплатившие доступ видели только ваши мембершипы.

Доступ к мембершипам в админке WooCommerce
Доступ к мембершипам в админке WooCommerce

Все добавленные элементы пейдж-билдера будут выводиться на всех эндпоинтах админки Вукоммерс. Чтобы отключить показ ненужных элементов на некоторых эндпоинтах, вы можете использовать бесплатный плагин Visibility Logic for Elementor или Dynamic Visibility for Elementor, или платный плагин PAFE Pro.

Зайдите как посетитель и пройдите по всем страницам админки. Не забудьте про данные страницы:

  • Страница логина,
  • Информация о заказах( /view-order/)
  • Выход(/customer-logout/)

5. Плагины

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

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

Если вы не планируете использовать пейдж-билдер, вы можете легко попробовать бесплатный плагин Custom My Account for Woocommerce.


Custom My Account for Woocommerce

Довольно простой плагин с довольно простыми функциями редактирования админки.

В платной версии Custom My Account for Woocommerce вы можете загружать и выводить фотографию посетителя и добавлять шорткоды на нужные страницы админки.

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

Плагин, который может редактировать и добавлять собственные закладки в админке Вукоммерс, добавлять фотографию посетителя и формы входа и регистрации — WordPress Profile Builder Plugin.

Ещё один более продвинутый вариант — платный плагин YITH WooCommerce Customize My Account page.

Заключение

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

  • Оставьте нужные эндпоинты,
  • Отредактируйте текст из файла dashboard.php,
  • Отключите стандартное меню админки Вукоммерс,
  • Создайте интерфейс админки при помощи пейдж-билдера и настройте видимость элементов на всех эндпоинтах.

Здесь вы можете посмотреть, как выглядит админка на этом веб-сайте.

Читайте также:

  1. Кастомные поля ввода WordPress
  2. Как сделать мембершип на WooCommerce с лайф-тайм лицензией
  3. Библиотеки CSS
  4. Кнопка Войти / Выйти для авторизованных и неавторизованных пользователей в меню WordPress
  5. Как показывать различные меню для авторизованных и неавторизованных посетителей WordPress
  6. Как отключить админ-бар WordPress для всех посетителей, кроме администратора

Надеюсь, статья была полезна. Оставляйте комментарии.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *