Un'introduzione a Theming WooCommerce per WordPress

WooCommerce è una piattaforma di eCommerce popolare per WordPress che viene sviluppata rapidamente da WooThemes. In questo articolo, ti guiderò attraverso i fondamenti della tematizzazione per WooCommerce.

Questo articolo fa alcune ipotesi sul tuo ambiente di sviluppo:

Hai installato WordPress e WooCommerce.
Hai familiarità con la creazione di temi WordPress e l'utilizzo di HTML e CSS.
Hai utilizzato gli Strumenti per sviluppatori di Chrome o strumenti di sviluppo web simili come Firebug.

Personalizzazione del CSS di WooCommerce

All'inizio, WooCommerce è dotato di alcuni CSS incorporati che mirano a renderlo compatibile con il maggior numero di temi possibile. Il CSS predefinito è un ottimo punto di partenza, ma è improbabile che si abbinerà perfettamente allo stile del tema subito dopo l'installazione.

In quanto tale, ci sono due modi per modificare il CSS per un tema WooCommerce:

Puoi usare gli stili di default come base e sovrascriverli.
Puoi scegliere di disabilitare gli stili predefiniti e ricominciare da zero.

WooCommerce aggiunge una classe corporea di "woocommerce" a tutte le sue pagine

Sostituzione di stili predefiniti

Sostituire gli stili di default è il modo più veloce per iniziare e probabilmente andrà bene per molte persone.

È possibile copiare l'intero file CSS WooCommerce predefinito (situato in wp-content \ plugins \ woocommerce \ beni \ css \ woocommerce.css o woocommerce.less), rimuovi tutto ciò che non ti serve e cambia tutto ciò di cui hai bisogno; tuttavia, ciò può richiedere molto tempo e può comportare molti CSS ripetuti.

A tal fine, normalmente utilizzo il seguente approccio:

Mi muovo attraverso il sito trovando gli stili che ho bisogno di cambiare.
Dopodiché, utilizzo gli Strumenti per sviluppatori di Chrome (o uno strumento simile) per identificare le classi e persino apportare le modifiche nel browser per assicurarmi di capire come verrà visualizzato. Questo di solito viene fatto facendo clic con il tasto destro sulla pagina e scegliendo "inspect element" dall'elenco a discesa.
Successivamente, copio il CSS dagli Strumenti per sviluppatori di Chrome nel file CSS del mio tema.
Esamino il CSS negli Strumenti per sviluppatori di Chrome in quanto potrebbero barrare o oscurare gli stili prefissati dai fornitori per altri browser. È importante modificare questi valori per mantenere coerente il tuo CSS tra i vari browser che i tuoi visitatori potrebbero utilizzare.
Infine, rimuovo tutti i valori che non ho modificato nel CSS copiato. Ad esempio, se ho cambiato la larghezza di qualcosa, ma non ho l'altezza, quindi non ho bisogno di includere l'altezza nel mio file CSS personalizzato.

Personalmente, ritengo che questo approccio funzioni al meglio nella maggior parte dei casi e riduca davvero i tempi di sviluppo.

In Google Chrome, puoi fare clic con il pulsante destro del mouse su un elemento all'interno della finestra Strumenti per sviluppatori per alternare i diversi stati (passaggio del mouse, attivo, ecc.). Ciò consente di visualizzare tutti gli stati senza cercare nel file CSS originale.

Disabilitazione del foglio di stile predefinito e avvio da zero

Il foglio di stile predefinito può essere disabilitato aggiungendo un piccolo snippet di codice ai tuoi temi functions.php:

define ('WOOCOMMERCE_USE_CSS', false);

Il modo più veloce per ottenere tutte le classi di WooCommerce è copiare il file CSS WooCommerce originale nel tuo e rimuovere tutto ciò che non richiedi.

Dichiarazione di supporto WooCommerce nel tuo tema

Questo è particolarmente importante se si vendono temi o li si rilascia al pubblico.

