Как изменить админку 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 вашей дочерней темы:

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

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

Реклама

Калькулятор ОСАГО

Простой способ выгодно купить полис

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

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

Админка 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, который встраивается в Вордпресс и Elementor.

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

Метки

Похожие записи

комментария 43

  1. Добрый день, Дмитрий.

    Подскажите пожалуйста, как сделать, чтобы в письме о созданном аккаунте в woocommerce, было подставлено имя клиента?

    В настройках включено «При создании аккаунта автоматически генерируется имя пользователя, основанное на имени, фамилии или адресе электронной почты», для страницы оформления заказа установлен плагин для удаления ненужных полей, оставил только имя и почту, но в таком случае woocoomerce вставляет в письмо имя по почте, к примеру если почта [email protected], то в письме artem313, а не имя Артем. Спасибо.

  2. Здравствуйте, Дмитрий. Скажите пожалуйста, как Вы сделали, чтобы отображалось имя, которое человек вводит при регистрации, а не имя пользователя сгенерированное woocommerce?

    • Здравствуйте, Артем,
      Для этого нужно, чтобы ваш посетитель заполнил либо стандартное Вордпресс поле Имя, либо вам нужно создать свое поле.
      После этого нужно вывести это поле.
      По-моему, в JetEngine можно выбрать и вывести стандартное поле Имя, в Elementor Pro — не помню.

  3. Здравствуйте, так легко понимать изложенный вами материал. Спасибо вам большое, за это!
    Если найдется время подскажите, пожалуйста, такой вопрос:
    убираю в меню «woocommerce» сабменю «консоль»: unset($submenu[‘woocommerce’][5]);,
    сам пункт из сайдбара пропадает, но при этом адрес wp-admin/admin.php?page=wc-admin по прежнему доступен.
    Задача сделать редирект с этого адреса на главную страницу админки.
    Обычно пользуюсь таким кодом и с другими пунктами меню проблем нет
    function true_block_admin_pages_redirect() {
    global $pagenow;
    $pages_to_block = array(
    ‘themes.php’,//внешний вид=>темы
    ‘update-core.php’,//консоль=>обновления
    //’admin.php’,//редиректит все сабменю WC — не устраивает
    //’admin.php?page=wc-admin’,//не работает
    //’wc-admin.php’,//сабменю woocommerc — «консоль» не работает
    //’wc-admin’,//не работает
    //’wp-admin/admin.php?page=wc-admin’,// не работает
    //’wp-admin/admin.php?page=wc-admin.php’,//не работает
    //’admin.php?page=wc-admin’,
    );
    if(in_array($pagenow, $pages_to_block)){
    wp_redirect( admin_url(‘/’) );
    exit;
    }
    }
    add_action(‘admin_menu’, ‘true_block_admin_pages_redirect’);

    Как можно сделать перенаправление конкретно со страницы page=wc-admin ? Может хук другой или адрес страницы не правильно?

    • Здравствуйте, спасибо за отзыв.
      Насколько я понимаю, wp-admin/admin.php?page=wc-admin
      это адрес страницы в админке сайта.
      Она не имеет отношения к админке во фронт-энде, которая доступна посетителям, и о которой идет речь в этой статье.
      Затрудняюсь ответить на ваш вопрос.

  5. Здравствуйте Дмитрий.
    Как можно реализовать на Вордпрессе одностарничный магазин с корзиной без онлайн оплаты, только заявка на электронную почту?
    Какие плагины (бесплатные) есть для решения такой задачи?
    Сайт будет сделан на бесплатном плагине Elementor Free.
    Если работать с плагином WooCommerce то как
    то реализовать?
    Буду очень благодарен! Спасибо!

    • Здравствуйте, Салаут,
      Заявка на электронную почту может приходить после создания заказа.
      Это можно сделать в настройках WooCommerce: WC — Настройки — Е-мейлы — Новый заказ.

  6. Сделал все как сказано в пункте 2 но изменений не произошло на странице аккаунта с чем может быть связано?

    • Скопируйте файл, удалите все лишнее, оставьте только то, что нужно.
      Внимательно замените код.

      Скорее всего ошибка в коде, где-то не тот символ или отсутствует скобка.

      • С вами можно через соц сеть связаться? Вот код который вы предоставили был вставлен такой же

          • Ну мне уже стыдно писать вам снова.
            1) Создал дочернюю тему
            2) В ней сделал путь wp-content/themes/моя_тема/woocommerce/myaccount
            3) Файл теперь ваш и все равно нету изменений.
            4) ради интереса менял даже в корне плагина изменения тоже не поступают

            • Я только что пробовал на другом сайте — все работает.
              Проблема не в коде и не в этой статье.

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

          • Я полностью с вами согласен, что дело не в коде и тем более не в статье. Кеш сейчас попробую почистить

  7. Спасибо огромное! Очень помогли.
    В интернете редко встретишь толковое объяснение, особенно на русском.

  8. Отличная статья, спасибо, очень помогли.
    Подскажите, как можно в «Личные данные» вывести номер телефона ?
    ps
    у Вас в разделе «Переименуйте эндпоинты» в конце нулевого элемента массива пропущена «,» =)

  9. Дмитрий, во-первых спасибо за отличный материал, который вы разместили на страницах вашего блога. А во-вторых вопрос по плагину Яндекс денег для WooCommerce: при оплате в будущем будет доступ к обновлениям (вообще плагин как часто обновляется)? И не очень понял, в настройках не увидел, после успешной оплаты заказ переходит в статус Выполнено, или где-то это тоже настроить можно?

    • Спасибо за отзыв!
      Плагин приема оплаты официальный от разработчика, текущая версия 1.3.
      Если не ошибаюсь, последний раз плагин обновлялся в конце 2018 года.
      По мере необходимости (изменения в Вукоммерс или у Яндекса), плагин будет обновляться.

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

  10. Хочется, чтобы в момент оплаты, юзеру не нужно было логиниться и регистрироваться, так как это предлагает сделать woocommerce, на странице /checkout.
    —————————————————
    Так я продаю цифровой товар, мне нужен только емайл юзера. Все остальные поля отключены.
    Независимо от того юзер logged-in или logged-out, мы спрашиваем у него только email, а после того как оплата произведена, система проверяет наличие указанного email в базе и если такой email существует, то ему присваивается соответствующий Мембершип, а если юзера с таким email нет, то создает юзера и ему на почту отправляет авто-сгенерированный пароль. (Задача, убрать лишние ненужные отвлекающие телодвижения, чтобы юзера ничего не отвлекало во время покупки.)
    —————————————————
    Вопрос #7: Как это реализовать?

    • Вариантов 2:
      1. Наиболее близкий к тому, что ты хочешь, и который ты можешь реализовать сам.
      2. Сделать в точности как ты хочешь, но для этого понадобится редактировать / добавлять php.

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

  11. Дмитрий, еще 1 вопрос.
    У вас в этой статье использован плагин Яндекс Денег. Где вы его взяли? Мне бы прям вот такой же как у вас получить. Можете ли вы как-то мне его на почту прислать? А то у меня плагин, но он добавляет дополнительную страницу, где ты выбираешь, оплатить картой или с кошелька, а у вас сразу на странице чекаут можно выбрать, с карты или с кошелька… Буду безмерно благодарен, если сможете мне его прислать:)

  12. Дмитрий, подскажите как отредактировать формы логин/регистрация/восстановление пароля/создание нового пароля?

    • Внешний вид можно отредактировать с помощью css,
      Вывод и расположение полей с помощью php,
      Или с помощью плагина форм, например, JetBlocks.

      • Понял спасибо! Ещё вопрос…

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

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

            Пример. У меня уже есть аккаунт. Но во время оплаты я не залогинен. И во время оплаты у меня есть поле емайл которое я заполняю и сразу плачу. А когда оплата произошла… происходит проверка есть ли такой емайл в базе и если есть ему доступ к курсу раскрывается

            Возможно ли такое реализовать?

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

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

Ответить

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

Techbear

Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.

WordPress   WooCommerce   Membership   Elementor   ACF

Ссылки

Ресурсы Elementor
Карта сайта
Поблагодарить
Отзывы
Заказать работу

Использованы картинки

Freepik

Обновления блога

Subsription - Gray Footer
Techbear