Come nascondere i prodotti esauriti in WooCommerce

Cerchi ottimi modi per personalizzare le pagine dei tuoi prodotti WooCommerce e migliorare l'esperienza utente? Allora sei nel posto giusto. In questa guida imparerai diversi metodi per nascondere i prodotti esauriti in WooCommerce.

Perché nascondere i prodotti esauriti in WooCommerce?

Se gestisci un'attività online che vende prodotti fisici, alcuni dei tuoi articoli saranno esauriti di tanto in tanto. In questi casi puoi:

• Nascondi il prezzo del prodotto e lo stock dalle ricerche su Google e consenti agli acquirenti di accedere alla pagina del prodotto anche se il prodotto non è disponibile
• Visualizza il prodotto nascondendo il prezzo e aggiungi un pulsante "notificami" che gli utenti possono selezionare per ricevere una notifica push quando il prodotto sarà di nuovo disponibile
• Rimuovere il pulsante Aggiungi al carrello in modo che i clienti non possano acquistare il prodotto
• Nascondi quegli articoli esauriti

Ognuna di queste opzioni ha pro e contro. In questa guida ci concentreremo su come nascondere i prodotti che non sono disponibili. Per impostazione predefinita, in WooCommerce, se un prodotto si esaurisce, la pagina del tuo Negozio visualizzerà un pulsante Leggi di più invece del classico pulsante Acquista o Aggiungi al carrello . Inoltre, l'opzione per acquistare il prodotto esaurito sarà disabilitata nella pagina del prodotto.

Questo può essere scomodo per alcuni utenti, soprattutto se vendi prodotti per periodi di tempo limitati o se modifichi frequentemente l'inventario. Quindi, se desideri visualizzare solo i prodotti attualmente disponibili e pronti per essere spediti, nascondere temporaneamente gli articoli non disponibili può essere una buona idea. Diamo un'occhiata a come puoi farlo in WooCommerce.

Come nascondere i prodotti esauriti in WooCommerce

Esistono due modi principali per nascondere i prodotti esauriti in WooCommerce:

1. Dalle impostazioni di WooCommerce
2. Programmaticamente

Diamo un'occhiata più da vicino a entrambi i metodi.

1) Nascondi i prodotti esauriti dalle Impostazioni di WooCommerce

Il modo più semplice per nascondere i tuoi prodotti non disponibili è attraverso le Impostazioni WooCommerce . Nella dashboard di WordPress, vai su WooCommerce > Impostazioni > Prodotti > Inventario. Lì vedrai un'opzione chiamata Visibilità esaurita . Basta abilitarlo e fare clic su Salva modifiche .

Ora, tutti i tuoi prodotti esauriti verranno automaticamente nascosti nelle seguenti pagine:

• Pagina del negozio
• risultati di ricerca
• categoria di prodotto
• Pagine di tag prodotto
• Sezione prodotti correlati
• Sezioni Upsell e Cross-sell

Se vuoi una soluzione semplice e vuoi nascondere i prodotti non disponibili su tutte quelle pagine, questa è un'ottima alternativa. Tuttavia, se desideri maggiore flessibilità e vorresti avere la possibilità di nascondere i tuoi prodotti esauriti in pagine specifiche , dovrai utilizzare un po' di codice.

2) Nascondi i prodotti WooCommerce esauriti in modo programmatico

Per nascondere i prodotti esauriti in WooCommerce in modo programmatico, dovrai utilizzare i filtri hook . Se non hai dimestichezza con gli hook, ti ​​consigliamo di dare un'occhiata a questa guida per saperne di più su di essi e su come sfruttarli al meglio.

In questo tutorial, ti mostreremo alcuni script che puoi aggiungere direttamente al tuo sito per nascondere i prodotti esauriti.

Prima che inizi

Poiché modificheremo alcuni file principali, ti consigliamo di eseguire il backup del tuo sito. Inoltre, crea un tema figlio o utilizza uno di questi plug-in per assicurarti di non perdere le modifiche la prossima volta che aggiorni il tema.

Gli script che ti mostreremo oggi dovrebbero essere contenuti nel file functions.php . Per aprire questo file, nella dashboard di amministrazione di WordPress vai su Aspetto > Editor temi . Quindi, fai clic sul file functions.php nella barra laterale destra per aprire il file Funzioni del tema.

Puoi semplicemente incollare gli script che abbiamo elencato di seguito in questa sezione.

