Quando si tratta di creare un negozio online, WooCommerce è il plugin di riferimento. È incredibilmente semplice creare un negozio online e iniziare a vendere i tuoi prodotti non appena hai finito. Avada fornisce supporto completo e integrazione del design per WooCommerce, permettendoti di creare il negozio dei tuoi sogni assicurandoti allo stesso tempo che assomigli esattamente alla cornice che hai in mente.
Avada ti offre la possibilità di personalizzare l'aspetto del tuo sito web, il che non è diverso con l'integrazione di WooCommerce. Utilizzando la nostra popolare rete di opzioni avanzate, puoi scegliere tra un'ampia gamma di personalizzazioni per una varietà di possibilità di progettazione, tra cui:
- WooCommerce ha il proprio pannello delle opzioni globali Avada, separato dal pannello delle opzioni globali Avada principale.
- Le opzioni della pagina Avada sono disponibili per ciascun prodotto.
- Avada Builder ti consente di creare progetti di pagine di prodotto trascinando e rilasciando gli elementi.
Per realizzare il tuo sito eCommerce con Avada.
Per prima cosa dobbiamo installare wooCommerce in Avada.
- Installazione di WooCommerce – Istruzioni passo passo
- Come assegnare una pagina del negozio al tuo sito web
- Creazione dei tuoi prodotti
- Creazione dell'effetto zoom del prodotto
- Modificare le impostazioni delle dimensioni dell'immagine del prodotto in WooCommerce.
Installazione di WooCommerce – Istruzioni passo passo
Vai su Avada > Plugin s/Add-ons e cerca il plugin , come mostrato nello screenshot qui sotto.
Passaggio 1 : installa il plugin .
Passaggio 2 : seleziona "Installa" dal menu a discesa.
Il plugin verrà installato e attivato automaticamente.
Passaggio 3 : successivamente dovrebbe essere visualizzata la procedura guidata di configurazione di WooCommerce. Se stai importando una delle nostre demo di Woo, come Modern Shop o Classic Shop, puoi saltare questo passaggio senza il rischio di perdere i tuoi dati. Per andare avanti, seleziona "Non adesso" dal menu a discesa. Se non stai importando una delle nostre demo Woo, procedi al passaggio successivo facendo clic su "Andiamo!" pulsante per iniziare il processo di configurazione.
Passaggio 4 : segui le istruzioni e le istruzioni visualizzate per completare il processo e inserire le informazioni necessarie sul tuo negozio. Facendo clic sul pulsante "Crea il tuo primo prodotto" una volta terminato, potrai procedere alla creazione del tuo primo prodotto. In alternativa, puoi tornare alla dashboard di WordPress facendo clic sul collegamento situato sotto la finestra di configurazione.
Come assegnare una pagina del negozio al tuo sito web
Come parte del normale processo di installazione di WooCommerce, dovrebbe essere avviata la configurazione guidata, che ti consentirà di configurare il tuo negozio e assegnare le pagine del negozio ai clienti. Maggiori informazioni sulle pagine create dall'Installazione guidata possono essere trovate in questo documento di WooCommerce.
In alternativa, se l'Installazione guidata non viene visualizzata, o se la annulli per qualsiasi motivo, puoi sempre tornare all'Installazione guidata selezionando Impostazione guidata dal menu Aiuto in qualsiasi pagina di WooCommerce, che puoi trovare in alto a sinistra nella pagina finestra.
Puoi impostare manualmente la pagina del negozio andando alla scheda Prodotti nelle Impostazioni di WooCommerce – WooCommerce > Impostazioni > Prodotti – e selezionando la pagina che sarà la pagina principale del negozio dal menu a discesa. WooCommerce mostrerà quindi i tuoi prodotti su questa pagina come risultato della tua azione.
Le restanti pagine possono essere configurate nella scheda Avanzate, che si trova in WooCommerce > Impostazioni > Avanzate .
Creazione dei tuoi prodotti
Passaggio 1 : nella barra laterale di amministrazione di WordPress, vai alla scheda Prodotti > Aggiungi prodotto.
Passaggio 2 : nella parte superiore della pagina, inserisci il nome del tuo prodotto.
Passaggio 3 : compila il campo del contenuto del post con il testo della descrizione del prodotto. Tutte le informazioni sul prodotto verranno visualizzate in questa sezione.
Passaggio 4 : compila la casella " Dati prodotto " con tutte le informazioni sul prodotto. Ad esempio amp prezzo, SKU e spedizione sono tutte opzioni possibili.
Passaggio 5 : nella casella " Descrizione breve del prodotto ", digita una breve descrizione del tuo prodotto che verrà visualizzata accanto alle immagini principali.
Passaggio 6 : l'immagine principale in primo piano deve essere posizionata nella casella " Immagine prodotto " sul lato destro della pagina; Questo deve essere completato per ogni prodotto.
Passaggio 7: aggiungi più immagini alla casella " Galleria prodotti " se desideri utilizzare una galleria di immagini anziché una singola immagine.
Passaggio 8 : nella casella " Categorie di prodotti ", inserisci le categorie applicabili ai tuoi prodotti. Successivamente, riempi gli spazi vuoti con i tag appropriati per il tuo prodotto nella casella " Tag prodotto ".
Passaggio 9 : una volta inserite tutte le informazioni necessarie, fai clic sul pulsante " Pubblica " e l'articolo verrà visualizzato nella pagina principale del negozio.
Creazione dell'effetto zoom del prodotto
Se utilizzi Avada Layouts, dovrai assicurarti che l'opzione Zoom immagini prodotto WooCommerce sia abilitata in Avada > Opzioni > WooCommerce > Generale WooCommerce > Opzione Zoom immagini prodotto WooCommerce o nella scheda Generale dell'elemento Immagini prodotto Woo > Immagini del prodotto Ingrandisci se utilizzi i layout WooCommerce.
Larghezza immagini prodotto WooCommerce : la larghezza dell'immagine principale (vedi impostazione di seguito) e la dimensione effettiva dell'immagine caricata dovranno essere entrambe più grandi di Avada > Opzioni > WooCommerce > Generale WooCommerce > Larghezza immagini prodotto WooCommerce o dell'impostazione Larghezza massima immagini prodotto nell'elemento Immagini prodotto Woo. La larghezza della colonna contenitore per una singola galleria di prodotti sarà determinata dalle impostazioni scelte. Dopo aver apportato le modifiche necessarie, sarai pronto per impostare la larghezza della tua immagine principale WooCommerce.
Larghezza dell'immagine principale di WordPress : l'impostazione della larghezza dell'immagine principale di WooCommerce può essere trovata nel personalizzatore del tuo sito Web WordPress. Dalla dashboard di WordPress, vai su Aspetto > Personalizza > WooCommerce > Immagini prodotto , dove troverai l'impostazione Larghezza immagine principale; Ciò determinerà la dimensione effettiva dell'immagine visualizzata nella galleria.
Più dettagliato sarà l'effetto zoom, maggiore sarà la dimensione dell'immagine impostata per l'immagine. Per chiarire, se la dimensione dell'immagine nelle impostazioni di WooCommerce corrisponde alla larghezza dell'immagine nelle opzioni globali di Avada, nessuno zoom sarà visibile quando il mouse passa sopra l'immagine nella pagina. Inoltre, la dimensione dell'immagine effettiva che carichi deve essere uguale o maggiore dell'impostazione Larghezza immagine principale nel design del tuo sito web.
Assicurati di rigenerare le miniature dopo aver modificato le dimensioni delle immagini WooCommerce; Ciò applicherà le nuove dimensioni dell'immagine a tutte le immagini che sono già state caricate sul tuo sito web. A tale scopo è possibile utilizzare il plugin Rigenera miniature.
Modificare le impostazioni delle dimensioni dell'immagine del prodotto in WooCommerce.
WooCommerce include opzioni per regolare la dimensione delle immagini dei prodotti nelle sezioni Catalogo e Immagini del singolo prodotto del negozio. Inoltre, esistono impostazioni Avada specifiche che funzionano insieme alle dimensioni delle immagini utilizzate dal tuo negozio WooCommerce. Quando si configurano queste impostazioni delle dimensioni dell'immagine, è importante ricordare che devono essere prese in considerazione anche le impostazioni delle opzioni globali di Avada. Esamineremo ciascuna di queste opzioni in maggior dettaglio in seguito.
Supponiamo che le immagini che carichi per i tuoi prodotti siano più piccole all'origine rispetto alle dimensioni delle immagini specificate nelle impostazioni di WooCommerce. In tal caso, potresti notare alcune discrepanze nel layout visivo nel front-end delle pagine del tuo negozio; Questo non è in alcun modo un bug. È semplicemente perché le tue immagini erano troppo piccole perché le impostazioni di WooCommerce potessero influenzarle. Puoi considerare queste impostazioni come la larghezza e l'altezza massime delle tue immagini in termini di dimensioni dell'immagine. Tutto ciò che scende al di sotto del limite specificato non verrà ridimensionato.
Quando configuri il tuo negozio, assicurati che siano prese in considerazione sia le impostazioni della dimensione delle immagini di WooCommerce che la dimensione effettiva delle tue immagini. In sintesi, le tue immagini dovrebbero avere le stesse dimensioni o essere più grandi delle impostazioni delle dimensioni delle immagini nel tuo negozio WooCommerce.
Qualsiasi modifica alle impostazioni delle dimensioni dell'immagine richiederà di rigenerare le miniature affinché abbiano effetto sulle immagini che sono già state caricate sul tuo sito. Pertanto, si consiglia vivamente di utilizzare il plugin Regenerate Thumbnails. Inoltre, le dimensioni dell'immagine possono essere regolate utilizzando i passaggi seguenti:
Passaggio 1 : nella barra laterale di amministrazione, naviga nella scheda " Aspetto " e quindi nella scheda " Personalizza " per iniziare a personalizzare il tuo sito.
Passaggio 2 : vai alla scheda " WooCommerce " nella parte superiore della pagina.
Passaggio 3 Immagini del prodotto della finestra di configurazione .
Passaggio 4 : quando carichi immagini sulle pagine dei singoli prodotti, seleziona l'opzione di larghezza dell'immagine principale. La larghezza delle miniature è la larghezza delle miniature dei tuoi prodotti nel catalogo. Compila gli spazi vuoti con il valore di larghezza desiderato.
Passo 5 – Per rigenerare le miniature dopo aver modificato le dimensioni delle immagini e averle salvate, dovrai utilizzare il plugin , che puoi trovare nella Plugin . plugin Regenerate Thumbnails e poi vai alla WP Admin > Strumenti , dove puoi scegliere di rigenerare le miniature delle immagini, creando le nuove dimensioni dell'immagine.
