W tym samouczku dowiesz się, jak:
- Dodaj dynamiczne nazwy użytkowników, aby spersonalizować doświadczenie użytkownika,
- Styl nawigacji konta za pomocą CSS i dodaj ikony, aby uzyskać dopracowany wygląd,
- Buduj niestandardowe karty kont za pomocą Divi Builder,
- Podświetl aktywne karty za pomocą CSS
- I udoskonal stylizację treści w każdej sekcji.
Używane fragmenty kodu:
Poniżej znajdziesz wszystkie fragmenty kodu użyte w tym samouczku aby pomóc Ci stylizować i dostosowywać stronę konta WooCommerce w Divi. Te fragmenty obejmują wszystko, od dodawania dynamicznych nazw użytkowników po stylizację nawigacji po koncie i dostosowywanie kart kont.
Póki możesz kopiuj i wklej te bezpośrednio do Twojej witryny, my gorąco polecam najpierw obejrzeć
Aktualna nazwa użytkownika shortcode (PHP)
Ten fragment PHP tworzy niestandardowy shortcode [current_user_display_name], umożliwiając dynamiczne wyświetlanie nazwy wyświetlanej zalogowanego użytkownika na stronie konta WooCommerce.
function display_current_user_display_name () { $user = wp_get_current_user(); $display_name = $user->display_name; return $user->display_name;}add_shortcode(’current_user_display_name’, ’display_current_user_display_name’);
Stylizacja domyślnej nawigacji po koncie WooCommerce (CSS)
Ten fragment CSS usprawnia nawigację po koncie dzięki nowoczesnemu wzornictwu, obejmującemu kolory tła, dopełnienie, duży tekst i płynne przejścia. Stosuje również efekty najechania kursorem i wyraźnie stylizuje aktywną kartę.
nav.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0;} nav.woocommerce-MyAccount-navigation a { display: block; background: #f3f3f3; padding: 0.5em 1em; color: #000; font-weight: 600; text-transform: uppercase; font-size: .9em; letter-spacing: 0.02em; margin-bottom: 2px; transition: all .3s;} nav.woocommerce-MyAccount-navigation a:hover { background: mediumpurple; color: #fff;} nav.woocommerce-MyAccount-navigation li.is-active a { color: #fff; background: #3c3c3c;}
Dodawanie ikon do nawigacji po koncie (ET Icon Font)
Dodaje ten fragment Eleganckie Themes’ wbudowane ikonydo menu nawigacyjnego konta WooCommerce, nadając każdej pozycji menu unikalny identyfikator wizualny.
nav.woocommerce-MyAccount-navigation a::before { display: inline-block; content: ’\e012′; font-family: ’ETmodules’; margin-right:10px;} li.woocommerce-MyAccount-navigation-link–orders a::before { content: ’\e015′;} li.woocommerce-MyAccount-navigation-link–downloads a::before { content: ’\e020′;}
Dodawanie ikon do nawigacji po koncie (FontAwesome)
Jeśli wolisz FontNiesamowite ikonyw przypadku ikon ET użyj tego fragmentu CSS, aby zastosować niestandardowe ikony w łączach nawigacji konta.
nav.woocommerce-MyAccount-navigation a::before { display: inline-block; content: ’\f02e’; font-family: ’FontAwesome’; margin-right:10px;} li.woocommerce-MyAccount-navigation-link–orders a::before { content: ’\f07a’;} li.woocommerce-MyAccount-navigation-link–downloads a::before { content: ’\f019′;}
Ukrywanie domyślnej nawigacji po koncie podczas korzystania z niestandardowych kart
Ten fragment usuwa domyślną nawigację na koncie WooCommerce podczas zastępowania go niestandardową nawigacją przy użyciu Divi Builder.
nav.woocommerce-MyAccount-navigation { display: none;} body.woocommerce-account .woocommerce-MyAccount-content { width: 100%;}
Stylizacja aktywnej karty w niestandardowej nawigacji (Blurb module)
Style te stosują subtelny kolor tła i efekt cienia, aby wskazać aktualnie aktywną kartę, poprawiając użyteczność.
body.woocommerce-orders .tab-orders,body.woocommerce-downloads .tab-downloads,body.woocommerce-edit-account .tab-account,body.woocommerce-customer-logout .tab-logout { background: #fff; box-shadow: 0px -20px 20px -10px rgba(0,0,0,0.2);}
Stylizacja wiadomości i linków informacyjnych WooCommerce
Ten fragment CSS dostosowuje wiadomości i powiadomienia o sukcesie WooCommerce, stosując białe tło z fioletową obwódką, jednocześnie stylizując pasujące linki.
#dl-account .woocommerce-info,#dl-account .woocommerce-message{ background: #fff!important; color: #333!important; border: 2px #8300e9 solid;} #dl-account .woocommerce-info a:not(.button),#dl-account .woocommerce-message a:not(.button) { color: #8300e9; text-decoration: underline;}
Stylizacja zawartości mojej karty konta
Style te udoskonalają różne sekcje na stronie konta, w tym tabele zamówień, formularze kont i dane klienta, zapewniając dopracowany i spójny wygląd.
/* Order tables */#dl-account table.shop_table,#dl-account table.shop_table td,#dl-account table.shop_table th{ border-width: 2px;} #dl-account table.shop_table td,#dl-account table.shop_table th { padding:10px 15px} #dl-account table.my_account_orders { font-size: 1em;} /* Order details */section.woocommerce-order-details { margin-top: 40px;} #dl-account .woocommerce-customer-details address { border-width: 2px; padding: 30px;} /* Account Forms */#dl-account label { font-weight: 600; color: #333;} #dl-account input { margin-bottom: 1em; background: transparent; border: 2px #ccc solid; font-weight: 500; border-radius: 5px;} #dl-account input:focus { border-color: mediumpurple;} #dl-account form.edit-account button.button { padding: 1em 2em!important;} /* Italic text */#dl-account em { font-style: normal;}