L’esperienza dell’utente su un sito E-Commerce passa anche dalla capacità di trovare velocemente ciò che cerca utilizzando un filtro prodotti efficace. Ogni negozio online che si rispetti, infatti, presenta al suo interno un sistema che consenta di delimitare il più possibile l’ambito di ricerca.
Per un portale sviluppato con WooCommerce, noto plugin del CMS WordPress, è possibile utilizzare una serie di strumenti che consentono di creare al meglio uno o più filtri prodotto. Nella guida di oggi vediamo WooCommerce Product Filter, disponibile anche in versione Free.
Dopo aver seguito il consueto percorso Plugin -> Aggiungi nuovo ed aver scritto il nome del plugin nella barra di ricerca, fare clic su Installa adesso.
Una volta terminata l’installazione, fare clic su Attiva per essere riportati nella pagina con tutti i plugin presenti nel nostro backend. Sotto alla voce relativa al plugin appena installato, fare clic su Settings per iniziare ad impostare il filtro prodotti. Nella prima schermata ci verrà richiesto di creare il primo filtro.
Facendo clic su Create o su Add New Filter in alto ci verrà innanzitutto richiesto di dare un nome al filtro. Successivamente, inizieremo con le impostazioni del login a partire dai vari tipi di filtro applicabili. Dalla lista presente nella versione Free del plugin possiamo scegliere tra tanti attributi, i più importanti sono:
- Prezzo
- Categorie prodotti
- Tag prodotti
- Caratteristiche
- Valutazione
Una volta deciso quale aggiungere sarà possibile iniziare ad impostarlo ed un’anteprima sulla destra ci mostrerà le modifiche.
Facciamo un esempio con la voce Rating (valutazione). Una volta selezionato nel menu a tendina, fare clic su Add per inserirlo nel filtro da pubblicare. Dopo averlo rinominato (in italiano, visto che il plugin è in inglese) potremo scegliere innanzitutto se rendere espandibile o meno questa voce del filtro. Successivamente possiamo applicare vari filtri al modo in cui vengono mostrate le valutazioni. La versione Pro del plugin consente anche di inserire direttamente le stelle anziché i singoli voti in numero.
Questa operazione può essere ripetuta per ogni voce da aggiungere nel filtro. Una volta aggiunti tutti i filtri desiderati possiamo passare alla scheda Options.
Questa parte contiene quattro sotto-schede, esse sono Main, Buttons, Content e Loader. Iniziamo con quella principale, nella quale si può decidere su quali pagine del sito mostrare il filtro e, eventualmente su quali device. Proseguendo è possibile anche impostare quanti prodotti visualizzare, abilitare o meno la ricerca Ajax e forzare l’adattamento al tema principale del sito.
La sotto-scheda Buttons consente innanzitutto di inserire o togliere il pulsante Filtra oltre che di rinominarlo a proprio piacere. È possibile poi aggiungere il tasto per ripulire il filtro con un solo clic e, infine, decidere la posizione e l’ordine del (o dei) pulsanti.
Nella sotto-scheda Content decideremo tutta una serie di indicatori da mostrare come risultati delle ricerche tramite filtro prodotti. Per fare qualche esempio, cosa far apparire quando la ricerca mediante filtro non restituisce risultati oppure se mostrare per prime nella colonna del filtro tutte le voci scelte.
L’ultima sotto-scheda delle Opzioni è quella del Loader, ovvero dell’icona di caricamento che appare ogni volta che vengono selezionate le caratteristiche del filtro prodotti. Il consiglio in questo caso è di disabilitarla usando il primo interruttore, questo perché l’unica icona disponibile nella versione Free è il logo dello sviluppatore del plugin.
L’ultima scheda che prendiamo in considerazione è quella chiamata Design. All’interno di essa potremo modificare tutto quel che riguarda le dimensioni del blocco e degli elementi al suo interno. Anche qui è possibile forzare l’utilizzo del tema principale per il filtro. Come accade con quasi tutti i plugin, anche le impostazioni di WooCommerce Product Filter mettono a disposizione un CSS Editor ed un JS Editor per fare le proprie personalizzazioni.
Al termine di tutte queste operazioni, fare clic sul tasto Save in alto a destra (sopra l’anteprima del filtro). Per poterlo utilizzare sul proprio sito E-Commerce sarà necessario copiare lo shortcode ed utilizzarlo laddove si vuole mettere a disposizione il filtro.
