Il primo shop indipendente
al mondo per lo sviluppo di plugin per WooCommerce
Filtra per categoria
E-COMMERCE UX VIDEOTRAINING

E-COMMERCE UX VIDEOTRAINING

Scopri i nostri tutorial e migliora il tuo e-commerce per fidelizzare i clienti e aumentare le vendite. visualizza i nostri corsi

Consulenza UX e-commerce

Consulenza UX e-commerceIn arrivo

Faremo una consulenza sul tuo e-commerce e ti aiuteremo ad ottimizzarlo per ottenere un indice di conversione più alto.

Italiano

< Torna agli articoli

YITH WooCommerce Product Add-ons & Extra Options 2.0: lo strumento definitivo per aggiungere qualsiasi tipo di opzione ai prodotti del tuo shop

Da quando abbiamo condiviso online che presto sarebbe stata disponibile una nuova versione del nostro plugin YITH WooCommerce Product Add-ons in tantissimi siete stati presi dalla curiosità e ci avete contattato chiedendoci maggiori informazioni.

Il plugin, a cui abbiamo modificato leggermente il nome e che da oggi si chiamerà YITH WooCommerce Product Add-ons & Extra Options, è sempre stato uno dei tool più popolari del nostro catalogo, con quasi 20.000 installazioni attive registrate alla data odierna.

Ma ciò non toglie che avesse davvero bisogno di un bel redesign: siamo i primi a riconoscere quanto la configurazione delle opzioni apparisse ostica (soprattutto agli utenti alle prime armi) e quanto fosse necessario aggiungere finalmente le funzionalità richieste a più riprese da chi da anni utilizza il nostro plugin.

Non è stato un processo facile o veloce, ma finalmente possiamo ufficializzare il rilascio della versione 2.0: in questo redesign a 360 gradi abbiamo lavorato per mesi sul fronte dell’usabilità, del design, dell’ottimizzazione del codice e della performance per fare di questo plugin uno dei migliori nell’ecosistema di WooCommerce.

Ci siamo riusciti? Noi ne siamo entusiasti, ma ovviamente sta a voi giudicare.

Le novità della versione 2.x del plugin YITH WooCommerce Product Add-ons & Extra Options

1. La nuova UX: l’importanza dell’usabilità

La prima sfida nel redesign di questo plugin è stata senz’altro quella di rendere il pannello di configurazione del plugin più intuitivo e facile da utilizzare. Abbiamo cominciato con il racchiudere gli add-ons (nel nuovo plugin rinominati “options”) e tutte le opzioni generali e di stile all’interno di un unico pannello, uniformando lo stile di quest’ultimo a quello del nuovo framework già in uso nei nuovi plugin.

New UX

Utilizzare un framework comune in tutti i nostri plugin migliora esponenzialmente l’usabilità degli stessi: ecco perchè molti elementi o soluzioni utilizzate in YITH WooCommerce Product Add-ons & Extra Options sono speculari a quelle inserite in plugins come Ajax Product Filter, Multi-Currency, Wishlist: il nostro obiettivo è che una volta familiarizzati con anche solo uno dei nostri plugin, possiate poi trovare intuitiva l’interfaccia di tutti gli altri strutturati seguendo un pattern comune.

2. La nuova UI: perchè anche l’occhio vuole la sua parte

La cura dell’estetica e dei dettagli è diventato negli ultimi uno dei nostri punti di forza. Ecco perchè anche YITH WooCommerce Product Add-ons & Extra Options è finito sotto i ferri del nostro chirurgo estetico e ha subito un miglioramento sostanziale del design a front-end.

New UI

Spazi bianchi, più opzioni per personalizzare il plugin senza toccare il codice, una tipografia più curata, una griglia per scegliere quante opzioni mostrare per riga: sembrano piccolezze, ma in realtà sono quelle che fanno la differenza per gli utenti che visiteranno il tuo shop.

3- Il miglioramento del codice

Una buona parte del processo di redesign è stato dedicato all’ottimizzazione del codice. Il plugin è stato sviluppato diversi anni fa e nel tempo sono emerse best-practices che avremmo dovuto applicare ma che, per un motivo o per un altro, sono state sempre rimandate.

