Quando si tratta di creare un negozio online, WooCommerce è il plugin -in di riferimento. È ridicolmente 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 anche che appaia esattamente la cornice che hai in mente.
Avada ti dà la possibilità di personalizzare l'aspetto del tuo sito web, il che non è diverso dall'integrazione con WooCommerce. Utilizzando la nostra popolare rete di opzioni avanzate, puoi scegliere tra un'ampia gamma di personalizzazioni per una varietà di possibilità di design, tra cui:
- WooCommerce ha il proprio Avada Global Options Panel, separato dal principale Avada Global Options Panel.
- Le opzioni della pagina Avada sono disponibili per ogni prodotto.
- Avada Builder ti consente di creare progetti di pagine di prodotto trascinando e rilasciando elementi.
Per costruire 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
- Creare i tuoi prodotti
- Creazione dell'effetto zoom del prodotto
- Regolazione delle impostazioni delle dimensioni dell'immagine del prodotto in WooCommerce.
Installazione di WooCommerce – Istruzioni passo passo
Vai su Avada > Plugin / Componenti aggiuntivi e cerca il plugin WooCommerce , come mostrato nello screenshot qui sotto.
Passaggio 1 – Installa il plugin WooCommerce .
Passaggio 2 : seleziona "Installa" dal menu a discesa.
Il plugin verrà installato e attivato automaticamente.
Passaggio 3 : dopodiché, 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 di Woo, procedi al passaggio successivo facendo clic su "Let's Go!" pulsante per avviare il processo di configurazione.
Passaggio 4 : segui le istruzioni e le istruzioni sullo schermo per completare il processo e inserire le informazioni necessarie sul tuo negozio. Cliccando sul pulsante "Crea il tuo primo prodotto" quando hai finito, 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 l'Installazione guidata, che ti consente di configurare il tuo negozio e assegnare le pagine del tuo negozio ai clienti. Ulteriori informazioni sulle pagine create dall'Installazione guidata possono essere trovate in questo documento WooCommerce.
In alternativa, se l'Installazione guidata non viene visualizzata, o se la si annulla per qualsiasi motivo, è sempre possibile tornare all'Installazione guidata selezionando Installazione guidata dal menu Aiuto in qualsiasi pagina di WooCommerce, che si trova in alto a sinistra finestra.
Puoi impostare manualmente la pagina del negozio andando alla scheda Prodotti nelle Impostazioni 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 pagine rimanenti possono essere configurate nella scheda Avanzate, che si trova su WooCommerce > Impostazioni > Avanzate .
Creare i 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 : compilare la Dati prodotto " con tutte le informazioni sul prodotto. Ad esempio , prezzo, SKU e spedizione sono tutte opzioni possibili amp
Passaggio 5 : nella Descrizione breve del prodotto ", digita una descrizione succinta del tuo prodotto che apparirà accanto alle tue immagini principali.
Passaggio 6 : l'immagine principale in primo piano deve essere posizionata sotto la Immagine prodotto " sul lato destro della pagina; Questo deve essere completato per ogni prodotto.
Passaggio 7 : aggiungi più immagini alla Galleria prodotti " se desideri utilizzare una galleria di immagini anziché una singola immagine.
Passaggio 8 : nella Categorie prodotti ", inserisci le categorie che si applicano ai tuoi prodotti. Quindi, riempi gli spazi vuoti con i tag appropriati per il tuo prodotto nella Tag prodotto ".
Passaggio 9 : una volta inserite tutte le informazioni necessarie, fai clic sul pulsante " Pubblica " e l'articolo apparirà nella pagina principale del tuo negozio.
Creazione dell'effetto zoom del prodotto
Se stai utilizzando Avada Layouts, devi assicurarti che l'opzione Zoom immagini prodotto WooCommerce sia abilitata in Avada > Opzioni > WooCommerce > WooCommerce generale > opzione Zoom immagini prodotto WooCommerce scheda Generale elemento immagini prodotto Woo Immagini del prodotto Ingrandisci se stai utilizzando 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 maggiori dell'impostazione Avada > Opzioni > WooCommerce > WooCommerce generale > Larghezza immagini prodotto WooCommerce o Larghezza massima immagini prodotto nell'elemento Immagini prodotto Woo. La larghezza della colonna del contenitore per una singola galleria di prodotti sarà determinata dalle impostazioni che scegli. Dopo aver apportato le modifiche necessarie, sarai pronto per impostare la larghezza della tua immagine principale di WooCommerce.
Larghezza dell'immagine principale di WordPress : l'impostazione della larghezza dell'immagine principale di WooCommerce può essere trovata nel Customizer del tuo sito Web WordPress. Dalla dashboard di WordPress, vai su Aspetto > Personalizza > WooCommerce > Immagini prodotto , dove troverai l'impostazione Larghezza immagine principale; Questo determinerà la dimensione effettiva dell'immagine visualizzata nella galleria.
Più dettagliato sarà il tuo effetto zoom, maggiore sarà la dimensione dell'immagine che hai impostato per la tua 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 sulla pagina. Inoltre, la dimensione dell'immagine effettiva che carichi deve essere uguale o maggiore dell'impostazione Larghezza immagine principale sul design del tuo sito web.
Assicurati di rigenerare le tue miniature dopo aver modificato le dimensioni delle immagini di WooCommerce; Questo applicherà le nuove dimensioni dell'immagine a tutte le immagini che sono già state caricate sul tuo sito web. Puoi usare il plugin Rigenera miniature per farlo.
Regolazione delle impostazioni delle dimensioni dell'immagine del prodotto in WooCommerce.
WooCommerce include opzioni per regolare la dimensione delle immagini dei prodotti nelle sezioni Catalogo del negozio e Immagini prodotto singolo. Inoltre, esistono impostazioni Avada specifiche che funzionano in combinazione con le dimensioni delle immagini utilizzate dal tuo negozio WooCommerce. Quando si configurano queste impostazioni delle dimensioni dell'immagine, è importante ricordare che è necessario considerare anche le impostazioni delle opzioni globali di Avada. Esamineremo ciascuna di queste opzioni in modo più dettagliato in seguito.
Supponiamo che le immagini che carichi per i tuoi prodotti siano più piccole alla fonte rispetto alle dimensioni dell'immagine specificate nelle impostazioni di WooCommerce. In tal caso, potresti notare alcune discrepanze nel layout visivo sul 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 influire su di esse. Puoi pensare a queste impostazioni come alla larghezza e all'altezza massime per le 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 dell'immagine di WooCommerce che la dimensione effettiva delle tue immagini. In sintesi, le tue immagini dovrebbero essere della stessa dimensione o più grandi delle impostazioni delle dimensioni dell'immagine nel tuo negozio WooCommerce.
Qualsiasi modifica alle impostazioni delle dimensioni dell'immagine richiederà la rigenerazione delle miniature affinché abbiano effetto sulle immagini che sono già state caricate sul tuo sito. Pertanto, si consiglia vivamente di utilizzare il plugin Rigenera miniature. Inoltre, le dimensioni dell'immagine possono essere regolate utilizzando i passaggi seguenti:
Passaggio 1 : nella barra laterale dell'amministratore, vai alla scheda " Aspetto " e quindi alla scheda " Personalizza " per iniziare a personalizzare il tuo sito.
Passaggio 2 : vai alla scheda " WooCommerce " nella parte superiore della pagina.
Passaggio 3 scheda " Immagini prodotto " della finestra di configurazione
Passaggio 4 : quando carichi le immagini sulle pagine dei singoli prodotti, seleziona l'opzione di larghezza dell'immagine principale. Larghezza miniature è la larghezza delle miniature dei tuoi prodotti nel catalogo. Riempi gli spazi vuoti con il valore di larghezza desiderato.
Passaggio 5 : per rigenerare le miniature dopo aver modificato le dimensioni dell'immagine e averle salvate, sarà necessario utilizzare il plugin , che si trova nella sezione Plugin . plugin Rigenera miniature e quindi vai alla Amministratore WP> Strumenti , dove puoi scegliere di rigenerare le miniature delle immagini, creando le nuove dimensioni dell'immagine.