Ora, vediamo alcuni esempi per nascondere i prodotti esauriti in WooCommerce.

2.1) Come nascondere i prodotti esauriti nella pagina dell'archivio del negozio

Puoi utilizzare la seguente funzione con il filtro hook woocommerce_product_query_meta_query per nascondere i prodotti esauriti nelle pagine dell'archivio del tuo negozio . Aggiungi semplicemente il seguente script al file functions.php del tuo tema figlio e aggiorna il file.

 add_filter('woocommerce_product_query_meta_query', 'shop_only_instock_products', 10, 2);
 funzione shop_only_instock_products($meta_query, $query) {
 // Solo nelle pagine dell'archivio del negozio
 if( is_admin() || is_search() || ! is_shop() ) return $meta_query;

 $meta_query[] = array(
 'chiave' => '_stock_status',
 'valore' => 'non disponibile',
 'confronta' => '!='
 );
 restituisce $meta_query;
 } 

2.2) Come nascondere i prodotti esauriti nella home page

Se vuoi nascondere i tuoi prodotti esauriti solo dalla tua home page , puoi utilizzare la seguente funzione utilizzando lo stesso hook del filtro woocommerce_product_query_meta_query .

 add_filter('woocommerce_product_query_meta_query', 'filter_product_query_meta_query', 10, 2);
 funzione filter_product_query_meta_query($meta_query, $query) {
 // Solo nella home page di woocommerce
 if( è_front_page() ){
 // Escludi prodotti "esauriti"
 $meta_query[] = array(
 'chiave' => '_stock_status',
 'valore' => 'non disponibile',
 'confronta' => '!=',
 );
 }
 restituisce $meta_query;
 } 

2.3) Come nascondere i prodotti esauriti nelle pagine di ricerca

Per nascondere i prodotti non disponibili da tutte le tue pagine di ricerca , puoi utilizzare la seguente funzione che utilizza l'action hook pre_get_posts . Basta incollarlo nel functions.php del tuo tema figlio e premere il pulsante Aggiorna file . In questo modo, se i tuoi clienti cercano uno qualsiasi dei tuoi prodotti esauriti, non saranno in grado di trovarlo.

 add_action('pre_get_post', nascondi_fuori_di_stock_in_ricerca');
 funzione hide_out_of_stock_in_search($query){
 if( $query->is_search() && $query->is_main_query() ) {
 $query->set('meta_key', '_stock_status');
 $query->set('meta_value', 'instock');
 }
 } 

2.4) Come nascondere i prodotti esauriti nelle sezioni dei prodotti correlati

Se vuoi assicurarti che nessuna delle sezioni relative ai tuoi prodotti mostri i tuoi prodotti esauriti, puoi utilizzare questo script. In questo modo, i tuoi clienti riceveranno solo consigli sui prodotti che possono acquistare immediatamente.

 funzione hide_out_of_stock_option($opzione){
 restituire 'sì';
 }
 add_action( 'woocommerce_before_template_part', function($nome_modello) {
 if( $nome_modello !== "prodotto singolo/correlato.php" ) {
 Restituzione;
 }
 add_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'hide_out_of_stock_option' );
 } );
 add_action( 'woocommerce_after_template_part', function($nome_modello) {
 if( $nome_modello !== "prodotto singolo/correlato.php" ) {
 Restituzione;
 }
 remove_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'hide_out_of_stock_option' );
 } ); 

Se vuoi imparare come rimuovere facilmente la relativa sezione del prodotto, dai un'occhiata a questa guida.

Come rimuovere il testo Esaurito su un prodotto specifico

Un'altra alternativa interessante è nascondere il testo esaurito solo da prodotti specifici usando un po' di CSS . In questo modo, puoi visualizzare determinati prodotti nel tuo negozio ma disabilitare l'opzione per acquistarli. Questo può essere utile se stai per lanciare un nuovo prodotto e vuoi creare un po' di clamore o quando aggiungi un'opzione per consentire agli utenti di ricevere una notifica quando l'articolo sarà di nuovo disponibile.

Per rimuovere il testo esaurito su un prodotto specifico, devi controllare l' ID prodotto dell'articolo che desideri nascondere. Per questo, nella dashboard di amministrazione di WordPress vai su Prodotti e passa il mouse sopra il prodotto e copia l' ID prodotto sotto il prodotto WooCommerce specifico. Ad esempio, nel nostro caso, l'ID prodotto è 37.

