Jak usunąć pasek boczny WooCommerce

Czy chcesz usunąć pasek boczny WooCommerce ? Jeśli chcesz dalej ulepszać swój sklep WooCommerce i wprowadzać zmiany, modyfikacja opcji paska bocznego byłaby jedną z najlepszych rzeczy do wypróbowania. Jeśli nie wiesz, jak to zrobić poprawnie, czytaj dalej ten artykuł.

Tutaj pokażemy Ci krok po kroku proces usuwania paska bocznego z instalacji.

Zanim przejdziemy dalej, zobaczmy, czym są paski boczne.

Co to są paski boczne?

Pasek boczny to wąska kolumna z boku strony internetowej, która często zawiera dodatkowe informacje lub funkcje związane z zawartością strony. W kontekście WooCommerce pasek boczny zazwyczaj wyświetla kategorie produktów, informacje o koszyku i inne istotne elementy związane ze sklepem internetowym.

Paski boczne WooCommerce zostały zaprojektowane, aby pomóc klientom poruszać się po sklepie internetowym i uczynić ich zakupy bardziej przyjaznymi dla użytkownika. Wyświetlając kategorie produktów i inne informacje na pasku bocznym, klienci mogą szybko znaleźć produkty, których szukają i dodać je do koszyka.

Podczas gdy paski boczne mogą być pomocne w przypadku niektórych witryn, mogą również rozpraszać uwagę lub być niepotrzebne w przypadku innych. Niektórzy właściciele witryn mogą preferować bardziej przejrzysty i minimalistyczny wygląd, który nie zawiera paska bocznego. W takich przypadkach możesz usunąć pasek boczny WooCommerce, aby uprościć projekt witryny i poprawić wrażenia użytkownika.

Po co usuwać paski boczne WooCommerce

Istnieje kilka powodów, dla których właściciele witryn mogą zdecydować się na usunięcie paska bocznego WooCommerce ze swojego sklepu internetowego:

• Uproszczenie projektu witryny: Usunięcie paska bocznego może pomóc w stworzeniu czystszego, bardziej minimalistycznego projektu witryny. Może to poprawić ogólny wygląd i styl Twojej witryny, czyniąc ją bardziej atrakcyjną wizualnie i łatwiejszą w nawigacji.
• Popraw szybkość ładowania strony: Paski boczne mogą wydłużyć czas ładowania strony w Twojej witrynie. Możesz usunąć pasek boczny, aby poprawić szybkość ładowania strony, co prowadzi do lepszego doświadczenia użytkownika i wyższych pozycji w wyszukiwarkach.
• Skoncentruj się na produkcie: usuwając elementy rozpraszające uwagę z paska bocznego, możesz skupić uwagę klienta na produkcie. Może to pomóc poprawić współczynniki konwersji i zwiększyć sprzedaż.
• Utwórz witrynę bardziej przyjazną dla urządzeń mobilnych: nawigacja po paskach bocznych na urządzeniach mobilnych z mniejszymi ekranami może być trudna. Możesz stworzyć bardziej przyjazną dla urządzeń mobilnych stronę internetową, z której klienci będą mogli łatwiej korzystać na urządzeniach mobilnych, usuwając pasek boczny WooCommerce.

Teraz już wiesz, dlaczego usunięcie pasków bocznych jest dobrym rozwiązaniem. Następnie zobaczmy, jak wykonać zadanie.

Jak usunąć paski boczne WooCommerce?

Istnieje kilka sposobów na usunięcie paska bocznego WooCommerce z różnych miejsc w sklepie. Możesz usunąć pasek boczny WooCommerce z następujących elementów:

• cały sklep
• poszczególne strony produktów
• strona sklepu
• strony statyczne

Przeanalizujemy te opcje jeden po drugim. Jednak w tych zadaniach zajmiemy się kilkoma liniami kodu PHP. Dlatego zdecydowanie zalecamy wykonanie pełnej kopii zapasowej witryny WordPress przed wykonaniem któregokolwiek z tych zadań. Alternatywnie możesz także utworzyć lokalną instalację WordPressa i przetestować tam każdy kod.

