Cum să ascundeți widget-urile în WooCommerce

Publicat: 2022-02-15

Căutați modalități de a ascunde widget-urile în WooCommerce ? Dacă da, atunci ați aterizat în locul potrivit. Vă vom arăta toate modalitățile posibile de a ascunde sau elimina widget-urile magazinului dvs. online în acest tutorial.

Ce sunt widget-urile în WordPress?

Widgeturile sunt diverse tipuri de conținut sau elemente care pot fi adăugate în bara laterală, subsol și alte zone ale site-ului web. Vă permite să setați funcții specifice, cum ar fi calendarul, ceasul, raportul meteo și așa mai departe. În funcție de widget-uri, ele chiar ajută la creșterea funcționalității site-ului web.

O serie întreagă de widget-uri standard sunt disponibile pe majoritatea temelor. De exemplu, widget-ul „Text” poate fi folosit pentru a afișa text simplu (inclusiv HTML). În mod similar, există și widget-uri pentru imagini, audio, meniuri, categorii, RSS, comentarii recente și multe altele.

În funcție de natura afacerii dvs., este posibil să nu avem întotdeauna nevoie de toate widget-urile oferite de temă. Deci cel mai bun lucru de făcut este să le ascunzi. Dar înainte de a ascunde widget-urile în WooCommerce, trebuie să înțelegeți de ce ar putea fi necesar să dezactivați sau chiar să eliminați și widget-urile.

De ce ar trebui să ascundeți widget-urile în WooCommerce?

Indiferent dacă doriți să creșteți experiența clienților sau să vă faceți site-ul WooCommerce mai robust, widget-urile ocupă un loc esențial în dezvoltarea site-ului dvs. Cele mai multe dintre widget-uri vin cu nucleul WordPress și sunt disponibile în fiecare instalare de la început. Dar unele dintre widget-uri ar putea să nu fie necesare pentru magazinul dvs., în funcție de clienții dvs.

Să presupunem că aveți un site WooCommerce unde doriți să adăugați videoclipuri instructive. Apoi, este posibil să aveți nevoie de o mulțime de widget-uri video pentru aceasta. Dar, în același timp, dacă aveți widget-uri audio împreună cu ele, nu are sens și ar putea părea inutil.

În mod similar, site-ul dvs. poate avea widget-uri cum ar fi postări/comentarii recente, un bloc de abonament la știri sau o prognoză meteo. Dacă da, ar fi foarte deplasat să le arăți pe fiecare pagină a site-ului tău. Pentru paginile WooCommerce, cum ar fi pagina de finalizare a comenzii sau pagina de coș, aceste widget-uri nu sunt necesare. Puteți dezactiva comentariile în WordPress, dar această soluție nu este aplicabilă tuturor widget-urilor.

În plus, a avea un element suplimentar pe partea frontală a site-ului dvs. WooCommerce poate încetini site-ul dvs., ceea ce afectează direct experiența utilizatorului. De aceea, cel mai bine este să ascundeți widget-uri în WooCommerce care nu adaugă prea multă valoare utilizatorilor și îmbunătățesc capacitatea de utilizare a site-ului în ansamblu.

Cum să ascunzi widget-urile WooCommerce?

Există două metode diferite pe care le puteți folosi pentru a ascunde widget-urile în WooCommerce.

  1. Cu plugin
  2. Din punct de vedere programatic

Înainte de a începe cu tutorialul, asigurați-vă că ați configurat corect WooCommerce fără a rata niciun pas.

1. Ascundeți widget-urile în WooCommerce folosind Plugin

Caracteristica implicită WooCommerce oferă foarte puține funcționalități atunci când vine vorba de widget-uri. Nu vă permite să ascundeți widget-uri în WooCommerce. Deci, dacă doriți să ascundeți sau să dezactivați widget-urile pe o anumită pagină sau postare, ar trebui să utilizați un plugin dedicat.

Există mai multe instrumente gratuite și premium atunci când vine vorba de ascunderea widget-urilor. Acestea sunt unele dintre cele mai bune instrumente pe care le puteți folosi pentru a le ascunde pe cele care nu sunt importante pentru site-ul dvs. WooCommerce.

Opțiuni pentru widgeturi

ascunde widget-uri în woocommerce

Widget Options este un plugin WordPress care vă oferă control complet asupra widget-urilor dvs. Cu peste 100.000 de instalări, este unul dintre cele mai populare pluginuri pentru soluții de gestionare a widgeturilor din WordPress. Prin urmare, puteți ascunde sau elimina cu ușurință widget-urile de pe site-ul dvs. folosind acest plugin.

