Una guida per i designer a WooCommerce

Se stai progettando un negozio WooCommerce come Shopify o sviluppando un tema WooCommerce esistente, questo articolo Designers Guide To WooCommerce è per te. Questa composizione fornisce alcune informazioni in più sullo stile, sulla modifica dei design e altre informazioni che riguardano le pagine WooCommerce correlate.

Questo plugin è uno strumento intuitivo e molto flessibile; tuttavia, non tutti i siti Web saranno supportati. Utilizzando le funzionalità e gli approcci supportati da WooCommerce, puoi accelerare il processo di progettazione e sviluppo.

Consente agli utenti di personalizzare le modifiche ma con costi aggiuntivi. Il modo più veloce per vedere quali funzionalità ci sono è visitare la demo di Storefront all'interno di WooCommerce. Se hai bisogno di un modo per imparare in generale come utilizzare Woocommerce, controlla le guide della cupola per aiutarti a iniziare. WooCommerce crea le seguenti nuove pagine. Ci sono tipi di pagine per cui dovrai progettare.

Il primo sono le pagine dei prodotti. Queste pagine sono di due tipi, vale a dire: Pagine di archivio del prodotto e Pagine singole del prodotto.

Le pagine di archivio dei prodotti mostrano le miniature delle categorie di prodotti disponibili. Questi mostrano un'altra pagina di archivio del prodotto quando fai clic sulla miniatura della categoria. Quindi mostra il singolo prodotto quando fai clic sulla miniatura di un prodotto.

L'altro tipo è Product Single Pages. Qui, visualizzano singoli prodotti e combinano immagini del prodotto, informazioni sull'intestazione del prodotto, informazioni dettagliate sul prodotto e prodotti correlati, vendite incrociate e upsell.

Ha anche pagine speciali , che includono Carrello e Cassa . I carrelli della spesa vengono generalmente visualizzati in forma ridotta come widget della barra laterale, a volte in forma estesa nella pagina Carrello insieme alle informazioni sulla consegna. Il checkout, d'altra parte, è quando il cliente sta effettuando il check-out e richiede informazioni sull'indirizzo.

Diversi tipi di prodotti

Questo strumento ha diversi tipi di Prodotti;

Il primo è l'intestazione del prodotto che è divisa in cinque parti. Questi sono:

1. Nome del prodotto: vengono visualizzati nelle pagine di riepilogo/archivio e nelle singole pagine
2. Funzionalità del prodotto: vedrai nelle pagine di riepilogo/archivio e nelle pagine dei singoli
3. Immagine: le immagini in evidenza vengono visualizzate nel riepilogo e nelle immagini aggiuntive nella pagina del singolo prodotto
4. Descrizione lunga: viene mostrata nell'area Descrizione prodotto nella parte inferiore della pagina del singolo prodotto
5. Breve descrizione: viene mostrata nella parte superiore della pagina del singolo prodotto

Questo strumento consentirà anche a un utente di accedere al prodotto.

Ogni categoria necessita di un'immagine di categoria fornita e di una descrizione e può anche avere sottocategorie. Ad esempio, Scarpa è una categoria e la marca di scarpe è una sottocategoria. Gli archivi delle categorie di prodotti vengono generati automaticamente con le seguenti sezioni: titolo o nome della categoria, descrizione della categoria, miniatura di una categoria per ogni sottocategoria della categoria corrente, thumbs prodotto opzionale include il titolo, il prezzo e Aggiungi al carrello per ogni prodotto in la categoria corrente. Facendo clic su una categoria si apre una nuova categoria, facendo clic sulla miniatura di un prodotto si apre il prodotto.

Inoltre, nelle Pagine dei prodotti, queste vengono generate automaticamente con quanto segue:

Immagini del prodotto: si tratta di immagini in primo piano e immagini supplementari per il prodotto. Titolo del prodotto, prezzo del prodotto, descrizione breve del prodotto, quantità da aggiungere al carrello (con + e controlli), pulsante Aggiungi al carrello, categorie di SKU del prodotto (unità di stoccaggio) e tag.

