WooCommerce è appena diventato ancora più semplice con GeneratePress Premium 1.8 . Naturalmente non sarebbe un sito Flint Skin se non ci fosse un po’ di CSS e alcune funzioni personalizzate. Ma la stragrande maggioranza di ciò che vedi è stato creato attraverso il Customizer.
Pagina del negozio Woo
Nuove funzionalità di GP Premium 1.8
- Visualizza il sottomenu del mini-carrello
Non c’è più bisogno di un plugin grazie a questo bellissimo mini-carrello che viene mostrato quando si passa il mouse sull’icona del carrello navale - Contenuto della voce di menu
Scegli tra Quantità e Numero di voci. Ho scelto quest’ultima opzione - Visualizza il pannello del carrello su Aggiungi al carrello
Sostituisce la notifica standard di WooCommerce per l’aggiunta al carrello con un fantastico pannello a scorrimento.
Pagina del negozio Prodotto - aggiungi al carrello ( desktop )
Utilizziamo un po’ di CSS per creare un effetto show / hide al passaggio del mouse. Questo utilizza alcuni CSS che puoi trovare nel Customizer > CSS aggiuntivi. L’aspetto è il seguente:
.woocommerce ul.products li.product {
overflow: hidden;
}
.woocommerce ul.products li.product:hover .button {
-webkit-transform: translatey(0) !important;
transform: translatey(0) !important;
}
.woocommerce ul.products li.product .button {
font-size: 12px;
line-height: 15px;
padding: 8px 12px;
min-height: 15px;
font-weight: bold;
text-transform: uppercase;
}
@media (min-width: 1024px) {
.woocommerce ul.products li.product .button {
position: absolute;
top: 0;
-webkit-transform: translatey(-150%);
transform: translatey(-150%);
-webkit-transition: 0.35s;
transition: 0.35s;
margin-top: 10px;
margin-left: 10px !important;
}
}Gli angoli raggiati sono stati aggiunti utilizzando il CSS del pulsante, descritto nella Guida allo styling.
Distintivo di vendita
Per completare il posizionamento e gli angoli arrotondati dell’aggiunta al carrello ho utilizzato questo CSS:
.woocommerce span.onsale {
position: absolute;
margin: 10px !important;
border-radius: 4px !important;
}Barre laterali di WooCommerce - Comuni
Il sito utilizza la barra laterale destra standard, piena di widget WooCommerce. Naturalmente sono presenti alcuni CSS per aggiungere i bordi, regolare il padding e i margini. L’aspetto è questo:
@media (min-width: 768px) {
#right-sidebar {
border-left: 1px solid #d6d7d8;
}
#right-sidebar .widget {
margin-bottom: 0;
}
#right-sidebar aside:first-child {
padding-top: 0;
}
#right-sidebar aside:not(:first-child) {
border-top: 1px solid #d6d7d8;
}
}Consulta le note separate sulla barra laterale dei prodotti singoli.
WooCommerce Prodotto singolo
Con GP Premium 1.8 la pagina del prodotto singolo ha ricevuto un’attenzione particolare. A parte gli elementi di aggancio e gli angoli arrotondati dei pulsanti, tutto lo stile è controllato dal Customizer. Fantastico. Grazie a queste nuove caratteristiche, si utilizza pochissimo Woo CSS. Quindi, per prima cosa, dai un’occhiata a tutte le nuove funzionalità nel Customizer > Layout > WooCommerce.
Nuove funzioni GP
- Larghezza dell’immaginedel prodotto
Imposta il 65% perché questo sito deve essere incentrato sull’immagine. - Visualizza il pannello aggiungi al carrello durante lo scorrimento
Scorre in vista quando si scorre la pagina aggiungi al carrello, in modo che questa importante funzione sia sempre visibile. - Pulsanti per la visualizzazione delle quantità
I nuovi campi + / - per le quantità aggiungono un tocco di raffinatezza.
Dai poi un’occhiata alle poche personalizzazioni fatte utilizzando gli Hooks e il CSS extra
Link di salto - Descrizione completa
Utilizzando l’elemento Hook: Salto singolo prodotto alla descrizione abbiamo aggiunto un semplice link di salto per passare dal riepilogo alla descrizione completa. Ecco il relativo HTML. Utilizza la classe personalizzata loud-link sul suo contenitore per fornire l’hover e la freccia. Utilizza anche la classe GP smooth-scroll, con l’opzione attiva nel Customizer > Generale
<p class="loud-link">
<a class="smooth-scroll" href="#tab-title-description">Full description</a>
</p>Variazioni dello stile di sfondo
L’aggiunta di un po’ di colore di sfondo e di un po’ di padding per far risaltare le variazioni dei prodotti ha richiesto questo CSS:
.woocommerce.single-product div.product form.cart .variations {
background-color: #f2f3f4;
padding: 30px 40px;
}Condividi sui social
Utilizzare il plugin GP Social Sharing di Jon Mathers per visualizzare i link di condivisione sociale su Woo è stato facile. Nelle impostazioni di GP Social Share abbiamo disabilitato i ganci integrati. Quindi, creando un elemento Hook: Woo Social Sharing, ho semplicemente aggiunto lo shortcode e selezionato l’hook dedicato woocommerce_share dall’ampio elenco di hook.
Barra laterale per un singolo prodotto
Immagini grandi e sintesi nitide sono una parte importante del design. Per questo motivo ho dovuto sacrificare un po’ di spazio senza perdere l’importante barra laterale. Ho quindi spostato la barra laterale al di sotto del sommario. Ci sono voluti alcuni passaggi, ma tutti realizzabili con GP e il Customiser. Ecco come fare:
- Rimuovi la barra laterale dalla posizione predefinita
Customiser > Layout > WooCommerce -> Prodotto singolo > Layout con barra laterale: Contenuto / Senza barra laterale - Aggiungi la barra laterale in una nuova posizione
Elemento di aggancio: Woo Single Product Sidebar una semplice funzione per agganciare la barra laterale dove volevo. - Poi un po’ di CSS personalizzato per assicurarsi che si posizioni correttamente su Desktop
Barra laterale per singolo prodotto CSS
@media (min-width: 768px) {
.single-product #right-sidebar {
float: right;
}
.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .upsells.products {
width: 66%;
display: inline-block;
}
}Immagini dei prodotti Woocommerce
Nell’ultima versione di Woo è stato cambiato il modo di dimensionare le immagini. Nel Customizer > WooCommerce > Immagini dei prodotti ora hai solo due scelte.
- Larghezza immagine principale
Questa è l’immagine utilizzata per il prodotto singolo. È stata impostata a 800px per adattarsi alla larghezza dell’area dell’immagine del prodotto singolo. - Larghezza miniature
Imposta 400px, che è giusto per il layout a 2 colonne. Potresti ridurre questo valore se utilizzi più colonne. Ma dato che non c’è un’opzione mobile, lascio questo valore a 400px in modo che si adatti bene ai dispositivi mobili di dimensioni maggiori.
Il bello delle nuove immagini dei prodotti di Woo è che generano automaticamente le dimensioni. Non c’è bisogno di rinegoziare le miniature e non interferiscono con le normali dimensioni delle miniature di WP.
Consigli per l’immagine
Affinché le tue immagini siano perfette in Woo è necessario un grande lavoro iniziale. Se ti aspetti che Woo faccia la magia al posto tuo, ti troverai nei guai. Inizia con questa pratica lista di controllo:
- Rapporto d’aspetto
Un rapporto d’aspetto coerente eliminerà il disallineamento delle immagini nella griglia o il movimento antiestetico nella galleria dei prodotti. Di preferenza, mi atterrei a immagini quadrate. Se questo significa modificarle con il tuo editor fotografico preferito e aggiungere un po’ di spazio bianco, fallo. - Dimensioni dell’immagine
Woo ti permette di impostare la miniatura e l’immagine principale. Idealmente dovrebbero essere equamente divisibili nell’immagine originale, ad esempio
Originale: 1600px, Principale: 800px, Miniatura: 400px.
Ciò che non vuoi è che le immagini abbiano dimensioni strane e che, al momento del ridimensionamento, diventino sfocate a causa di frazioni di pixel non ben definite. - Impostazione delle dimensioni delle immagini
Carica alcune immagini sovradimensionate nei tuoi prodotti fittizi. Imposta il Customizer > di WooCommerce > le dimensioni delle immagini dei prodotti in modo che riempiano il contenitore. Ora usa l’ispettore del browser per vedere le dimensioni delle immagini nel Negozio e nel Prodotto singolo. Assicurati di averlo fatto dopo aver terminato la progettazione del layout. - Mobile First
Considera che probabilmente utilizzerai una sola colonna per i dispositivi mobili. Questo potrebbe significare che è necessaria un’immagine più ampia rispetto a quelle delle colonne per desktop. Utilizza queste dimensioni per le tue miniature. Non è un problema se le immagini sono più grandi di quelle necessarie per il desktop. - Zoom
La Galleria di prodotti Zoom e Lightbox utilizzerà l’immagine più grande che riesce a ottenere. Assicurati quindi che l’immagine originale sia più grande della larghezza dell’immagine principale che hai impostato.
