Come nascondere i widget in WooCommerce

Stai cercando modi per nascondere i widget in WooCommerce ? Se è così, allora sei atterrato nel posto giusto. Ti mostreremo tutti i modi possibili per nascondere o rimuovere i widget del tuo negozio online in questo tutorial.

Cosa sono i widget in WordPress?

I widget sono vari tipi di contenuti o elementi che possono essere aggiunti alla barra laterale, al piè di pagina e ad altre aree del sito web. Ti consente di impostare funzionalità specifiche come calendario, orologio, bollettino meteorologico e così via. A seconda dei widget, aiutano anche ad aumentare la funzionalità del sito web.

Un'intera serie di widget standard è disponibile sulla maggior parte dei temi. Ad esempio, il widget "Testo" può essere utilizzato per generare testo semplice (incluso HTML). Allo stesso modo, ci sono anche widget per immagini, audio, menu, categorie, RSS, commenti recenti e altro.

A seconda della natura della tua attività, potremmo non aver sempre bisogno di tutti i widget forniti dal tema. Quindi la cosa migliore da fare è nasconderli. Ma prima di nascondere i widget in WooCommerce, devi capire perché potresti dover disabilitare o addirittura rimuovere anche i widget.

Perché dovresti nascondere i widget in WooCommerce?

Sia che tu voglia aumentare l'esperienza del cliente o rendere più robusto il tuo sito WooCommerce, i widget occupano un posto essenziale nello sviluppo del tuo sito. La maggior parte dei widget viene fornita con il core di WordPress e sono disponibili in ogni installazione dall'inizio. Ma alcuni dei widget potrebbero non essere necessari per il tuo negozio a seconda dei tuoi clienti.

Supponiamo che tu abbia un sito WooCommerce in cui desideri aggiungere video di istruzioni. Quindi, potresti aver bisogno di molti widget video per questo. Ma allo stesso tempo, se disponi di widget audio insieme a loro, non ha senso e potrebbe sembrare non necessario.

Allo stesso modo, il tuo sito Web potrebbe avere widget come post/commenti recenti, un blocco di iscrizione alle notizie o previsioni del tempo. In tal caso, sarebbe molto fuori luogo mostrarli su ogni pagina del tuo sito web. Per le pagine WooCommerce come la pagina di pagamento o la pagina del carrello, questi widget non sono richiesti. Puoi disabilitare i commenti in WordPress, ma questa soluzione non è applicabile a tutti i widget.

Inoltre, avere un elemento in più sul front-end del tuo sito WooCommerce può rallentare il tuo sito web che influisce direttamente sull'esperienza dell'utente. Ecco perché è meglio nascondere in WooCommerce i widget che non aggiungono molto valore agli utenti e migliorano l'usabilità del sito nel suo insieme.

Come nascondere i widget di WooCommerce?

Esistono due diversi metodi che puoi utilizzare per nascondere i widget in WooCommerce.

1. Con plug-in
2. Programmaticamente

Prima di iniziare con il tutorial, assicurati di aver impostato correttamente WooCommerce senza perdere alcun passaggio.

1. Nascondi i widget in WooCommerce usando il plugin

La funzione predefinita di WooCommerce offre pochissime funzionalità quando si tratta di widget. Non ti consente di nascondere i widget in WooCommerce. Quindi, se vuoi nascondere o disabilitare i widget su una pagina o un post particolare, dovresti utilizzare un plug-in dedicato.

Esistono diversi strumenti gratuiti e premium quando si tratta di nascondere i widget. Questi sono alcuni dei migliori strumenti che puoi utilizzare per nascondere quelli che non sono importanti per il tuo sito WooCommerce.

Opzioni widget

Widget Options è un plugin per WordPress che ti dà il controllo completo sui tuoi widget. Con oltre 100.000 installazioni, è uno dei plugin per soluzioni di gestione dei widget più popolari in WordPress. Pertanto, puoi facilmente nascondere o rimuovere i widget sul tuo sito Web utilizzando questo plug-in.

Ha un'interfaccia intuitiva e una perfetta integrazione con WooCommerce che può essere utilizzata senza sforzo per le personalizzazioni dei tuoi widget. Puoi anche trovare il particolare widget che desideri modificare con l'aiuto del suo filtro di ricerca del widget live.