Le schede del prodotto includono la descrizione lunga del prodotto, inclusa la galleria di immagini opzionale, informazioni aggiuntive come il ticket degli attributi del prodotto da visualizzare sulla pagina del prodotto e le recensioni dei prodotti opzionali. Facendo clic su una categoria si apre una nuova categoria, facendo clic sulla miniatura di un prodotto si apre il prodotto.

Upsells - Queste sono le cose "potrebbe piacerti anche" seguite da pollici/titoli per upsell.

Vendite incrociate: questi sono i prodotti correlati seguiti dalle miniature.

La presentazione del prodotto, le opzioni sono la presentazione Standard e Optional. Lo standard mostra l'immagine in primo piano nella parte superiore della pagina del prodotto, con le miniature delle immagini supplementari sotto in 3 colonne di miniature. Al contrario, la presentazione opzionale mostra l'immagine in primo piano senza miniature sotto e mostra tutte le immagini nella scheda Descrizione.

Un'altra parte dello strumento sono i widget di ricerca del prodotto che sono disponibili per essere inseriti nei widget della barra laterale o nel footer. Se vuoi cercare qualsiasi sito web, ha le Opzioni di ricerca a livello di sito. Sotto c'è la casella di ricerca del prodotto che ti consente di cercare il nome di un prodotto, una breve descrizione e una lunga descrizione. L'altra divisione delle opzioni di ricerca Wide è denominata drill-down per categoria. È un campo a tendina che permette di selezionare qualsiasi categoria o sottocategoria. Il kit cloud di tag orgogliosi ha un menu a discesa che ti consentirà di selezionare i tag dei prezzi.

I widget di ricerca delle opzioni di ricerca per categorie di prodotti appariranno solo quando vengono visualizzati archivi di categorie di prodotti generati automaticamente. Il primo è la navigazione a strati. Ciò consente all'utente di perfezionare i prodotti in base agli attributi e aiuta efficacemente l'utente su ciò che sta cercando. Filtro prezzo prodotto: visualizza una scala mobile che consente di filtrare i prodotti in base a una fascia di prezzo. I più venduti: mostra titolo/pollice/prezzo per un elenco selezionato automaticamente di prodotti più venduti. Il prodotto in evidenza mostra titolo/pollice/prezzo per i prodotti contrassegnati come Prodotti in evidenza. In vendita: mostra i prodotti per i quali è stato inserito un prezzo scontato oltre al prezzo.

Se un utente vuole dare uno stile al proprio WooCommerce, abbiamo opzioni come Product thumbs. Quando i prodotti vengono visualizzati come miniature del prodotto, vengono visualizzati 4 elementi, tra cui miniatura, titolo, prezzo, aggiungi al carrello. Stile CSS che può essere utilizzato per lo sfondo del prodotto, il bordo del prodotto, il riempimento e il margine. La prossima è la miniatura. Questi includono bordo, riempimento e margini. Il titolo include carattere, peso, colore e dimensione, come il prezzo. Sotto aggiungi al carrello include il colore del pulsante, il colore dell'etichetta, il bordo e il raggio.

Anche sullo strumento è mostrato l'adesivo in vendita, la parola "vendita" appare sopra le miniature dei prodotti in vendita: è possibile utilizzare lo stile CSS: colore di sfondo, colore del carattere, colore del bordo. Larghezza bordo, bordo pieno/tratteggiato, raggio bordo.

Le variazioni del prodotto consentono a un cliente di creare un prodotto di abbigliamento disponibile in diversi colori o design diversi. Quando vengono utilizzate varianti di prodotto, le pagine dell'archivio prodotti visualizzeranno un pulsante "Scegli opzioni" anziché un pulsante Aggiungi al carrello.

In sintesi, abbiamo definito gli elementi principali a cui dovrai pensare durante la progettazione di un negozio WooCommerce. Abbiamo spiegato i diversi tipi di pagine, le informazioni sul prodotto e le opzioni di ricerca e stile. Divertiti a costruire il tuo negozio WooCommerce.

Leggi di più sui temi Woocommerce WordPress qui.