WooCommerce \u00e8 appena diventato ancora pi\u00f9 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\u00f2 che vedi \u00e8 stato creato attraverso il Customizer. <\/p> \n \n
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 \u00e8 il seguente: <\/p> \n\r\n
.woocommerce ul.products li.product {\r\n overflow: hidden;\r\n}\r\n\r\n.woocommerce ul.products li.product:hover .button {\r\n -webkit-transform: translatey(0) !important;\r\n transform: translatey(0) !important;\r\n}\r\n\r\n.woocommerce ul.products li.product .button {\r\n font-size: 12px;\r\n line-height: 15px;\r\n padding: 8px 12px;\r\n min-height: 15px;\r\n font-weight: bold;\r\n text-transform: uppercase;\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .woocommerce ul.products li.product .button {\r\n position: absolute;\r\n top: 0;\r\n -webkit-transform: translatey(-150%);\r\n transform: translatey(-150%);\r\n -webkit-transition: 0.35s;\r\n transition: 0.35s;\r\n margin-top: 10px;\r\n margin-left: 10px !important;\r\n }\r\n}<\/code><\/pre>\r\n
\nGli angoli raggiati sono stati aggiunti utilizzando il CSS del pulsante, descritto nella Guida allo styling.<\/p>
\n
\n
Distintivo di vendita<\/h3>
\n
\n
Per completare il posizionamento e gli angoli arrotondati dell’aggiunta al carrello ho utilizzato questo CSS:<\/p>
\n\r\n
.woocommerce span.onsale {\r\n position: absolute;\r\n margin: 10px !important;\r\n border-radius: 4px !important;\r\n}<\/code><\/pre>\r\n
\nBarre laterali di WooCommerce - Comuni<\/h2>
\n
\n
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 \u00e8 questo: <\/p>
\n\r\n
@media (min-width: 768px) {\r\n #right-sidebar {\r\n border-left: 1px solid #d6d7d8;\r\n }\r\n\r\n #right-sidebar .widget {\r\n margin-bottom: 0;\r\n }\r\n\r\n #right-sidebar aside:first-child {\r\n padding-top: 0;\r\n }\r\n\r\n #right-sidebar aside:not(:first-child) {\r\n border-top: 1px solid #d6d7d8;\r\n }\r\n}<\/code><\/pre>\r\n
\nConsulta le note separate sulla barra laterale dei prodotti singoli.<\/p>
\n
\n
WooCommerce Prodotto singolo<\/h2>
\n
\n
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 \u00e8 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\u00e0 nel Customizer > Layout > WooCommerce. <\/p>
\n
\n
Nuove funzioni GP<\/h3>
\n
\n- Larghezza dell’immagine<\/strong>del prodotto <\/strong>
- Visualizza il pannello aggiungi al carrello durante lo scorrimento<\/strong>
- Pulsanti per la visualizzazione delle quantit\u00e0<\/strong>
Dai poi un’occhiata alle poche personalizzazioni fatte utilizzando gli Hooks e il CSS extra<\/p>
\n
\n
Link di salto - Descrizione completa<\/h3>
\n
\n
Utilizzando l’elemento Hook: Salto singolo prodotto alla descrizione<\/strong> abbiamo aggiunto un semplice link di salto per passare dal riepilogo alla descrizione completa. Ecco il relativo HTML. Utilizza la classe personalizzata loud-link<\/strong> sul suo contenitore per fornire l’hover e la freccia. Utilizza anche la classe GP smooth-scroll<\/strong>, con l’opzione attiva nel Customizer > Generale <\/p>
\n\r\n<p class=\"loud-link\">\r\n\t<a class=\"smooth-scroll\" href=\"#tab-title-description\">Full description<\/a>\r\n<\/p><\/code><\/pre>\r\n
\nVariazioni dello stile di sfondo<\/h3>
\n
\n
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:<\/p>
\n\r\n
.woocommerce.single-product div.product form.cart .variations {\r\n background-color: #f2f3f4;\r\n padding: 30px 40px;\r\n}<\/code><\/pre>\r\n
\nCondividi sui social<\/h3>
\n
\n
Utilizzare il plugin GP Social Sharing di Jon Mathers per visualizzare i link di condivisione sociale su Woo \u00e8 stato facile. Nelle impostazioni di GP Social Share abbiamo disabilitato i ganci integrati. Quindi, creando un elemento Hook: Woo Social Sharing<\/strong>, ho semplicemente aggiunto lo shortcode e selezionato l’hook dedicato woocommerce_share<\/strong> dall’ampio elenco di hook. <\/p>
\n
\nBarra laterale per un singolo prodotto<\/h3>
\n
\n
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: <\/p>
\n
\n
- Rimuovi la barra laterale dalla posizione predefinita
- Aggiungi la barra laterale in una nuova posizione
- Poi un po’ di CSS personalizzato per assicurarsi che si posizioni correttamente su Desktop<\/li><\/ul>
\n
\n
Barra laterale per singolo prodotto CSS<\/h4>
\n\r\n@media (min-width: 768px) {\r\n .single-product #right-sidebar {\r\n float: right;\r\n }\r\n\r\n .single-product div.product .woocommerce-tabs,\r\n .single-product div.product .related.products,\r\n .single-product div.product .upsells.products {\r\n width: 66%;\r\n display: inline-block;\r\n }\r\n}<\/code><\/pre>\r\n
\nImmagini dei prodotti Woocommerce<\/h2>
\n
\n
Nell’ultima versione di Woo \u00e8 stato cambiato il modo di dimensionare le immagini. Nel Customizer > WooCommerce > Immagini dei prodotti ora hai solo due scelte. <\/p>
\n
\n
- Larghezza immagine principale<\/strong>
- Larghezza miniature<\/strong>
Il bello delle nuove immagini dei prodotti di Woo \u00e8 che generano automaticamente le dimensioni. Non c’\u00e8 bisogno di rinegoziare le miniature e non interferiscono con le normali dimensioni delle miniature di WP. <\/p>
\n
\n
Consigli per l’immagine<\/h3>
\n
\n
Affinch\u00e9 le tue immagini siano perfette in Woo \u00e8 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: <\/p>
\n
\n
- Rapporto d’aspetto<\/strong>
- Dimensioni dell’immagine<\/strong>
- Impostazione delle dimensioni delle immagini<\/strong>
- Mobile First<\/strong>
- Zoom<\/strong>
Con GeneratePress Premium 1.8 creare siti Woocommerce convincenti \u00e8 ancora pi\u00f9 facile.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[70],"tags":[],"class_list":["post-5597","post","type-post","status-publish","format-standard","hentry","category-merch-styling-it","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts\/5597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/comments?post=5597"}],"version-history":[{"count":1,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts\/5597\/revisions"}],"predecessor-version":[{"id":5598,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts\/5597\/revisions\/5598"}],"wp:attachment":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/media?parent=5597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/categories?post=5597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/tags?post=5597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}