Caratteristiche principali

• Nascondi il titolo del widget
• Importa o esporta widget
• Ricerca widget in tempo reale
• Mostra o nascondi i widget sul dispositivo specifico
• Logica del widget: condizionale per nascondere e mostrare il widget

Prezzo

Widget Option viene fornito con una versione gratuita e premium. Puoi estendere le funzionalità a partire da 19 USD all'anno.

Widget Disabilita

Widget Disable è un plugin gratuito con il quale puoi nascondere i widget della barra laterale in un modo molto semplice. Il plug-in mostra tutti i widget sul tuo sito Web e ti consente di scegliere quale widget nascondere. Non solo, puoi anche disabilitare i widget della dashboard per rendere l'area della dashboard meno ingombra.

Il plugin è anche leggero e non sovraccarica né penalizza la velocità della tua pagina web. Inoltre, è anche un plug-in adatto agli sviluppatori e fornisce persino filtri per escludere i widget sulla barra laterale o sulla dashboard.

Caratteristiche principali

• Adatto sia per principianti che per sviluppatori
• Interfaccia semplice e facile da usare
• Disabilita i widget della barra laterale e del dashboard
• I filtri sono forniti per modificare i file sulla parte principale

Prezzo

Widget Disable è un plugin gratuito. Puoi scaricarlo dal repository ufficiale dei plugin di WordPress.

Nascondi i widget in WooCommerce usando il plug-in Widget Disable

Ora che abbiamo dato un'occhiata ai plugin, vediamo anche come usarli. Quindi, per questa dimostrazione, nasconderemo i widget in WooCommerce usando il plugin Widget Disable . È un plugin gratuito e molto facile da usare con un'interfaccia semplice che fa il suo lavoro perfettamente.

Ma se preferisci usare qualsiasi altro plugin, puoi farlo anche tu. Il processo è simile indipendentemente dal plug-in utilizzato. Ma devi installarlo e attivarlo prima di iniziare a usarlo.

1.1. Installa e attiva il plugin

Per installare un plug-in, vai su Plugin>Aggiungi nuovo dalla dashboard di WordPress e cerca il plug-in Widget Disable nella barra di ricerca situata sul lato destro. Quindi, fai clic su Installa ora e attivalo al termine dell'installazione.

Se utilizzi un plug-in premium o qualsiasi altro plug-in gratuito non incluso nel repository dei plug-in di WordPress, devi scaricarlo e installarlo manualmente. Consulta la nostra guida su come installare manualmente un plugin per WordPress per ulteriori informazioni su di esso.

1.2. Nascondi i widget usando il plug-in

La cosa migliore del plug-in Widgets Disable è che non è necessario configurare o modificare nessuna delle impostazioni.

Una volta attivato il plug-in, sarai in grado di vedere l'opzione Disabilita widget nell'aspetto della dashboard di WordPress. Basta selezionare l'opzione e verrai reindirizzato alla pagina in cui sono elencati tutti i widget della barra laterale e i widget del dashboard.

Puoi selezionare i widget che desideri nascondere da queste schede. Se desideri nascondere uno qualsiasi dei widget della barra laterale, fai clic su Widget della barra laterale e seleziona i widget che desideri nascondere.

Fai lo stesso per Dashboard Widgets se vuoi nasconderne anche qualcuno. Dopo aver selezionato i widget che desideri nascondere dalla barra laterale e dalla dashboard, assicurati di salvare le modifiche .

Come hai visto, bastano pochi passaggi e pochissimo tempo per nascondere i widget in WooCommerce.

Allo stesso modo, se desideri visualizzare tutti i widget che hai disabilitato , abilitalo semplicemente deselezionando la casella. E il tuo widget nascosto apparirà sul sito web senza alcun errore.

Ha funzionato? Ottimo lavoro! Ora puoi nascondere i widget nel tuo negozio WooCommerce utilizzando plugin dedicati.

2. Nascondi i widget in WooCommerce in modo programmatico

Diciamo che preferisci non utilizzare un plug-in per disabilitare i widget in WooCommerce. I plugin aggiungono peso al tuo sito web e potresti preferire un framework efficiente e leggero. Se hai altri motivi simili per evitare di utilizzare un plug-in, puoi anche nascondere i widget con un approccio programmatico.