Code refactoring

Un team di developers senior ha effettuato una profonda analisi del codice per individuare errori e criticità e per rendere il plugin piu stabile, piu performante e più sicuro.

4- Il miglioramento di tutte le opzioni già esistenti

Prima di mettere nuova carne al fuoco abbiamo migliorato in modo esponenziale tutte le opzioni già presenti nel plugin.

Abbiamo ad esempio arricchito l’opzione che mostra un campo data aggiungendo nuove funzionalità: dalla versione 2.x puoi impostare la data di default da mostrare, configurare un intervallo di date selezionabili specifico (ad esempio per fare in modo che l’utente possa selezionare come data un giorno compreso tra il 12 aprile e il 20 aprile) o un intervallo di giorni (così che l’utente possa selezionare un giorno dalla data corrente a massimo i sette giorni successivi). Puoi anche disabilitare giorni specifici, in modo che l’utente non possa selezionare mai, ad esempio, il sabato e la domenica come data di consegna di un prodotto.

Date field

Per tutti gli add-ons abbiamo aggiunto funzionalità e opzioni di stile per facilitare la personalizzazione degli stessi.

Ha una veste migliore anche la funzionalità conditional logic con cui puoi ad esempio scegliere di mostrare una specifica opzione solo se quella precedente è stata selezionata dall’utente: le regole adesso sono ancora più intuitive da configurare.

Conditional logic

5- Nuova funzionalità “griglia” per posizionare le opzioni nella pagina prodotto

Per rendere il plugin piu versatile abbiamo aggiunto delle opzioni che permettono di decidere come posizionare le opzioni all’interno della pagina prodotto. Puoi scegliere di mostrare una serie di label una sotto l’altra (basterà definire “1” per riga) o di impostarne multiple nella stessa riga (nell’esempio sotto ne abbiamo impostate 4).

Grid layout

Se vuoi che le opzioni abbiano tutte la stessa larghezza, devi solo attivare l’opzione “Grid” e definire una larghezza in % che verrà assegnata in modo uniforme a tutte le opzioni.

6- Opzioni per inserire titoli, testi e separare graficamente le opzioni

Dalla 2.x oltre alle opzioni che l’utente può attivamente selezionare per configurare il prodotto abbiamo aggiunto delle opzioni che ti permettono di inserire titoli, testi, spazi bianchi e bordi di separazione tra una opzione e l’altra o tra i diversi blocchi di opzioni.

HTML Elements

7- Nuova opzione di tipo “prodotto”

Con questo update abbiamo aggiunto una feature molto richiesta da chi già utilizza il plugin: l’opzione di tipo “prodotto” con cui è possibile inserire e suggerire come “opzioni correlate” all’interno di un prodotto altri prodotti dello shop.

Product type

Questa opzione è interessante perché in primo luogo, permette di strutturare una strategia di upsell e promuovere prodotti correlati a quello visualizzato dall’utente, offrendoli come “opzioni aggiuntive o consigliate”.

Upsell products options

La stessa opzione può essere utilizzata per vendere prodotti di tipo “bundle” o assemblabili dall’utente, come ad esempio un computer.

Basterà creare un prodotto “computer” base con prezzo a zero e inserire nel prodotto tutte le opzioni che l’utente può scegliere per la configurazione: processore, scheda madre, memoria, ecc.

Assemble your computer

Conclusioni

Queste sono solo alcune delle novità, ma elencarle tutte in questo articolo sarebbe impossibile.

Ecco perché ti consigliamo di dare un’occhiata alla nuova live demo di YITH WooCommerce Product Add-ons & Extra Options 2.0: troverai nove prodotti di esempio configurati con le diverse opzioni disponibili nel plugin. Non dimenticare di cliccare sul pulsante “Launch admin demo” per accedere al pannello di amministrazione del plugin e toccare con mano l’usabilità della nuova interfaccia!

Visita anche la pagina del plugin YITH WooCommerce Product Add-ons & Extra Options per maggiori dettagli e per un elenco completo di tutte le funzionalità di quello che consideriamo un altro fiore all’occhiello del nostro catalogo.

Articoli consigliati

Iscriviti alla nostra newsletter per ricevere tutte le novità nella tua email!