Jak ukryć widżety w WooCommerce

Szukasz sposobów na ukrycie widżetów w WooCommerce ? Jeśli tak, to trafiłeś we właściwe miejsce. W tym samouczku pokażemy Ci wszystkie możliwe sposoby ukrywania lub usuwania widżetów Twojego sklepu internetowego.

Czym są widżety w WordPressie?

Widgety to różnego rodzaju treści lub elementy, które można dodawać do paska bocznego, stopki i innych obszarów witryny. Pozwala ustawić określone funkcje , takie jak kalendarz, zegar, prognoza pogody i tak dalej. W zależności od widżetów pomagają nawet w zwiększeniu funkcjonalności serwisu.

W większości motywów dostępna jest cała seria standardowych widżetów. Na przykład widżet „Tekst” może służyć do wyświetlania prostego tekstu (w tym HTML). Podobnie są też widżety dla obrazów, audio, menu, kategorii, RSS, ostatnich komentarzy i nie tylko.

W zależności od charakteru Twojej firmy możemy nie zawsze potrzebować wszystkich widżetów dostarczanych przez motyw. Więc najlepszą rzeczą do zrobienia jest ich ukrycie. Ale zanim ukryjesz widżety w WooCommerce, musisz zrozumieć, dlaczego może być konieczne wyłączenie lub nawet usunięcie widżetów.

Dlaczego warto ukrywać widżety w WooCommerce?

Niezależnie od tego, czy chcesz zwiększyć zadowolenie klientów, czy sprawić, by Twoja witryna WooCommerce była bardziej solidna, widżety zajmują kluczowe miejsce w rozwoju Twojej witryny. Większość widżetów jest dostarczana z rdzeniem WordPress i jest dostępna w każdej instalacji od samego początku. Ale niektóre widżety mogą nie być wymagane w Twoim sklepie, w zależności od Twoich klientów.

Załóżmy, że masz witrynę WooCommerce, w której chcesz dodać filmy instruktażowe. Wtedy możesz potrzebować do tego wielu widżetów wideo. Ale jednocześnie, jeśli masz ze sobą widżety audio, nie ma to sensu i może wydawać się niepotrzebne.

Podobnie Twoja witryna może zawierać widżety, takie jak ostatnie posty/komentarze, blok subskrypcji wiadomości lub prognoza pogody. Jeśli tak, bardzo nie na miejscu byłoby pokazywanie ich na każdej stronie Twojej witryny. W przypadku stron WooCommerce, takich jak strona kasy lub strona koszyka, te widżety nie są wymagane. Możesz wyłączyć komentarze w WordPressie, ale to rozwiązanie nie dotyczy wszystkich widżetów.

Ponadto posiadanie dodatkowego elementu na froncie witryny WooCommerce może spowolnić witrynę , co bezpośrednio wpływa na wrażenia użytkownika. Dlatego najlepiej ukryć w WooCommerce widżety, które nie dodają dużej wartości użytkownikom i poprawiają użyteczność witryny jako całości.

Jak ukryć widżety WooCommerce?

Istnieją dwie różne metody ukrywania widżetów w WooCommerce.

1. Z wtyczką
2. Programowo

Zanim zaczniesz z samouczkiem, upewnij się, że poprawnie skonfigurowałeś WooCommerce, nie pomijając żadnych kroków.

1. Ukryj widżety w WooCommerce za pomocą wtyczki

Domyślna funkcja WooCommerce oferuje bardzo mało funkcjonalności , jeśli chodzi o widżety. Nie pozwala ukryć widżetów w WooCommerce. Jeśli więc chcesz ukryć lub wyłączyć widżety na określonej stronie lub poście, powinieneś użyć dedykowanej wtyczki.

Istnieje kilka darmowych i premium narzędzi, jeśli chodzi o ukrywanie widżetów. To jedne z najlepszych narzędzi, których możesz użyć do ukrycia tych, które nie są ważne dla Twojej witryny WooCommerce.

Opcje widżetów

Widget Options to wtyczka WordPress, która zapewnia pełną kontrolę nad widżetami. Z ponad 100 000 instalacji, jest to jedna z najpopularniejszych wtyczek do zarządzania widżetami w WordPress. Dlatego możesz łatwo ukryć lub usunąć widżety na swojej stronie za pomocą tej wtyczki.

Ma przyjazny dla użytkownika interfejs i bezproblemową integrację z WooCommerce, które można bez wysiłku wykorzystać do dostosowywania widżetów. Możesz także znaleźć konkretny widżet, który chcesz edytować, za pomocą filtra wyszukiwania widżetów na żywo.

Kluczowe cechy