Are o interfață ușor de utilizat și o integrare perfectă cu WooCommerce, care poate fi folosită fără efort pentru personalizările widget-urilor dvs. De asemenea, puteți găsi widget-ul pe care doriți să îl editați cu ajutorul filtrului său de căutare live widget.

Caracteristici cheie
  • Ascundeți titlul widgetului
  • Importați sau exportați widget-uri
  • Căutare widget live
  • Afișează sau ascunde widget-uri pe dispozitivul specific
  • Widget Logic – Condițional pentru a ascunde și afișa widget-ul
Preț

Opțiunea Widget vine cu o versiune gratuită și premium. Puteți extinde funcțiile începând de la 19 USD anual.

Widget Dezactivat

ascunde widget-uri în woocommerce

Widget Disable este un plugin gratuit cu care puteți ascunde widget-urile din bara laterală într-un mod foarte simplu. Pluginul afișează toate widget-urile de pe site-ul dvs. și vă permite să alegeți ce widget doriți să ascundeți. Nu numai că, puteți chiar să dezactivați widget-urile tabloului de bord pentru a face zona tabloului de bord mai puțin aglomerată.

Pluginul este, de asemenea, ușor și nu supraîncărcă și nu penalizează viteza paginii dvs. web. În plus, este și un plugin prietenos pentru dezvoltatori și chiar oferă filtre pentru a exclude widget-urile de pe bara laterală sau de pe tabloul de bord.

Caracteristici cheie
  • Potrivit atât pentru începători, cât și pentru dezvoltatori
  • Interfață simplă și ușor de utilizat
  • Dezactivați widget-urile din bara laterală și tabloul de bord
  • Sunt furnizate filtre pentru a modifica fișierele din partea de bază
Preț

Widget Disable este un plugin gratuit. Îl puteți descărca din depozitul oficial de pluginuri WordPress.

Ascundeți widgeturile în WooCommerce utilizând pluginul de dezactivare a widgetului

Acum că ne-am uitat la pluginuri, să vedem și cum să le folosim. Deci, pentru această demonstrație, vom ascunde widget-urile în WooCommerce folosind pluginul Widget Disable . Este un plugin gratuit și foarte ușor de utilizat, cu o interfață simplă care face treaba perfect.

Dar dacă preferați să utilizați orice alt plugin, puteți face și acest lucru. Procesul este similar indiferent de pluginul pe care îl utilizați. Dar trebuie să îl instalați și să îl activați înainte de a începe să îl utilizați.

1.1. Instalați și activați pluginul

Pentru a instala un plugin, accesați Plugin-uri> Adăugați nou din tabloul de bord WordPress și căutați pluginul Widget Disable în bara de căutare situată în partea dreaptă. Apoi, faceți clic pe Instalați acum și activați -l după finalizarea instalării.

instalați pluginul ascundeți widget-uri în woocommerce

Dacă utilizați un plugin premium sau orice alt plugin gratuit care nu este inclus în depozitul de pluginuri WordPress, trebuie să îl descărcați și să îl instalați manual. Vă rugăm să parcurgeți ghidul nostru despre cum să instalați manual un plugin WordPress pentru mai multe informații despre acesta.

1.2. Ascundeți widgeturile folosind pluginul

Cel mai bun lucru despre pluginul Widgets Disable este că nu trebuie să configurați sau să modificați niciuna dintre setări.

Odată ce pluginul este activat, veți putea vedea opțiunea Dezactivare widget -uri în Aspectul tabloului de bord WordPress. Doar selectați opțiunea și veți fi redirecționat către pagina în care sunt listate toate widget-urile din bara laterală și widget-urile tabloului de bord.

ascunde widget-uri în woocommerce

Puteți selecta widget-urile pe care doriți să le ascundeți din aceste file. Dacă doriți să ascundeți oricare dintre widgeturile din bara laterală, faceți clic pe Widget din bara laterală și verificați widgeturile pe care doriți să le ascundeți.

Faceți același lucru pentru Widgeturile Dashboard dacă doriți să ascundeți și oricare dintre ele. După ce ați selectat widget-urile pe care doriți să le ascundeți din bara laterală și din tabloul de bord, asigurați-vă că ați Salvat modificările .

ascunde widget-uri în woocommerce

După cum ați văzut, este nevoie de doar câțiva pași și foarte puțin timp pentru a ascunde widget-urile în WooCommerce.

În mod similar, dacă doriți să afișați orice widget-uri pe care le-ați dezactivat , activați-l pur și simplu debifând caseta. Și widgetul tău ascuns va apărea pe site fără nicio eroare.

A funcționat? Buna treaba! Acum puteți ascunde widget-urile din magazinul dvs. WooCommerce folosind plugin-uri dedicate.

