WOOCOMMERCE: ВСПЛЫВАЮЩАЯ ФОРМА ВХОДА, РЕГИСТРАЦИИ И УЧЕТНОЙ ЗАПИСИ

#wordpress #woocommerce #вебмастеринг #WpCraft #Интернетмагазин #ПлагиныWoocommerce #ПлагиныWordpress
❓Необходимо настроить форму входа/регистрации в интернет-магазине на Woocommerce, которая должна отображаться во всплывающем окне по нажатию кнопки. После регистрации в этом же модальном окне может отображаться информация со страницы учетной записи Woocommerce.
✅ Чтобы добавить форму регистрации/входа в попап окно можно использовать способ на двух плагинах — для попап ока и формы входа.
1. В настройках Woocommerce должна быть привязаная страница аккаунта с шорткодом [woocommerce_my_account].
2. Плагин Login/Signup Popup ( Inline Form + Woocommerce ) [XootiX] для настройки самой формы регистрации и входа. Также нужно включить замену формы страницы woocommerce myaccount.
3. Плагин Popup Maker [Popup Maker] для создания попап окна, но можно и самому сделать. Создаем всплывающее окно и добавляем в него шорткод [woocommerce_my_account]. Привязываем окно какой-то кнопке Входа.
4. После настройки всех плагинов. Проверяем работу и после авторизации или регистрации в всплывающем окне мы будем видеть обычную форму аккаунта Woocommerce. Но здесь есть один важный момент! На самой странице аккаунта (например она имеет слаг «my-account«) есть такие ссылки как «недавние заказы«, «платежный адрес и адрес доставки» и «изменить пароль и основную информацию«. Они имеют ссылки вида https://mysite.net/my-account/orders/ , https://mysite.net/my-account/edit-address/ и https://mysite.net/my-account/edit-account/ . Дело в том, что эти ссылки генерируются таким образом, что к текущей странице просто прибавляются /edit-address/ и т.д.
5. Когда мы находимся на странице аккаунта, то эти ссылки формируются правильно. Но, т.к. мы используем эту форму аккаунта в попап-окне, то она может находиться на любой странице. В этом случае ссылки на редактирование будут формироваться неправильно (Изображение 2). Например, если мы будем находиться на странице с URL https://mysite.net/o-kompanii/ , то эти ссылки для редактирования примут вид https://mysite.net/o-kompanii/edit-address/ и когда мы попробуем перейти в раздел редактирования, то выдаст 404, т.к. такой страницы нет, а есть https://mysite.net/my-account/edit-address/ .
Чтобы исправить ссылки нужно отредактировать шаблон Woocommerce приборной доски аккаунта:
Копируем файл из плагина /wp-content/plugins/woocommerce/templates/myaccount/dashboard.php в дочернюю тему (или просто тему если дочерняя не используется) так /wp-content/themes/mytheme-child/woocommerce/myaccount/dashboard.php (именно так — без ‘templates‘).
Редактируем скопированный файл dashboard.php. Нужно заменить часть кода — трем wc_get_endpoint_url добавить слаг нашей страницы аккаунта (в примере это «my-account») при условии что мы находимся не на странице аккаунта, а когда на странице аккаунта — должно быть как и было — Код №1.
PHP
## Замена кода в шаблоне панели аккаунта для корректного вывода ссылок редактирования
/* Заменяем код */
printf(
wp_kses( $dashboard_desc, $allowed_html ),
esc_url( wc_get_endpoint_url( 'orders' ) ),
esc_url( wc_get_endpoint_url( 'edit-address' ) ),
esc_url( wc_get_endpoint_url( 'edit-account' ) )
);
/* на условие */
/* Проверяем работает ли Woocommerce и является ли
текущая страница страницей аккаунта */
if( class_exists( 'woocommerce' ) && is_account_page() ) {
printf(
wp_kses( $dashboard_desc, $allowed_html ),
esc_url( wc_get_endpoint_url( 'orders' ) ),
esc_url( wc_get_endpoint_url( 'edit-address' ) ),
esc_url( wc_get_endpoint_url( 'edit-account' ) )
);
} else {
printf(
wp_kses( $dashboard_desc, $allowed_html ),
esc_url( wc_get_endpoint_url( 'my-account/orders' ) ),
esc_url( wc_get_endpoint_url( 'my-account/edit-address' ) ),
esc_url( wc_get_endpoint_url( 'my-account/edit-account' ) )
);
}
================
💾 См. статью