Ma per continuare ulteriormente, ti consigliamo vivamente di eseguire il backup del tuo sito Web e di utilizzare un tema figlio poiché modificheremo la parte principale del tuo tema. Puoi creare un tema figlio con codici oppure puoi utilizzare i plug-in del tema figlio. Non preoccuparti, questi plug-in sono essenziali per il tuo sito Web e non influiranno molto sul tuo framework leggero.

Ora vai su Aspetto> Editor file tema dal tuo tema figlio e apri il file functions.php .

Tutto quello che devi fare è copiare il seguente codice e incollarlo nella parte inferiore del file functions.php .

 add_filter('sidebars_widgets', 'quadlayers_woocommerce_conditionally_hide_widget');
funzione quadlayers_woocommerce_conditionally_hide_widget($ sidebars_widgets) {
se ( ! è_admin() ) {
se ( è_carrello() ) {
foreach ( $ sidebars_widgets as $ sidebar_id => $ sidebar ) {
$key = array_search('estore_woocommerce_product_grid-1', $sidebars_widgets['tg-column-4 collection-block']);
se ($chiave) {
unset($sidebars_widgets['tg-column-4 collection-block' ][ $key ]);
}}
}
}
restituisci $ sidebars_widgets;
}

In questa dimostrazione, stiamo nascondendo il widget promozionale che si trova nella barra laterale di sinistra. Quindi, in primo luogo, dobbiamo trovare l' ID widget e l'ID barra laterale affinché lo snippet funzioni.

Per ottenere l'ID del widget, fai clic con il pulsante sinistro del mouse sul widget selezionato e fai clic su Ispeziona . In questo caso, l'ID del widget è fornito nella section id= tag.

Allo stesso modo, per trovare l'ID della barra laterale, puoi spostare il cursore su altri elementi negli elementi di ispezione. Se il widget viene evidenziato quando selezioni la classe o l'ID particolare, è più probabile che sia il tuo ID barra laterale. Questo è uno dei modi più semplici per trovare l'ID della barra laterale con l'aiuto degli elementi Ispeziona.

Una volta trovato il tuo ID widget e ID barra laterale, ora puoi andare al tuo file functions.php dall'Editor temi e incollare il codice che abbiamo fornito sopra.

Se guardi lo screenshot sopra, il nostro ID widget è ' estore_woocommerce_product_grid-1 '. Quando copi e incolli lo snippet, sostituisci " estore_woocommerce_product_grid-1 " con il tuo ID widget. E lo stesso vale con l'ID della barra laterale. Secondo il nostro tema, il nostro ID barra laterale è ' tg-column-4 collection-block ', devi sostituirlo con il tuo ID barra laterale, altrimenti il ​​codice non funzionerà.

Di conseguenza, puoi vedere che la sezione del widget promozionale non viene visualizzata sul front-end del sito Web di WooCommerce.

Questo è tutto! Hai disabilitato con successo il widget che vuoi nascondere in WooCommerce usando frammenti di codice. Puoi modificare i codici in base alle tue esigenze per nascondere più widget.

Bonus: come creare un widget di intestazione personalizzato

Sai già perché e come nascondere i widget in WooCommerce. Allo stesso modo, potresti voler creare un widget di intestazione personalizzato per il tuo sito web.

La maggior parte dei temi WordPress non ti consente di aggiungere aree widget sopra il contenuto o nell'intestazione. Ma se aggiungi un widget di intestazione personalizzato, il tuo sito Web può distinguersi dalla concorrenza e anche aumentare alcune funzionalità. Ad esempio, puoi visualizzare elementi come annunci, articoli recenti o qualcosa di simile.

La creazione di un widget per l'intestazione del cliente è molto semplice con l'aiuto di frammenti di codice. Tutto quello che devi fare è aggiungere uno script alla parte principale che è functions.php del tuo tema. Ma per aggiungere un widget di intestazione personalizzato, dobbiamo prima creare una nuova area del widget.

1. Crea una nuova area widget