• Ukryj tytuł widżetu
• Importuj lub eksportuj widżety
• Wyszukiwanie widżetów na żywo
• Pokaż lub ukryj widżety na określonym urządzeniu
• Widget Logic – Warunkowe ukrywanie i pokazywanie widżetu

Cena £

Opcja Widget jest dostępna zarówno w wersji bezpłatnej, jak i premium. Możesz rozszerzyć funkcje już od 19 USD rocznie.

Wyłącz widżet

Widget Disable to darmowa wtyczka, dzięki której możesz w bardzo prosty sposób ukryć widżety paska bocznego. Wtyczka wyświetla wszystkie widżety w Twojej witrynie i pozwala wybrać, który widżet chcesz ukryć. Co więcej, możesz nawet wyłączyć widżety pulpitu nawigacyjnego, aby obszar pulpitu był mniej zagracony.

Wtyczka jest również lekka i nie przeciąża ani nie wpływa negatywnie na szybkość Twojej strony internetowej. Ponadto jest to wtyczka przyjazna dla programistów, a nawet zapewnia filtry, aby wykluczyć widżety na pasku bocznym lub pulpicie nawigacyjnym.

Kluczowe cechy

• Nadaje się zarówno dla początkujących, jak i programistów
• Prosty i łatwy w użyciu interfejs
• Wyłącz widżety paska bocznego i pulpitu nawigacyjnego
• Dostępne są filtry do modyfikacji plików w głównej części

Cena £

Widget Disable to darmowa wtyczka. Możesz go pobrać z oficjalnego repozytorium wtyczek WordPress.

Ukryj widżety w WooCommerce za pomocą wtyczki Wyłącz widżet

Teraz, gdy przyjrzeliśmy się wtyczkom, przyjrzyjmy się również, jak z nich korzystać. W tej demonstracji ukryjemy widżety w WooCommerce za pomocą wtyczki Widget Disable . Jest to darmowa wtyczka i bardzo łatwa w użyciu z prostym interfejsem, który doskonale wykonuje swoją pracę.

Ale jeśli wolisz korzystać z dowolnej innej wtyczki, możesz to zrobić. Proces jest podobny bez względu na to, jakiej wtyczki używasz. Ale musisz go zainstalować i aktywować, zanim zaczniesz go używać.

1.1. Zainstaluj i aktywuj wtyczkę

Aby zainstalować wtyczkę, przejdź do Wtyczki>Dodaj nowy z pulpitu WordPress i wyszukaj wtyczkę Widget Disable w pasku wyszukiwania znajdującym się po prawej stronie. Następnie kliknij Zainstaluj teraz i aktywuj po zakończeniu instalacji.

Jeśli korzystasz z wtyczki premium lub innej bezpłatnej wtyczki, która nie jest zawarta w repozytorium wtyczek WordPress, musisz ją pobrać i zainstalować ręcznie. Zapoznaj się z naszym przewodnikiem, jak ręcznie zainstalować wtyczkę WordPress, aby uzyskać więcej informacji na jej temat.

1.2. Ukryj widżety za pomocą wtyczki

Najlepszą rzeczą we wtyczce Widgets Disable jest to, że nie musisz konfigurować ani zmieniać żadnych ustawień.

Po aktywacji wtyczki zobaczysz opcję Wyłącz widżety w Wygląd pulpitu WordPress. Po prostu wybierz opcję, a zostaniesz przekierowany na stronę, na której znajdują się wszystkie widżety paska bocznego i widżety pulpitu nawigacyjnego.

Możesz wybrać widżety, które chcesz ukryć na tych kartach. Jeśli chcesz ukryć którykolwiek z widżetów paska bocznego, kliknij Widżet paska bocznego i zaznacz widżety , które chcesz ukryć.

Zrób to samo dla widżetów pulpitu nawigacyjnego , jeśli chcesz ukryć którykolwiek z nich. Po wybraniu widżetów, które chcesz ukryć na pasku bocznym i pulpicie nawigacyjnym, pamiętaj, aby zapisać zmiany .

Jak widziałeś, wystarczy kilka kroków i bardzo mało czasu, aby ukryć widżety w WooCommerce.

Podobnie, jeśli chcesz wyświetlić jakiekolwiek widżety, które wyłączyłeś, po prostu włącz je, odznaczając pole. Twój ukryty widżet pojawi się na stronie bez żadnego błędu.

Zadziałało? Dobra robota! Możesz teraz ukryć widżety w swoim sklepie WooCommerce za pomocą dedykowanych wtyczek.

2. Ukryj widżety programowo w WooCommerce

Powiedzmy, że wolisz nie używać wtyczki do wyłączania widżetów w WooCommerce. Wtyczki dodają wagi Twojej witrynie i możesz preferować wydajne i lekkie ramy. Jeśli masz inne podobne powody, aby uniknąć korzystania z wtyczki, możesz również ukryć widżety za pomocą podejścia programistycznego.

