Ustawienia menu bocznego na stronie moje konto WordPress / Woocommerce

Utworzone przez Jakub Przepióra | sierpień 7, 2022 | Problemy z branży

Jak ustawić menu boczne na stronie "moje konto" w WordPress / Woocommerce

Aby zmienić ustawienia menu bocznego na podstronie moje konto w WordPress Woocommerce, możemy użyć wtyczek, ale czym więcej wtyczek tym wolniej będzie chodzić nasza strona. Warto dlatego użyć kodu.

Zmiana kolejności wyświetlania zakładek

Poniższy kod należy wkleić w pliku functions.php na samym końcu. Jeżeli taki plik nie istnieje, można go na spokojnie utworzyć i dodać kod, trzeba pamiętać wtedy o dodaniu <?php na początku kodu.

function reorder_my_account_tabs() {
$new_menu_order = array(
'orders' => **( 'Previous Orders', 'woocommerce' ),
'edit-address' => **( 'Addresses', 'woocommerce' ),
'edit-account' => **( 'Account Details', 'woocommerce' ),
'payment-methods' => **( 'Payment Methods', 'woocommerce' ),
'dashboard' => **( 'Dashboard', 'woocommerce' ),
'customer-logout' => **( 'Logout', 'woocommerce' ),
);
return $new_menu_order;
}
 
add_filter( 'woocommerce_account_menu_items', 'reorder_my_account_tabs' );

UWAGA!!!
Jeżeli nie widzisz zmian upewnij się, że nie masz pamięci CACHE.

Połączenie wszystkich zakładek na podstronie moje konto

Załóżmy, że wszystkie zakładki chcemy mieć na pierwszej stronie zaraz po wejściu na swoje konto w WordPress. Coś jak poniżej:

Usuwamy całe menu boczne

Jest ono zapisane jako tablica w woocommerce_account_menu_items, więc napiszemy prostą funkcję, która będzie pobierać jako argument tablicę z tymi elementami. Następnie warto użyć pętli foreach, dzięki której przejdziemy przez wszystkie elementy nie znając długości tablicy, a następnie każdy element usuwamy.

add_filter( 'woocommerce_account_menu_items', 'remove_tabs_my_account', 999 );
 
function remove_tabs_my_account( $items ) {
    foreach ($items as $key => $value) {
        unset($items[$key]);
}
return $items;
}

Następnie dodajemy do naszego kokpitu/dashboard poszczególne zakładki, a raczej ich zawartość. Warto też jako trzeci argument do add_action() dodać jego wagę, dzięki czemu możemy narzucić kolejność.

UWAGA!!!
Kokpit/dashboard jest wyjątkiem! Aby dodać do niego inne zakładki, nie trzeba dopisywać końcówki „endpoint”, tak jak to bywa w innych przypadkach.

Jeżeli będziemy chcieli dodać do innej zakładki niż dashboard, musimy stosować szablon: woocommerce_account_ENDPOINTSLUG_endpoint.

add_action( 'woocommerce_account_dashboard', 'woocommerce_account_edit_account', 10 ); add_action( 'woocommerce_account_dashboard', 'woocommerce_account_edit_address', 30 ); add_action( 'woocommerce_account_dashboard', 'woocommerce_account_orders', 50 );

Lista nazw hook'ów poszczególnych zakładek

Poniżej lista nazw hook'ów poszczególnych zakładek, dokładniej ich zawartości z moje konto:

• woocommerce_account_orders
• woocommerce_account_view_order
• woocommerce_account_downloads
• woocommerce_account_edit_address
• woocommerce_account_payment_methods
• woocommerce_account_add_payment_method
• woocommerce_account_edit_account

Dodanie guzika wyloguj

Aby dodać guzik wyloguj na samym dole naszego konta, tworzymy prostą funkcję. Wyświetla ona link za pomocą funkcji wp_logout_url().

Przykład poniżej:

function custom_logout_button() {
    echo "<a id='account_logout--tab' class='tab-header-my-account' href='".wp_logout_url()."'><h3>Wyloguj się</h3></a>";
}

Następnie dodajemy ją podobnie jak powyżej, czyli:

add_action( 'woocommerce_account_dashboard', 'custom_logout_button', 60 );`