2. Ascundeți widgeturile în WooCommerce în mod programatic

Să presupunem că preferați să nu utilizați un plugin pentru a dezactiva widget-urile din WooCommerce. Pluginurile adaugă greutate site-ului dvs. și este posibil să preferați un cadru eficient și ușor. Dacă aveți alte motive similare pentru a evita utilizarea unui plugin, puteți, de asemenea, să ascundeți widget-urile printr-o abordare programatică.

Dar pentru a continua mai departe, vă recomandăm insistent să faceți o copie de rezervă a site-ului dvs. și să utilizați o temă secundară, deoarece vom modifica partea de bază a temei dvs. Puteți crea o temă copil cu coduri sau puteți utiliza pluginuri pentru tema copil. Nu vă faceți griji, aceste plugin-uri sunt esențiale pentru site-ul dvs. și nu vor afecta prea mult cadrul dvs. ușor.

Acum, accesați Aspect > Editor de fișiere temă din tema copilului și deschideți fișierul functions.php .

Tot ce trebuie să faceți este să copiați următorul cod și să-l lipiți în partea de jos a fișierului functions.php .

 add_filter( 'sidebars_widgets', 'quadlayers_woocommerce_conditionally_hide_widget');
funcția quadlayers_woocommerce_conditionally_hide_widget( $sidebars_widgets ) {
dacă ( ! is_admin() ) {
if ( is_cart() ) {
foreach ( $sidebars_widgets ca $sidebar_id => $sidebar ) {
$key = array_search( 'estore_woocommerce_product_grid-1', $sidebars_widgets['tg-column-4 collection-block'] );
dacă ( $key ) {
unset( $sidebars_widgets['tg-column-4 collection-block' ][ $key ] );
}}
}
}
returnează $sidebars_widgets;
}

În această demonstrație, ascundem widget-ul promoțional care se află în bara laterală din stânga. Deci, în primul rând, trebuie să găsim ID -ul widgetului și ID-ul barei laterale pentru ca fragmentul să funcționeze.

Pentru a obține ID-ul widget-ului, faceți clic stânga pe widget-ul selectat și faceți clic pe Inspectați . În acest caz, ID-ul widget-ului este furnizat în section id= tag.

În mod similar, pentru a găsi ID-ul barei laterale, puteți muta cursorul la alte elemente din elementele de inspectare. Dacă widget-ul este evidențiat atunci când selectați o anumită clasă sau id-ul, atunci acesta va fi mai probabil ID-ul dvs. din bara laterală. Aceasta este una dintre cele mai ușoare modalități de a vă găsi ID-ul barei laterale cu ajutorul elementelor Inspect.

Odată ce ați găsit ID-ul widget-ului și ID-ul barei laterale, acum puteți accesa fișierul functions.php din Editorul de teme și puteți lipi codul pe care l-am furnizat mai sus.

Dacă te uiți la captura de ecran de mai sus, ID-ul nostru widget este „ estore_woocommerce_product_grid-1 ”. Când copiați și inserați fragmentul, înlocuiți „ estore_woocommerce_product_grid-1 ” cu propriul ID widget. Și același lucru este valabil și cu ID-ul barei laterale. Conform temei noastre, ID-ul barei noastre laterale este „ tg-column-4 collection-block ”, trebuie să-l înlocuiți cu propriul ID barei laterale, altfel codul nu va funcționa.

Ca rezultat, puteți vedea, secțiunea widget promoțional nu este afișată pe partea frontală a site-ului WooCommerce.

Asta e! Ați dezactivat cu succes widgetul pe care doriți să-l ascundeți în WooCommerce folosind fragmente de cod. Puteți modifica codurile în funcție de nevoile dvs. pentru a ascunde mai multe widget-uri.

Bonus: Cum să creați un widget cu antet personalizat

Știți deja de ce și cum să ascundeți widget-urile în WooCommerce. În mod similar, este posibil să doriți să creați un widget antet personalizat pentru site-ul dvs. web.

Majoritatea temelor WordPress nu vă permit să adăugați zone widget deasupra conținutului sau în antet. Dar dacă adăugați un widget de antet personalizat, site-ul dvs. poate ieși în evidență față de concurenți și, de asemenea, poate crește unele funcționalități. De exemplu, puteți afișa elemente precum reclame, articole recente sau ceva similar.

Crearea unui widget antet client este foarte ușoară cu ajutorul fragmentelor de cod. Tot ce trebuie să faci este să adaugi un script la partea de bază, care este functions.php a temei tale. Dar pentru a adăuga un widget antet personalizat, trebuie să creăm mai întâi o nouă zonă de widget.

1. Creați o nouă zonă widget

