Customize My Account For WooCommerce
Click on the Settings and you will be presented with two different options Settings and Endpoints. You will use both of them to change the existing content and layout of your WooCommerce Account Dashboard. Let’s discuss both of them one by one.
Here you can find different options to customize the dashboard content. Each option is described below:
Custom Avatar: Enabling this option will show User Avatar in the Account Dashboard and users will be able to upload an image of their choice.
You can disable this option if you do not want your users to upload their avatar from their account dashboard
Endpoint Icon: Enabling this option will allow you to set icons beside your endpoints. You can choose between multiple icons that suit your endpoint name.
Endpoint Icon Position: The selected endpoint icons can be positioned either right or left side of the endpoint. You can choose between the options right and left as per your choice.
Default Endpoint: You can choose any endpoint from all the endpoints to display by default when a user visits the My Account Page. Suppose, you choose downloads as the default endpoint then the downloads tab will be shown to the user when they visit the My Account Page.
Endpoints
Here you will find multiple options to customize an endpoint. You will also be able to create Groups, Links, and add new Endpoints. Every feature is described below:
An endpoint that appears by default or a created endpoint has the following options that can impact its appearance on the My Account Page.
Enable: Check this option to enable or disable the endpoint.
Label: You can type a name for your endpoint in this input box.
Icon: Choose an icon to display alongside your endpoint from multiple icons.
Class: You can type a class name here to reflect specific design via custom CSS codes.
User Roles: Select one or many user roles, you want the endpoint to be displayed. Leaving it blank will show the endpoint to all the user roles.
Custom Content: Type in your custom content to display anything that you want to display under the endpoint. It could be links, shortcodes, media, text, etc.
Slug: (This option appears only in the case of custom endpoint and not the default ones.) Type in your custom slug for the endpoint that you have created. By default, a slug is generated based on the Endpoint Name but you can change it as per your requirement. 
Add Group
This option will allow you to make a group of endpoints. It will act as a parent and it can have sub-items inside it. The sub-items can be any endpoint.
Click on the Add Group link on the top right and you will be asked to enter the Group Name. Type in the name of the group and hit enter.
After creating a group, you will see it listed in the left section where other endpoints are listed. You can directly differentiate a Group, Endpoint, or a Link by an indexing letter G, L, or E on the leftmost part of the label.
You can then click “ ≣ ” and drag an existing endpoint/link or create and drag an endpoint/link to the group that you made.
Except for Remove, all other options of the group will seem familiar since they were already described in the Endpoints section.
Remove: Clicking on this button will remove the created group.
Add Endpoint:
This option will allow you to add an endpoint to the account page. You can add as many endpoints as you want.
Click on the Add Endpoint link on the top right and you will be asked to enter the Endpoint Name. Type in the name of the endpoint and hit enter.
After creating an endpoint, you will see it listed in the left section where other endpoints are listed. You can directly differentiate a Group, Endpoint, or a Link by an indexing letter G, L, or E on the leftmost part of the label.
The purpose of all the options of the custom endpoint will seem familiar since they were already described in the Endpoints section.
Add Link
This option will allow you to add a link to the account page. You can add as many links as you want.
Click on the Add Link button on the top right and you will be asked to enter the Link Name. Type in the name of the link and hit enter.
After creating a link, you will see it listed in the left section where other endpoints are listed. You can directly differentiate a Group, Endpoint, or a Link by an indexing letter G, L, or E on the leftmost part of the label.
Except for URL & Open in New Tab, all other options of the group will seem familiar since they were already described in the Endpoints section.
URL: Enter the URL of the page which you want to visit when. Example: https://www.google.com
Open in New Tab: Enabling this option will open the link in a new tab when you click on it.
Note: You will need to hit the Save Changes button if you want all the changes to be saved. Clicking on Restore Default will revert all the settings to the default state (for both Settings and Endpoints option)when the plugin was installed.
Account Dashboard Customization
Click on the Customizer and you will be redirected to the live editing panel of the plugin where you will see your WooCommerce My Account Page on the right and the customization tools on the left.
You will see that there are multiple Customization Tools. The tools are discussed below:
-
- Wrapper
The Wrapper resembles the total outline and the background of the Account Page. The options that can be configured from here are:
-Navigation Style
-Font Family
-Font Size
-Background Color
-Padding
-Margin - Color
The color option will let you change the color of certain elements of the account page. The elements whose color can be changed from here are:
-Heading Color
-Body Color
-Link Color
-Link Hover - Avatar
The Avatar option lets you customize the avatar that appears on the account page. Here is what you can change from this option:
-Avatar Layout
-Avatar Type
-Padding - Navigation
The Navigation Option lets you customize the Account Page menu. Below are the list of customization options that you can use to customize.
#Normal State
-Text Color
-Background Color
-Border
-Border Width
-Border Color#Hover State-Text Color
-Background Color
-Border
-Border Width
-Border Color#General
-Padding - Input Field
The Input Option lets you customize the Input section of My Account Page. Below is the list of Customization options that you can use to customize.
#Normal State
-Text Color
-Background Color
-Border
-Border Width
-Border Color #Focus State
-Text Color
-Background Color
-Border
-Border Width
-Border Color #General
-Padding - Button
The Button Option lets you customize the buttons present in the My Account Page. Below is the list of Customization Options that you can use to customize the buttons.
#General
–Font Size
–Line Height
–Padding
–Margin
#Normal State
–Text Color
–Background Color
–Border
#Hover State
–Text Color
–Background Color
–Border
–Border Width
–Border Color - Additional CSS:
As the name suggests itself, Additional CSS can be used to add your own CSS codes to customize your account page, the way you want. You can see a CSS editor in the customizer where you can add all the CSS codes you want.
Restoring the Settings and Customization
You can easily Restore all your settings to default settings with this option. If you want to start over setting things up from scratch again then you have an option to get back to the initial state with few clicks.
To Restore your settings, Click on Customize My Account > Settings and you will see the Settings Tab. In the Tab, right next to the Save Changes button, you will see the Restore Defaults button. Click on it and the restore dialogue box will appear.
Note: You also have the Restore Defaults button, right next to Save Changes buttons in the Endpoints Tab too. Both of them have similar functionalities.
You will be provided with options to choose what you want to restore. You can choose between Settings and Design Customization. Simply select the desired ones and then click on Reset. All the changes will be reverted to default.
Compatibility with third party WooCommerce plugins
Currently, the plugin is by default compatible with followin plugins
- WooCommerce Bookings by WooCommerce
- WooCommerce Subscription Downloads by WooCommerce
- WooCommerce Subscriptions by WooCommerce
- WooCommerce Memberships by SkyVerge
So, whenever the plugin is activated, the endpoints added by other plugins except the above four will be overridden. You can follow the following steps if you want to add the third party plugins endpoint.
We are going to take Awesome Support – WordPress HelpDesk & Support Plugin by Awesome Support Team as an example to demonstrate adding the endpoints.
Step 1: Deactivate the Customize My Account for WooCommerce plugin and activate the Awesome Support plugin.
Step 2: Refresh my account page and take a note of the new endpoints added by the Awesome Support plugin.
As you can see, Awesome Support has added two endpoints: Open a support ticket and My tickets. We are going to copy the link of those endpoints by right clicking on them, and selecting the copy link address. The links should be similar to below:
- Open a support ticket = https://yourwebsite.com/my-account/0/
- My tickets = https://yourwebsite.com/my-account/my-tickets/
Step 3 : Activate the Customize My Account for WooCommerce plugin and go to my account page again. As you can see, there are no endpoints added by the Awesome Support.
Step 4: Goto to the Settings -> Endpoints of the Customize My Account for WooCommerce plugin.
Step 5 : Add a link. Set the label as ‘Open a support ticket’ and URL as https://yourwebsite.com/my-account/0/ and save it.
Step 6: Add a link. Set the label as ‘My tickets’ and URL as https://yourwebsite.com/my-account/my-tickets/ and save it.
Step 7: Refresh the my account page, the Awesome Support endpoints should be there now, and work as expected before.
Resolving JS conflicts with other plugins
↑ Back to top
Enable debug mode: By default, WordPress loads minified versions of CSS and JS files so as to lower the load times. Enable debug mode feature is specially introduced for the testing purposes of the plugin itself during the development time. As we know, WordPress gives a constant that we can add to our wp-config.php file called SCRIPT_DEBUG. WordPress will automatically load the non-minified versions of all CSS and JS files when this constant is defined as TRUE.
Now you can do all these things by simply clicking the checkbox inside the plugin setting rather than going to the wp-config.php file. By default, the debug mode is disabled which means it loads minified files. If you enable this checkbox, unminified version of JS files will load.
Frontend Libraries: You can also enable/disable CSS and javascript libraries that are loaded in WooCommerce MyAccount Page to resolve library conflict with other plugins. By default, all the CSS and JS libraries will load on the front end. Only in the case of a conflict, you can disable the libraries to load on the frontend and check if this resolves the conflict issue.
Редактируем меню личного кабинета WooCommerce (как добавить / удалить пункт)
В блоге я рассматривал около десятка задач по навигации на сайте: были списки ссылок, хлебные крошки, работа с пунктами меню админки и т.п. Сегодня чуть более экзотическая ситуация, которая случается не так часто, но все же имеет место быть. Речь пойдет о личном кабинете покупателя в WooCommerce, где также используется элемент навигации. Будем учиться его модифицировать — а именно добавлять новые пункты либо скрывать ненужные. Вторая задача встречается почаще, но мы уделим внимание обеим.
Итак, плагин магазина WooCommerce разрешает зарегистрироваться при покупке (и не только) дабы просматривать историю заказов, сохранять определенную информацию о себе и дальше при желании ее менять. Визуально это выглядит приблизительно так:
Включение/выключение опции находится в настройках модуля в разделе «Учетные записи». Вы можете вообще убрать создание аккаунтов либо сделать это только при совершении покупки.
Также следует отметить, что под личный кабинет покупателя в WooCommerce требуется создать отдельную страницу, которую во вкладке «Дополнительно» вы выбираете для соответствующей функции:
Теперь рассмотрим парочку вопросов по теме…
Как убрать пункт из меню личного кабинета
В принципе, для реализации даже не надо никакого кода — просто переходите в знакомый уже нам раздел «Дополнительно», где будет параметр «Конечные точки учётной записи» (Account endpoints).
Здесь удаляете значение того пункта, который вам не нужен. Не забудьте при этом сохранить изменения.
Теоретически, есть метод скрытия элемента меню с помощью сниппета для файла functions.php через специальную функцию unset.
После выполнения данного примера в аккаунте пользователя исчезнет ссылка «Адреса». Если вы хотите избавиться от еще каких-то страниц, раскомментируйте соответствующие строки (уберите символы //).
Важно понимать, что применение хака без удаления конечных точек «endpoints» лишь скрывает определенный раздел, но физически по прямому URL-адресу он остается доступен.
Новый пункт в личном кабинете
Предыдущий и следующий хаки взяты из этой статьи блога разработчика Misha Rudrastyh. Если нам просто надо вставить произвольный линк в навигацию, то код для файла функций выглядит следующим образом:
В первой части решения вы просто добавляете один или несколько элементов в массив, отвечающий за меню. Во второй — подставляете нужный вам адрес в переменную $url (разрешается как локальный, так и внешний).
Финальной «вишенкой на торте» будет украшение в виде иконки через CSS стили. Если у вас подключен шрифт Font Awesome, можете использовать его, либо встроенные иконки WP и другие варианты.
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link—anyuniquetext123 a:before
Добавление страниц в личном кабинете
В данном случае мы не просто создаем линк в меню, но и сделаем так, что при клике пользователь будет продолжать находится в своем аккаунте + увидит соответствующий контент справа. Весь сниппет состоит из 4х шагов:
/* * Step 1. Add Link to My Account menu */ add_filter ( ‘woocommerce_account_menu_items’, ‘misha_log_history_link’, 40 ); function misha_log_history_link( $menu_links ) < $menu_links = array_slice( $menu_links, 0, 5, true ) + array( 'log-history' => 'Log history' ) + array_slice( $menu_links, 5, NULL, true ); return $menu_links; >/* * Step 2. Register Permalink Endpoint */ add_action( ‘init’, ‘misha_add_endpoint’ ); function misha_add_endpoint() < // WP_Rewrite is my Achilles' heel, so please do not ask me for detailed explanation add_rewrite_endpoint( 'log-history', EP_PAGES ); >/* * Step 3. Content for the new page in My Account, woocommerce_account_
_endpoint */ add_action( ‘woocommerce_account_log-history_endpoint’, ‘misha_my_account_endpoint_content’ ); function misha_my_account_endpoint_content() < // of course you can print dynamic content here, one of the most useful functions here is get_current_user_id() echo 'Last time you logged in: yesterday from Safari.'; >/* * Step 4 */ // Go to Settings > Permalinks and just push "Save Changes" button. Приятно радует, что в коде автора есть детальные пояснения — респект. Важно! Не забудьте выполнить последний 4 этап — перейти в раздел настроек админки «Постоянные ссылки» и кликнуть по кнопке «Сохранить».
Аналогично в примере также имеется иконка для меню:
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link—log-history a:before
После внедрения текущего сниппета появится ссылка с названием «Log history». При переходе по ней он увидит текст, заданный в функции misha_my_account_endpoint_content. Все значения, разумеется, можно менять.
Контент до и после меню в аккаунте пользователя
В качестве бонуса Misha Rudrastyh приводит еще один небольшой хак. С его помощью у вас получится добавить любой текст/HTML непосредственно перед и после навигационного элемента (<nav>).
<?php add_action(‘woocommerce_before_account_navigation’, ‘misha_some_content_before’); function misha_some_content_before() < echo 'blah blah blah before'; >add_action(‘woocommerce_after_account_navigation’, ‘misha_some_content_after’); function misha_some_content_after()< ?> <p>blah blah blah after</p> <?php >
При внедрении решения следует учитывать, что блок <nav> имеет свойство float:left в CSS.
Итого. В принципе, у меня по работе встречалась только первая рассмотренная задача — убирал лишние линки в WooCommerce кабинете покупателя дабы посетители не кликали то, что им не нужно (загрузки). Однако в процессе поиска инфы нашел заметку Misha Rudrastyh и решил ее перевести. Вставка произвольных ссылок и создание отдельных страниц вам пригодится, если вдруг попадется заказчик с нестандартными запросами.
Понравился пост? Подпишись на обновления блога по
RSS, 
Email или 
twitter!
Оцените статью:Личный кабинет Woocommerce и все что с этим связано
Собираем различные полезные и интересные решения связанные с личным кабинетом Woocommerce, а также формой входа в ЛК.
Логин WC в шапке
Создаем функцию ссылки в личный кабинет WC
Выводим в любом месте сайта:
Пункты меню в личном кабинете
Удаляем любые из пунктов меню ЛК:
Добавление произвольной вкладки с ссылкой:
Добавление произвольной вкладки с содержимым:
Чтобы вкладка заработала необходимо пересохранить Постоянные ссылки.
Чтобы изменить заголовок страницы личного кабинета используем функцию:
А чтобы фильтр is_wc_endpoint_url действовал на произвольные эндпоинты, то их нужно добавить к этому фильтру:
Как изменить админку WooCommerce
По умолчанию админка Вукоммерс выглядит довольно просто, но с помощью пейдж-билдера можно изменить ее интерфейс и добавить функционал.
В этом гайде я буду настраивать админку Вукоммерс для мембершип сайта с помощью редактора Elementor. Вы можете использовать другой редактор, или для других целей, например, для админки интернет-магазина.
В этой статье вы узнаете 4 простых шага для кастомизации админки Вукоммерс.
Внимание: Перед тем, как начнете, сделайте бэкап.
1. Отключите ненужные эндпоинты
После установки WooCommerce админка выглядит так:
По умолчанию в админке Вукоммерс есть несколько эндпоинтов, которые находятся в WooCommerce — Настройки — Дополнительно — Эндпоинты учётной записи:
Чтобы отключить эндпоинт, нужно удалить его адрес.
Мембершипу не нужна доставка, поэтому вы можете отключить эндпоинт Адреса. Если вам не нужно давать доступ к файлам, вы можете отключить Загрузки.
После этого админка Вукоммерс будет выглядеть так:
2. Измените текст на главной странице (dashboard.php)
Стандартный текст на главной странице выглядит так:
Из главной страницы аккаунта вы можете посмотреть ваши недавние заказы , настроить платежный адрес и адрес доставки , а также изменить пароль и основную информацию .
В предыдущем шаге вы отключили эндпоинт с адресами, поэтому вы можете удалить часть фразы «настроить платежный адрес и адрес доставки».
Чтобы изменить этот текст, нужно скопировать файл dashboard.php из папки WooCommerce в папку с дочерней темой и отредактировать несколько строк.
- Скопируйте файл из /wp-content/plugins/woocommerce/templates/my-account/dashboard.php (или скачайте с Github).
- Создайте папку /wp-content/themes/текущая_тема/woocommerce/myaccount .
- Вставьте файл dashboard.php в созданную папку.
- Отредактируйте скрипт, который выводит этот текст:
Теперь админка выглядит так:
Если такая админка вас уже устраивает, то вы можете оставить так, и сделать еще две вещи, — переименовать эндпоинты и / или изменить их порядок в меню.
а. Переименуйте эндпоинты
Чтобы переименовать эндпоинты, добавьте этот код в functions.php дочерней темы или с помощью специального плагина:
Удалите лишние эндпоинты и измените названия эндпоинтов в строках 4-9.
б. Измените порядок эндпоинтов
Чтобы изменить порядок эндпоинтов, поменяйте строки местами:
Если вы не хотите оставлять стандартную админку, но хотите создать свою админку с помощью пейдж-билдера, то вам нужно отключить меню админки слева и открыть страницу Мой аккаунт в пейдж билдере.
3. Отключите стандартное меню админки
Чтобы отключить стандартное меню админки, добавьте этот код во Внешний вид — Настроить — Дополнительные стили или в style.css вашей дочерней темы:
Теперь консоль Вукоммерс должна выглядеть так:
4. Создайте интерфейс с помощью пейдж-билдера
С помощью пейдж-билдера откройте страницу . /my-account/ . Страницы эндпоинтов наследуют дизайн страницы Мой аккаунт.
Динамический текст с именем пользователя я сделал с помощью Elementor Pro. Альтернатива — JetEngine.
Если нужно, здесь же вы можете вывести фотографию пользователя и другие поля, например, имя, электронная почта, телефон, и так далее.
Для вывода полей вам понадобится Elementor Pro. Если вам нужно выводить кастомные поля, вам понадобится плагин Advanced Custom Fields или JetEngine.
Бесплатно можно сделать с помощью снипета в файл functions.php. Добавьте этот код в functions.php дочерней темы или с помощью специального плагина:
Вставьте этот шорткод в виджет Текстовый редактор: [current-username]
Добавьте свой текст перед и после шорткода.
Я сделал меню с помощью 4-х виджетов Картинка с текстом и ссылками на эндпоинты. Вы можете сделать по-своему.
Сделайте отображение оплаченных товаров (мембершипов) на главной странице, и добавьте шорткоды мембершипа, чтобы оплатившие доступ видели только свои мембершипы.
Все добавленные элементы пейдж-билдера будут отображаться на всех эндпоинтах админки Вукоммерс. Чтобы отключить показ ненужных элементов на некоторых эндпоинтах, вы можете использовать бесплатный плагин Visibility Logic for Elementor или Dynamic Visibility for Elementor, или платный плагин PAFE Pro.
Зайдите как пользователь и пройдите по всем страницам админки. Не забудьте про эти страницы:
- Страница логина,
- Информация о заказах (/view-order/)
- Выход (/customer-logout/)
5. Плагины
Все это можно сделать не вручную, а с помощью платного плагина JetEngine, который встраивается в Вордпресс и Elementor.
Это большой комбайн, с помощью которого вы можете создать кастомный тип записей, кастомные мета поля и много других вещей, в том числе собственную админку Вордпресс, Вукоммерс или любую другую.
Если вы не хотите использовать пейдж-билдер, вы можете попробовать бесплатный плагин Custom My Account for Woocommerce.
Current Version: 2.1
Last Updated: 12.06.2022
Довольно простой плагин с довольно простыми возможностями редактирования админки.
В платной версии Custom My Account for Woocommerce вы можете загружать и отображать фотографию пользователя и добавлять шорткоды на нужные страницы админки.
Создайте элементы админки в пейдж-билдере, и вставьте их шорткоды на ваши эндпоинты.
Плагин, который позволяет редактировать и добавлять собственные закладки в админке Вукоммерс, добавлять фотографию пользователя и формы входа и регистрации — WordPress Profile Builder Plugin.
Еще один более продвинутый вариант — платный плагин YITH WooCommerce Customize My Account page.
Заключение
Это общий план по кастомизации админки Вукоммерс. Вы можете изменить шаги под свои требования или использовать другой пейдж-билдер.
- Оставьте нужные эндпоинты,
- Отредактируйте текст из файла dashboard.php,
- Отключите стандартное меню админки Вукоммерс,
- Создайте интерфейс админки с помощью пейдж-билдера и настройте видимость элементов на всех эндпоинтах.
Здесь вы можете посмотреть, как выглядит админка на этом сайте.
Читайте также:
Надеюсь, статья была полезна. Оставляйте комментарии.
Похожие записи
Как вывести цену товара WooCommerce в любом месте сайта
Как настроить Google Analytics для WooCommerce с помощью плагина
Как изменить порядок колонок в Elementor
43 комментария
Артем
Добрый день, Дмитрий.
Подскажите пожалуйста, как сделать, чтобы в письме о созданном аккаунте в woocommerce, было подставлено имя клиента?
В настройках включено «При создании аккаунта автоматически генерируется имя пользователя, основанное на имени, фамилии или адресе электронной почты», для страницы оформления заказа установлен плагин для удаления ненужных полей, оставил только имя и почту, но в таком случае woocoomerce вставляет в письмо имя по почте, к примеру если почта [email protected] , то в письме artem313, а не имя Артем. Спасибо.
Дмитрий Быченко
Здравствуйте, не знаю,
К сожалению, не могу ответить.Артем
Здравствуйте, Дмитрий. Скажите пожалуйста, как Вы сделали, чтобы отображалось имя, которое человек вводит при регистрации, а не имя пользователя сгенерированное woocommerce?
Дмитрий Быченко
Здравствуйте, Артем,
Для этого нужно, чтобы ваш посетитель заполнил либо стандартное Вордпресс поле Имя, либо вам нужно создать свое поле.
После этого нужно вывести это поле.
По-моему, в JetEngine можно выбрать и вывести стандартное поле Имя, в Elementor Pro — не помню.Юлиана
Здравствуйте, так легко понимать изложенный вами материал. Спасибо вам большое, за это!
Если найдется время подскажите, пожалуйста, такой вопрос:
убираю в меню «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 ? Может хук другой или адрес страницы не правильно?
- Wrapper