Personalizza la ricerca di prodotti WooCommerce sul tuo sito WordPress

Vuoi personalizzare la ricerca dei prodotti WooCommerce sul tuo negozio online? WooCommerce fornisce una pagina del negozio separata per un elenco di prodotti. Modificando le ricerche dei prodotti, il tuo cliente può filtrare il prodotto desiderato nella pagina del negozio stessa. In questo articolo, studiamo come personalizzare la ricerca di un prodotto WooCommerce sul sito Web di WordPress.

WordPress viene fornito con il modulo di ricerca integrato. Quando un utente immette una parola chiave in un campo di ricerca, verrà reindirizzato alla pagina di ricerca in cui verrà visualizzato il contenuto correlato alla parola chiave. In WordPress, la pagina di ricerca normalmente ha l’aspetto di una pagina di elenco dei post.

Questo flusso di ricerca è ideale per i siti Web CMS. Ma, quando si tratta di WooCommerce, dobbiamo modificare questo flusso.

Per WooCommerce, quando un utente cerca il prodotto dovrebbe mostrare il risultato filtrato nella pagina del negozio. Non ha alcun senso mostrare il risultato nel formato di una pagina di elenco dei post.

Lascia che te lo spieghi attraverso gli screenshot.

Nel mio caso, sto usando il tema "ventiquindici". Ho installato il plugin WooCommerce e alcuni prodotti sono elencati nella mia pagina del negozio.

Ora, quando inserisco la parola chiave "sviluppo" nel campo di ricerca, verrà reindirizzato a una pagina in cui vedo il prodotto come mostrato nello screenshot qui sotto.

Questo è qualcosa che non vogliamo su un sito web. Dopotutto, è un negozio online, quindi preferiamo che la ricerca del prodotto venga filtrata nella pagina del negozio come di seguito.

Detto questo, vediamo come personalizzare la ricerca dei prodotti in WooCommerce.

Personalizza la ricerca dei prodotti di WooCommerce

WooCommerce memorizza tutti i prodotti con il "prodotto" post_type. Per raggiungere il nostro obiettivo, dobbiamo passare il parametro post_type=productnell’URL di ricerca.

Fondamentalmente, quando premiamo il pulsante di ricerca, dobbiamo modificare l’URL

YOUR_SITE_URL/?s=sviluppo

Con

YOUR_SITE_URL/?s=development&post_type=product

Per questo, dobbiamo creare un searchform.phpfile nella directory del nostro tema attivo. Questo è il file da cui WordPress visualizza un modulo di ricerca. Se questo file non viene trovato in una cartella del tema, il modulo di ricerca viene visualizzato dal file principale di WordPress. Lo sviluppatore dovrebbe creare questo file nella cartella del tema se non esiste.

Se hai già il searchform.phptuo tema, devi solo aggiungere un campo nascosto al modulo come mostrato nel codice sottostante.

searchform.php

<form method="get" action="<?php echo home_url('/'); ?>">
    <input type="text" name="s" placeholder="What you are looking for?" value="<?php the_search_query(); ?>">
    <input type="hidden" name="post_type" value="product">
</form>

Qui, dovresti aggiungere del CSS a questo modulo e abbinarlo al design del tuo sito web.

Nota che abbiamo passato un campo nascosto con il nome ‘post_type’ e il valore come ‘prodotto’. Questa è la vera logica per personalizzare la ricerca del prodotto in WooCommerce.

Ora, prova a inserire qualsiasi nome di prodotto nel campo di ricerca, ti reindirizzerà alla pagina del negozio. E nella pagina del negozio, vedrai il risultato filtrato relativo alla parola chiave.

Spero che tu capisca come personalizzare la ricerca dei prodotti WooCommerce sul tuo sito Web WordPress. Mi piacerebbe sentire i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.

articoli Correlati

• Una guida rapida sull’API REST di WooCommerce
• Come aggiungere endpoint personalizzati all’API di WordPress
• Come visualizzare prodotti correlati utilizzando l’API REST di WooCommerceCommerce