Senza dichiarare espressamente il supporto di WooCommerce all'interno del tuo tema, agli utenti verrà mostrato un messaggio di errore all'installazione di WooCommerce e rimarrà lì fino a quando non verrà respinto.

Fortunatamente, tutto questo può essere risolto con un piccolo frammento di codice inserito nei tuoi temi functions.php file:

add_theme_support ('woocommerce');

Immergersi in un po 'più in profondità: modifica dei modelli

La modifica del CSS all'interno di WooCommerce ti porterà molto lontano, ma che dire se vuoi davvero personalizzare il layout delle pagine? Fortunatamente, c'è un bel modo per farlo.

Il plug-in WooCommerce include numerosi modelli HTML front-end e modelli di e-mail. Invece di modificare questi file direttamente all'interno del plugin (che è una pessima idea perché una volta aggiornato il plugin e tutte le modifiche andranno perse!), Puoi copiarle nel tuo tema:

Nella tua directory dei temi, crea una nuova cartella chiamata "woocommerce".
Passare alla directory del plugin WooCommerce e aprire la cartella "templates". La cartella dei modelli ha molte sottocartelle con tutti i diversi modelli utilizzati da WooCommerce. Fortunatamente, la struttura del file modello e la denominazione in WooCommerce sono facili da seguire.
Nella cartella "woocommerce" appena creata, copia il file modello che desideri modificare. Ricordarsi di mantenere la struttura della directory uguale qui. Se il modello che desideri modificare si trova in una sottocartella, ricorda di creare quella sottocartella all'interno della directory del tema.
Modifica il file dalla cartella "woocommerce" e salva le modifiche.

Un esempio pratico

Diciamo che vogliamo modificare parte dell'HTML nella schermata "I miei ordini" di WooCommerce.

La prima cosa che dobbiamo fare è individuare il modello corretto. In questo caso, la sezione "I miei ordini" è in "Il mio account" in WooCommerce. La struttura della directory è simile alla seguente:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Quindi, crea una cartella all'interno del tema chiamato "woocommerce" e all'interno di quella cartella crea una seconda cartella chiamata "myaccount". Quindi, copia il my-orders.php file in quella directory.

Si dovrebbe essere lasciato con il seguente:

/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php

Qualsiasi modifica apportata a questo file ora sostituirà l'originale.

Il ciclo WooCommerce

Se hai già creato o modificato temi WordPress, dovresti avere familiarità con The Loop. WooCommerce ha il proprio ciclo che puoi utilizzare per personalizzare le pagine di WooCommerce. Ad esempio, potresti voler farlo quando desideri caricare una barra laterale diversa per le tue pagine WooCommerce.

Questa è l'integrazione più semplice e creando un modello WooCommerce personalizzato verrà applicato a tutte le pagine di WooCommerce inclusi prodotti, categorie e archivi. Se non vuoi che il tuo modello di WooCommerce abbia un aspetto diverso dal modello standard, non devi creare un modello WooCommerce personalizzato.

La creazione del modello è un processo diretto:

Duplica il tuo tema page.php file e rinominarlo woocommerce.php.
Trova il ciclo WordPress all'interno del tuo woocommerce.php file. Assomiglierà a qualcosa:

Sostituisci il tuo loop con il loop WooCommerce:
Ora, apporta le modifiche che desideri apportare, ad esempio lo scambio in una barra laterale diversa o la modifica del layout.

Facciamolo avvolgere

Ora conosci i fondamenti per l'integrazione della piattaforma di eCommerce di WooCommerce nei tuoi temi WordPress.

Le competenze trattate in questo articolo ti copriranno per la maggior parte delle situazioni in WooCommerce. Se hai bisogno di un'integrazione di temi più avanzata o flessibile, il prossimo passo è esplorare i vari hook, filtri e istruzioni condizionali disponibili per l'uso con WooCommerce.

Link utili: plugin WooCommerce di CodeCanyon.

Codice