Quindi, vai su Aspetto > Personalizza > CSS aggiuntivo .

Successivamente, incolla il seguente codice CSS e premi Pubblica . Ricordati di sostituire la xx con il tuo numero ID postale.

 .postid-xx .out-of-stock { display: nessuno !important; }

Nel nostro caso, per nascondere il testo esaurito sul nostro prodotto specifico con ID prodotto 37, utilizzeremo questo codice:

 .postid-37 .out-of-stock { display: nessuno !important; } 

Inoltre, puoi anche nascondere il testo esaurito da tutti i tuoi prodotti WooCommerce utilizzando questo codice CSS.

 .woocommerce-page .out-of-stock { display: nessuno !important; }

Ricordati di salvare le modifiche per finalizzare la personalizzazione e il gioco è fatto!

Bonus: non mostrare stock di prodotto

Invece di rimuovere i prodotti esauriti, puoi anche decidere se mostrare o meno lo stock dei tuoi prodotti. Se vai su WooCommerce > Impostazioni > Prodotti > Inventario e vai a Formato di visualizzazione Stock , vedrai tre opzioni:

1. Mostra sempre la quantità rimanente in magazzino
2. Mostra la quantità rimanente in stock solo quando è bassa
3. Non mostrare mai la quantità rimanente in magazzino

Selezionando la terza opzione, non visualizzerai lo stock del prodotto nella pagina del prodotto. Tuttavia, questo non si applica ai prodotti variabili. Nelle pagine dei prodotti variabili, gli utenti vedranno le etichette " Disponibile " o " Non disponibile " per la variante scelta.

La buona notizia è che puoi nascondere l'etichetta dello stock del prodotto con un po' di codice.

Per rimuovere le informazioni sulle scorte per i prodotti variabili, aggiungi semplicemente il seguente codice al tuo file functions.php .

NOTA : ancora una volta, mentre modifichi i file principali, ricorda di eseguire il backup del tuo sito e creare un tema figlio prima di aggiungere lo snippet di codice.

 // Rimuove le informazioni sulle scorte dalla pagina del prodotto per i prodotti variabili
funzione quadlayers_remove_stock_data_variable_products($dati) {
    unset($data['availability_html']);
    restituire $dati;
}
add_filter('woocommerce_available_variation', 'quadlayers_remove_stock_data_variable_products', 99);

Questo è tutto! In questo modo puoi rimuovere le informazioni sulle scorte dalla pagina del prodotto per i tuoi prodotti variabili . Per ulteriori informazioni, controlla questa pagina.

Raccomandazioni finali

L'aggiunta di righe di codice ai file del tema nel modo sbagliato può danneggiare il tuo sito, quindi prima di iniziare a personalizzare, ricorda quanto segue:

• Genera un backup completo del tuo sito
• Usa sempre un tema figlio per qualsiasi modifica di codice o script. Consulta la nostra guida se non sai come crearne uno
• Testa le modifiche individualmente per essere in grado di identificare quale causa problemi
• Se stai utilizzando più codici, assicurati che funzionino senza problemi in tutti i possibili scenari quando li combini

Conclusione

In sintesi, se desideri mostrare solo i prodotti che gli acquirenti possono acquistare nel tuo negozio, nascondere gli articoli non disponibili può essere una buona idea per coloro che vendono prodotti fisici.

In questa guida, ti abbiamo mostrato come nascondere i prodotti esauriti in WooCommerce in due modi diversi:

1. Dalle impostazioni di WooCommerce
2. Programmaticamente

Se vuoi una soluzione facile e vuoi nascondere i prodotti non disponibili da tutte le pagine, farlo dalle impostazioni di WooCommerce è un'ottima scelta. È facile e veloce e chiunque può farlo. Se vuoi avere più flessibilità e nascondere i prodotti solo su determinate pagine, devi usare un po' di codice. C'è molto di più che puoi fare, quindi ti invitiamo a prendere questi script come base e personalizzarli per sfruttare al meglio il tuo negozio.

Infine, abbiamo visto come rimuovere il testo esaurito da prodotti specifici utilizzando un po' di CSS .

Fateci sapere se avete domande, saremo felici di aiutarvi.

Conosci altri modi per nascondere i prezzi esauriti? Fatecelo sapere nella sezione commenti qui sotto!