Aby kontynuować, zdecydowanie zalecamy utworzenie kopii zapasowej witryny i użycie motywu potomnego, ponieważ będziemy modyfikować podstawową część motywu. Możesz utworzyć motyw potomny za pomocą kodów lub możesz użyć wtyczek motywów potomnych. Nie martw się, te wtyczki są niezbędne dla Twojej witryny i nie będą miały dużego wpływu na Twój lekki framework.

Teraz przejdź do Wygląd> Edytor plików motywu z motywu potomnego i otwórz plik functions.php .

Wystarczy, że skopiujesz poniższy kod i wkleisz go na dole pliku functions.php .

 add_filter( 'sidebars_widgets', 'quadlayers_woocommerce_conditionally_hide_widget' );
function quadlayers_woocommerce_conditionally_hide_widget( $sidebars_widgets ) {
if ( ! is_admin() ) {
jeśli ( is_cart() ) {
foreach ( $sidebars_widgets as $sidebar_id => $sidebar ) {
$key = array_search( 'estore_woocommerce_product_grid-1', $sidebars_widgets['tg-column-4 collection-block'] );
jeśli ( $ klucz ) {
unset( $sidebars_widgets['tg-column-4 collection-block' ][ $key ] );
}}
}
}
return $sidebars_widgets;
}

W tej demonstracji ukrywamy widget promocyjny, który znajduje się na lewym pasku bocznym. Więc najpierw musimy znaleźć identyfikator widżetu i identyfikator paska bocznego , aby fragment kodu działał.

Aby uzyskać identyfikator widżetu, kliknij lewym przyciskiem wybrany widżet i kliknij Sprawdź . W takim przypadku identyfikator widżetu jest podany w section id= tag.

Podobnie, aby znaleźć identyfikator paska bocznego, możesz przesunąć kursor do innych elementów w elementach sprawdzania. Jeśli widżet jest podświetlony po wybraniu określonej klasy lub identyfikatora, najprawdopodobniej będzie to identyfikator paska bocznego. Jest to jeden z najłatwiejszych sposobów na znalezienie identyfikatora paska bocznego za pomocą elementów Inspect.

Po znalezieniu identyfikatora widgetu i identyfikatora paska bocznego możesz teraz przejść do pliku functions.php z edytora motywów i wkleić kod, który podaliśmy powyżej.

Jeśli spojrzysz na powyższy zrzut ekranu, nasz identyfikator widżetu to „ estore_woocommerce_product_grid-1 ”. Podczas kopiowania i wklejania fragmentu kodu zastąp ciąg „ estore_woocommerce_product_grid-1 ” własnym identyfikatorem widżetu. To samo dotyczy identyfikatora paska bocznego. Zgodnie z naszym motywem, nasz identyfikator paska bocznego to ' tg-column-4 collection-block ', musisz go zastąpić własnym identyfikatorem paska bocznego, w przeciwnym razie kod nie zadziała.

W rezultacie widać, że sekcja widżetów promocyjnych nie jest wyświetlana na interfejsie witryny WooCommerce.

Otóż ​​to! Pomyślnie wyłączyłeś widżet, który chcesz ukryć w WooCommerce za pomocą fragmentów kodu. Możesz modyfikować kody w zależności od potrzeb, aby ukryć więcej widżetów.

Bonus: jak stworzyć niestandardowy widżet nagłówka

Wiesz już, dlaczego i jak ukrywać widżety w WooCommerce. Podobnie możesz chcieć utworzyć niestandardowy widżet nagłówka dla swojej witryny.

Większość motywów WordPress nie pozwala na dodawanie obszarów widżetów nad treścią lub w nagłówku. Ale jeśli dodasz niestandardowy widżet nagłówka, Twoja witryna może wyróżnić się na tle konkurencji, a także zwiększyć niektóre funkcjonalności. Na przykład możesz wyświetlać takie elementy, jak reklamy, ostatnie artykuły lub cokolwiek podobnego.

Tworzenie widżetu nagłówka klienta jest bardzo łatwe dzięki fragmentom kodu. Wszystko, co musisz zrobić, to dodać skrypt do podstawowej części , którą jest functions.php Twojego motywu. Aby jednak dodać niestandardowy widżet nagłówka, musimy najpierw utworzyć nowy obszar widżetów.

1. Utwórz nowy obszar widżetów

Aby utworzyć nowy obszar widżetów dla niestandardowego widżetu nagłówka, musisz dodać fragment kodu do plików motywu.

Ale wcześniej przyjrzyjmy się dostępnym obszarom widżetów dostarczonym przez twój motyw. Przejdź do Wygląd> Widgety z pulpitu WordPress.