Pentru a crea o nouă zonă de widget pentru antetul dvs. personalizat, va trebui să adăugați un fragment de cod la fișierele teme.

Dar înainte de asta, să aruncăm o privire asupra zonelor widget disponibile oferite de tema ta. Deci, accesați Aspect > Widgeturi din tabloul de bord WordPress.

Toate zonele widget-uri active ale temei pot fi văzute aici. Aici vom adăuga și noua zonă de widget.

Acum să trecem la crearea unei noi zone de widget. Trebuie să ajustăm fișierul functions.php al temei noastre copil similar cu abordarea programatică pentru a ascunde widget-urile. Puteți utiliza, de asemenea, un plugin precum Code Snippets dacă nu vă simțiți suficient de confortabil pentru a edita fișierele direct.

Vom folosi pluginul Code Snippets pentru acest tutorial. În primul rând, instalează pluginul și activează-l.

După activare, putem găsi setarea pluginului pe tabloul de bord WordPress sub Snippets > All Snippets . Acum faceți clic pe Adăugați nou pentru a crea un nou fragment.

L-am numit „ Widget antet personalizat ”, dar îi puteți da numele dorit. Acum copiați și inserați următorul cod în secțiunea de cod.

 funcția quadlayers_widgets_init() {
register_sidebar( matrice(
'name' => 'Widget antet personalizat',
'id' => 'custom-header-widget',
'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'); 

După ce lipiți codul și îl salvați, noul widget este creat ca widget cu antet personalizat pe site-ul dvs. WordPress.

2. Adăugați widgetul la antet

Pentru a adăuga widget-ul la antet, trebuie să edităm fișierul header.php. Puteți găsi fișierul antet în editorul de teme navigând prin Aspect > Editor fișier temă din tabloul de bord WordPress. Acum, deschideți fișierul Antet teme (header.php) din lista fișierelor cu teme și inserați următorul cod aici.

 <?php

if ( is_active_sidebar( 'quadlayers-header-widget' ) ) : ?>
<div class="ql-widget-area widget-area" rol="complementar">
<?php dynamic_sidebar('quadlayers-header-widget'); ?>
</div>

<?php endif; ?>

Ca de obicei, actualizați fișierul după ce adăugați codul.

Acum, să adăugăm un widget în noua zonă de widget-uri. Aici am adăugat un bloc de paragraf pentru a testa widget-ul.

Ca rezultat, ar trebui să puteți vedea antetul din partea din față a site-ului.

Cu toate acestea, este posibil să fi observat că trebuie să lustruiți aspectul antetului pentru a-l face să arate atrăgător. Puteți urma acest ghid pentru a-l personaliza și pentru a controla vizibilitatea widgetului antet.

Concluzie

Și asta se încheie ghidul nostru despre cum să ascundeți widget-urile în WooCommerce. Ascunderea anumitor widget-uri poate fi foarte utilă dacă nu doriți să afișați elemente inutile pe site-ul dvs. web, rezultând un site lent și aglomerat . Întrucât, afișarea numai a widget-urilor de care aveți nevoie efectiv îmbunătățește gradul de utilizare general al magazinului dvs. WooCommerce .

Pentru a rezuma, v-am oferit două moduri diferite de a ascunde widget-urile pe site-ul dvs.:

  • Folosind un plugin
  • Din punct de vedere programatic

Cel mai simplu mod de a ascunde widget-urile este folosirea pluginului. Cu toate acestea, fragmentele cu care am lucrat astăzi sunt, de asemenea, simple și ușor de personalizat. Îl puteți personaliza găsind ID-ul widget-ului și redenumindu-l pentru ca codul să funcționeze pentru site-ul dvs.

În plus, am inclus și o secțiune pentru a crea un antet personalizat pentru a crea spațiu suplimentar pentru widget fără a obstrucționa meniul principal. Acestea pot fi utile pentru a vă afișa cele mai recente oferte, reduceri, reclame într-o manieră organizată. De asemenea, avem și un ghid pentru a adăuga un widget personalizat pentru un feed Instagram folosind Instagram Feed Gallery dacă doriți să adăugați mai multe widget-uri personalizate.

În cele din urmă, iată câteva articole pe care ați putea dori să le verificați pentru a vă îmbunătăți și mai mult magazinul WooCommerce și experiența clienților:

  • Cum se editează antetul în WordPress
  • Cele mai bune pluginuri pentru a personaliza pagina produsului WooCommer
  • Cum să personalizați șabloanele WooCommerce

Puteți ascunde widget-urile de pe site-ul dvs. de comerț electronic acum? Ai mai facut-o inainte? Vom fi bucuroși să aflăm despre asta în comentariile de mai jos.