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ć w na pierwszej stronie zaraz po wejściu na swoje konto w WordPress. Cos jak poniżej:
Usuwamy całe menu boczne. Jest ono zapisane jako tablica w
woocommerce_account_menu_items więc napiszemy prostą funkcje która będzie pobierać jako argument tablice 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 );
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ą funkcje. 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 );
Mam nadzieję że pomogłem, w razie pytań zapraszam do komentowania.
A jak dodać swoją zakładkę np short code lub szkolenie
add_action( 'init', 'nowa_zakladka');function nowa_zakladka() {
add_rewrite_endpoint( 'new-item', EP_ROOT | EP_PAGES );
}
następnie dodajemy sobie funkcje ze zmiennymi na przykład:
add_filter( 'query_vars', 'new_item_vars' );
function new_item_vars( $vars ) {
$vars[] = 'new-item';
return $vars;
}
a teraz dodajemy do naszego menu
add_filter( 'woocommerce_account_menu_items', 'add_new_item_tab' );function add_new_item_tab( $items ) {
$items['new-item'] = 'New Item';
return $items;
}
a na końcu dodajemy zawartość zakładki
add_action( 'woocommerce_account_new-item_endpoint', 'add_new_item_content' );function add_new_item_content() {
echo 'hello world :)';
do_shortcode('[shortcode]');
}
i chyba to by było na tyle 🙂 mam nadzieje ze pomogłem lepiej to opisze w następnym wpisie 🙂
Exactly!