Per creare una nuova area widget per il tuo widget di intestazione personalizzato, dovrai aggiungere uno snippet di codice ai file del tuo tema.

Ma prima, diamo un'occhiata alle aree widget disponibili fornite dal tuo tema. Quindi vai su Aspetto> Widget dalla dashboard di WordPress.

Tutte le aree dei widget attive del tema possono essere visualizzate qui. È qui che aggiungeremo anche la nuova area del widget.

Ora passiamo alla creazione di una nuova area widget. Abbiamo bisogno di regolare il file functions.php del nostro tema figlio in modo simile all'approccio programmatico per nascondere i widget. Puoi anche utilizzare un plug-in come Code Snippets se non sei abbastanza a tuo agio per modificare direttamente i file.

Utilizzeremo il plug-in Code Snippets per questo tutorial. Prima di tutto, installa il plugin e attivalo.

Dopo l'attivazione, possiamo trovare l'impostazione del plug-in nella dashboard di WordPress in Snippet > Tutti gli snippet . Ora fai clic su Aggiungi nuovo per creare un nuovo snippet.

Lo abbiamo chiamato " Widget intestazione personalizzato " ma puoi assegnargli il nome desiderato. Ora copia e incolla il codice seguente all'interno della sezione del codice.

 funzione quadlayers_widgets_init() {
register_sidebar( array(
'name' => 'Widget intestazione personalizzato',
'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'); 

Dopo aver incollato il codice e averlo salvato, il nuovo widget viene creato come widget intestazione personalizzata nel tuo sito WordPress.

2. Aggiungi il widget all'intestazione

Per aggiungere il widget all'intestazione, dobbiamo modificare il file header.php. Puoi individuare il file di intestazione nell'editor del tema navigando in Aspetto > Editor del file del tema dalla dashboard di WordPress. Ora apri il file di intestazione del tema (header.php) dall'elenco dei file del tema e incolla qui il codice seguente.

 <?php

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

<?php endif; ?>

Come al solito, aggiorna il file dopo aver aggiunto il codice.

Ora aggiungiamo un widget alla nuova area del widget. Qui abbiamo aggiunto un blocco di paragrafo per testare il widget.

Di conseguenza, dovresti essere in grado di vedere l'intestazione nella parte anteriore del sito Web.

Tuttavia, potresti aver notato che devi lucidare l'aspetto dell'intestazione per renderla attraente. Puoi seguire questa guida per personalizzarla ulteriormente e controllare la visibilità del widget di intestazione.

Conclusione

E questo conclude la nostra guida su come nascondere i widget in WooCommerce. Nascondere particolari widget può essere molto utile se non vuoi visualizzare elementi non necessari nel tuo sito web risultando in un sito web lento e disordinato . Considerando che, visualizzare solo i widget di cui hai effettivamente bisogno migliora l'usabilità complessiva del tuo negozio WooCommerce .

Per riassumere, ti abbiamo fornito due modi diversi per nascondere i widget nel tuo sito web:

• Utilizzo di un plug-in
• Programmaticamente

Il modo più semplice per nascondere i widget è utilizzare il plugin. Tuttavia, gli snippet con cui abbiamo lavorato oggi sono anche semplici e facili da personalizzare. Puoi personalizzarlo trovando l'ID del widget e rinominandolo per far funzionare il codice per il tuo sito web.

Inoltre, abbiamo incluso anche una sezione per creare un'intestazione personalizzata per creare spazio aggiuntivo per i widget senza ostruire il menu principale. Possono essere utili per visualizzare le tue ultime offerte, sconti, annunci in modo organizzato. Allo stesso modo, abbiamo anche una guida per aggiungere un widget personalizzato per un feed di Instagram utilizzando Instagram Feed Gallery se desideri aggiungere più widget personalizzati.

Infine, ecco alcuni altri articoli che potresti voler controllare per migliorare ulteriormente il tuo negozio WooCommerce e l'esperienza del cliente:

• Come modificare l'intestazione in WordPress
• I migliori plugin per personalizzare la pagina del prodotto WooCommer
• Come personalizzare i modelli WooCommerce

Puoi nascondere i widget nel tuo sito di eCommerce ora? L'hai mai fatto prima? Saremo lieti di saperlo nei commenti qui sotto.