Bez dalszych ceregieli przejdźmy do samouczka.

1) Z całego sklepu

Postępuj zgodnie z tą metodą, jeśli chcesz usunąć pasek boczny z całego sklepu. Pierwszą rzeczą, którą musisz zrobić, to zalogować się do swojego sklepu WooCommerce i otworzyć edytor motywów.

Domyślnie strona otworzy plik style.css. Teraz z prawej strony wybierz plik functions.php.

Następnie dodaj ten kod do pliku funkcji:

 funkcja wyłącz_woo_commerce_sidebar() {
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10); 
}
add_action('init', 'disable_woo_commerce_sidebar');

Po dodaniu fragmentu zaktualizuj plik.

Ten kod dodaje filtr do sekcji dodawania produktów WooCommerce do koszyka, który usuwa pasek boczny ze wszystkich stron WooCommerce.

Usuwając pasek boczny WooCommerce z całego sklepu, możesz zapewnić swoim klientom usprawnione zakupy, koncentrując się wyłącznie na Twoich produktach.

UWAGA: Zamiast bezpośrednio edytować plik functions.php, możesz także użyć wtyczki Code Snippets. W ten sposób możesz mieć pewność, że dodany niestandardowy kod nie zostanie zastąpiony po aktualizacji motywu.

2) Ze stron poszczególnych produktów

Usuwanie pasków bocznych z poszczególnych stron produktów to kolejna rzecz, której powinieneś się nauczyć. W tym celu otwórz plik functions.php lub wtyczkę Code Snippets. Od teraz zaczniemy korzystać z wtyczki Code Snippets. Następnie skopiuj ten kod:

 add_action('wp', 'ql_remove_sidebar_product_pages');

funkcja ql_remove_sidebar_product_pages() {
if ( is_product() ) {
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
}
}

Wklej go w ustawieniach wtyczki i aktywuj fragment kodu.

Teraz skończyłeś z tym!

Jeśli sprawdzisz poszczególne strony produktów, które masz w swoim sklepie WooCommerce, nie zobaczysz paska bocznego po lewej ani po prawej stronie. Jeśli używasz motywu Storefront WordPress, powinieneś użyć tego kodu:

 add_action( 'get_header', 'ql_remove_storefront_sidebar' );

funkcja ql_remove_storefront_sidebar() {
if ( is_product() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10);
}
}

Następnie przejdźmy do ostatniego tematu, w którym nauczymy Cię, jak usunąć pasek boczny z całego archiwum sklepu.

3) Ze Strony Sklepu

Jeśli chcesz usunąć pasek boczny WooCommerce ze strony sklepu, postępuj zgodnie z tym przewodnikiem. Niektóre motywy WordPress są dostarczane z dedykowanym panelem ustawień. Stamtąd możesz dostosować każdy cal swojej witryny WordPress. W naszej fałszywej instalacji WordPress używamy popularnego motywu Astra.

I ma dedykowane opcje tematyczne. Jeśli zaznaczysz moduł dostosowania, zobaczysz dedykowane ustawienia WooCommerce .

Tam otwórz opcję Katalog produktów .

Następnie otwórz opcje dostosowywania paska bocznego i wybierz opcję bez paska bocznego .

Po wybraniu opcji bez paska bocznego opublikuj aktualizacje.

W ten sposób możesz usunąć pasek boczny ze strony swojego sklepu. Ponieważ nie zawiera żadnego kodowania, metoda jest wykonalna dla większości początkujących.

4) Ze strony statycznej

Najnowsze motywy WordPress zawierają szablony o pełnej szerokości bez pasków bocznych. Możesz użyć jednego z tych szablonów w swojej witrynie jako strony statycznej. Zmiana stylu zajmuje tylko kilka minut. Oto jak możesz to zrobić.

Najpierw otwórz stronę, na której chcesz zastosować szablon o pełnej szerokości. Gdy to zrobisz, po prawej stronie zobaczysz opcję Atrybuty strony > Szablon .