Wszystkie aktywne obszary widżetów w motywie można zobaczyć tutaj. W tym miejscu dodamy również nowy obszar widżetów.

Przejdźmy teraz do stworzenia nowego obszaru widżetów. Musimy dostosować plik functions.php naszego motywu potomnego podobnie do podejścia programistycznego do ukrywania widżetów. Możesz także użyć wtyczki, takiej jak Code Snippets, jeśli nie jesteś wystarczająco wygodny, aby bezpośrednio edytować pliki.

W tym samouczku użyjemy wtyczki Code Snippets. Przede wszystkim zainstaluj wtyczkę i aktywuj ją.

Po aktywacji możemy znaleźć ustawienie wtyczki na pulpicie WordPress pod Snippets > All Snippets . Teraz kliknij Dodaj nowy , aby utworzyć nowy fragment.

Nazwaliśmy go „ Niestandardowy widżet nagłówka ”, ale możesz nadać mu własną nazwę. Teraz skopiuj i wklej następujący kod w sekcji kodu.

 function quadlayers_widgets_init() {
register_sidebar( tablica (
'name' => 'Niestandardowy widżet nagłówka',
'id' => 'widget-niestandardowego-nagłówka',
'before_widget' => '<div class="ql-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="ql-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'quadlayers_widgets_init' ); 

Po wklejeniu kodu i zapisaniu go nowy widżet zostanie utworzony jako niestandardowy widżet nagłówka w witrynie WordPress.

2. Dodaj widżet do nagłówka

Aby dodać widżet do nagłówka, musimy edytować plik header.php. Możesz zlokalizować plik nagłówka w edytorze motywów, przechodząc przez Wygląd > Edytor plików motywu z pulpitu nawigacyjnego WordPress. Teraz otwórz plik nagłówka motywu (header.php) z listy plików motywu i wklej następujący kod tutaj.

 <?php

if ( is_active_sidebar( 'quadlayers-header-widget' ) ) : ?>
<div class="ql-widget-area widget-area" role="complementary">
<?php dynamic_sidebar( 'widget-nagłówków-czterowarstwowych' ); ?>
</div>

<?php endif; ?>

Jak zwykle zaktualizuj plik po dodaniu kodu.

Teraz dodajmy widżet do nowego obszaru widżetów. Tutaj dodaliśmy blok akapitu, aby przetestować widżet.

W rezultacie powinieneś być w stanie zobaczyć nagłówek w przedniej części witryny.

Jednak być może zauważyłeś, że musisz dopracować wygląd nagłówka , aby wyglądał atrakcyjnie. Możesz postępować zgodnie z tym przewodnikiem, aby jeszcze bardziej dostosować go i kontrolować widoczność widżetu nagłówka.

Wniosek

I na tym kończy się nasz poradnik , jak ukrywać widżety w WooCommerce. Ukrywanie określonych widżetów może być bardzo przydatne, jeśli nie chcesz wyświetlać niepotrzebnych elementów w swojej witrynie, co powoduje powolną i zaśmieconą witrynę . Natomiast wyświetlanie tylko tych widżetów, których faktycznie potrzebujesz, poprawia ogólną użyteczność Twojego sklepu WooCommerce .

Podsumowując, udostępniliśmy Ci dwa różne sposoby ukrywania widżetów w Twojej witrynie:

• Korzystanie z wtyczki
• Programowo

Najprostszym sposobem na ukrycie widżetów jest użycie wtyczki. Jednak fragmenty, z którymi dzisiaj pracowaliśmy, są również proste i łatwe do dostosowania. Możesz go dostosować, znajdując identyfikator widżetu i zmieniając jego nazwę, aby kod działał w Twojej witrynie.

Dodatkowo dodaliśmy również sekcję do tworzenia niestandardowego nagłówka , aby stworzyć dodatkową przestrzeń na widżety bez zasłaniania głównego menu. Mogą być przydatne do wyświetlania Twoich najnowszych ofert, rabatów, reklam w zorganizowany sposób. Podobnie, mamy również przewodnik dotyczący dodawania niestandardowego widżetu do kanału na Instagramie za pomocą Galerii kanałów na Instagramie, jeśli chcesz dodać więcej niestandardowych widżetów.

Na koniec, oto kilka artykułów, które możesz chcieć sprawdzić, aby jeszcze bardziej ulepszyć swój sklep WooCommerce i wrażenia klientów:

• Jak edytować nagłówek w WordPressie
• Najlepsze wtyczki do dostosowywania strony produktu WooCommer
• Jak dostosować szablony WooCommerce

Czy możesz teraz ukryć widżety w swojej witrynie eCommerce? Czy robiłeś to już wcześniej? Chętnie o tym dowiemy się w komentarzach poniżej.