Z listy rozwijanej wybierz Szablon pełnej szerokości .

Po wybraniu elementu opublikuj (lub zaktualizuj) stronę .

Teraz sprawdź swoją stronę z przodu, aby zobaczyć niestandardową stronę bez paska bocznego. Możesz to zrobić ręcznie na każdej stronie, z której chcesz usunąć pasek boczny.

Bonus: najlepsze wtyczki paska bocznego WordPress

Jeśli chcesz używać wtyczek do dostosowywania paska bocznego, sprawdź te opcje.

1) Przyklejony pasek boczny WP

Jeśli chcesz utworzyć lepki widżet paska bocznego w swojej witrynie, powinieneś użyć WP Sticky Sidebar . Za pomocą tego narzędzia możesz tworzyć pływające paski boczne bez dotykania ani jednego wiersza kodu CSS. Jest to lekkie narzędzie, więc nie wpłynie to na szybkość i wydajność witryny.

Inną godną uwagi cechą WP Sticky Sidebar jest to, że możesz używać wtyczki z dowolnym motywem WordPress. Narzędzie jest kompatybilne z większością motywów dostępnych na rynku. Możesz dodać kod CSS do lepkiego paska bocznego za pomocą ustawień wtyczki. Byłaby to świetna opcja, gdy trzeba jeszcze bardziej dostosować pasek boczny.

Wreszcie, jeśli chcesz wyłączyć pływające paski boczne w dowolnych postach, stronach lub niestandardowych typach postów, jest to również możliwe. Wtyczka jest narzędziem freemium , a jeśli interesuje Cię darmowa wersja, sprawdź repozytorium.

Wersja premium kosztuje 19 USD rocznie i można ją pobrać stąd.

2) Niestandardowe paski boczne

Jeśli chcesz przenieść dostosowanie paska bocznego na wyższy poziom, powinieneś sprawdzić Niestandardowe paski boczne. Jest to wtyczka, która pomoże Ci tworzyć różne paski boczne dla poszczególnych postów i stron. Wtyczka jest dostarczana z minimalną konfiguracją i nie wymaga żadnej wiedzy na temat kodowania. Na szczęście wtyczka pomaga również importować/eksportować opcje konfiguracji między stronami WordPress,

Więc jeśli masz stronę internetową i potrzebujesz podobnych opcji dostosowywania, możesz łatwo skorzystać z funkcji importu/eksportu. W oparciu o role użytkowników można również ustawić opcje widoczności.

Niestandardowy pasek boczny to bezpłatne narzędzie . Możesz go pobrać z repozytorium wtyczek WordPress.

Wniosek

Paski boczne WooCommerce można usunąć. Gdy chcesz zapewnić swoim produktom 100% dostępnej przestrzeni, usunięcie paska bocznego byłoby jedną z możliwych opcji. Korzystając z WordPress, będziesz mieć całkowitą kontrolę nad stroną internetową. Jak widziałeś w tym artykule, istnieje wiele sposobów, dzięki którym możesz zająć się procesem usuwania paska bocznego.

Możesz usunąć pasek boczny z

• z całego Twojego sklepu
• poszczególne strony
• strony sklepu
• strony statyczne

Wystarczy użyć dedykowanej wtyczki lub dodać niestandardowe kody. Zalecamy jednak wygenerowanie pełnej kopii zapasowej witryny przed przystąpieniem do pracy z kodami. Zgodnie z własnymi wymaganiami możesz poradzić sobie z paskiem bocznym i usunąć go ze swojej witryny.

Mamy nadzieję, że ten artykuł okazał się pomocny i podobała Ci się jego lektura. Jeśli tak, rozważ udostępnienie tego postu znajomym i innym blogerom w mediach społecznościowych.

Podobne artykuły, które mogą Ci się spodobać:

• Jak stworzyć niestandardowy pasek boczny w WooCommerce
• Najlepsze fragmenty kodu WooCommerce dla WordPress
• Jak ograniczyć wersje postów WordPress (z wtyczkami i bez)