Πώς να δημιουργήσετε ένα ηλεκτρονικό εμπόριο με το Avada WooCommerce builder

Όταν πρόκειται για τη δημιουργία ενός ηλεκτρονικού καταστήματος, το WooCommerce είναι η πιο δημοφιλής plugin . Είναι γελοίο απλό να δημιουργήσετε ένα ηλεκτρονικό κατάστημα και να αρχίσετε να πουλάτε τα προϊόντα σας μόλις τελειώσετε. Το Avada παρέχει ολοκληρωμένη υποστήριξη και ενσωμάτωση σχεδίασης για το WooCommerce, επιτρέποντάς σας να δημιουργήσετε το κατάστημα των ονείρων σας, διασφαλίζοντας παράλληλα ότι φαίνεται ακριβώς το πλαίσιο που έχετε στο μυαλό σας.  

Το Avada έχει να κάνει με το να σας δίνει τη δυνατότητα να προσαρμόσετε την εμφάνιση του ιστότοπού σας, κάτι που δεν διαφέρει με την ενσωμάτωση WooCommerce. Χρησιμοποιώντας το δημοφιλές δίκτυο προηγμένων επιλογών μας, μπορείτε να επιλέξετε από ένα ευρύ φάσμα προσαρμογών για μια ποικιλία δυνατοτήτων σχεδίασης, όπως:

• Το WooCommerce έχει το δικό του Πίνακα Παγκόσμιας Επιλογών Avada, ξεχωριστό από τον κύριο πίνακα επιλογών Avada.
• Οι επιλογές σελίδας Avada είναι διαθέσιμες για κάθε προϊόν.
• Το Avada Builder σάς επιτρέπει να δημιουργείτε σχέδια σελίδων προϊόντων με μεταφορά και απόθεση στοιχείων.

Για να δημιουργήσετε τον ιστότοπο ηλεκτρονικού εμπορίου σας με το Avada. 

Πρώτα πρέπει να εγκαταστήσουμε το wooCommerce στο Avada.

• Εγκατάσταση WooCommerce – Οδηγίες βήμα προς βήμα
• Πώς να αντιστοιχίσετε μια σελίδα καταστήματος στον ιστότοπό σας
• Δημιουργία των προϊόντων σας
• Δημιουργία εφέ ζουμ προϊόντος
• Προσαρμογή των ρυθμίσεων μεγέθους εικόνας προϊόντος στο WooCommerce.

Εγκατάσταση WooCommerce – Οδηγίες βήμα προς βήμα

Μεταβείτε στο Avada > Plugin / Πρόσθετα και αναζητήστε την plugin , όπως φαίνεται στο παρακάτω στιγμιότυπο οθόνης.

Βήμα 1 plugin WooCommerce .

Βήμα 2 – Επιλέξτε «Εγκατάσταση» από το αναπτυσσόμενο μενού.

Το plugin θα εγκατασταθεί και θα ενεργοποιηθεί αυτόματα.

Βήμα 3 – Μετά από αυτό, θα πρέπει να εμφανιστεί ο Οδηγός εγκατάστασης WooCommerce. Εάν εισάγετε ένα από τα επιδείξεις Woo μας, όπως το Modern Shop ή το Classic Shop, μπορείτε να παραλείψετε αυτό το βήμα χωρίς τον κίνδυνο να χάσετε τα δεδομένα σας. Για να προχωρήσετε, επιλέξτε «Όχι τώρα» από το αναπτυσσόμενο μενού. Εάν δεν εισάγετε ένα από τα επιδείξεις Woo μας, προχωρήστε στο επόμενο βήμα κάνοντας κλικ στο "Πάμε!" κουμπί για να ξεκινήσει η διαδικασία εγκατάστασης.

Βήμα 4 – Ακολουθήστε τις οδηγίες και τις οδηγίες στην οθόνη για να ολοκληρώσετε τη διαδικασία και να εισαγάγετε τις απαραίτητες πληροφορίες για το κατάστημά σας. Κάνοντας κλικ στο κουμπί «Δημιουργία του πρώτου σας προϊόντος» όταν τελειώσετε, θα μπορείτε να προχωρήσετε στη δημιουργία του πρώτου σας προϊόντος. Εναλλακτικά, μπορείτε να επιστρέψετε στον Πίνακα ελέγχου του WordPress κάνοντας κλικ στον σύνδεσμο που βρίσκεται κάτω από το παράθυρο εγκατάστασης.

Πώς να αντιστοιχίσετε μια σελίδα καταστήματος στον ιστότοπό σας

Ως μέρος της κανονικής διαδικασίας εγκατάστασης του WooCommerce, θα πρέπει να εκκινηθεί ο Οδηγός εγκατάστασης, ο οποίος σας επιτρέπει να διαμορφώσετε το κατάστημά σας και να εκχωρήσετε τις σελίδες του καταστήματός σας σε πελάτες. Περισσότερες πληροφορίες για τις σελίδες που δημιουργεί ο Οδηγός εγκατάστασης μπορείτε να βρείτε σε αυτό το έγγραφο του WooCommerce.

Εναλλακτικά, εάν δεν εμφανίζεται ο Οδηγός εγκατάστασης ή εάν τον ακυρώσετε για οποιονδήποτε λόγο, μπορείτε πάντα να επιστρέψετε στον Οδηγό εγκατάστασης επιλέγοντας τον Οδηγό εγκατάστασης από το μενού Βοήθεια σε οποιαδήποτε σελίδα του WooCommerce, που βρίσκεται στην επάνω αριστερή γωνία του παράθυρο.

Μπορείτε να ορίσετε μη αυτόματα τη σελίδα καταστήματος μεταβαίνοντας στην καρτέλα Προϊόντα στις Ρυθμίσεις WooCommerce – WooCommerce > Ρυθμίσεις > Προϊόντα – και επιλέγοντας τη σελίδα που θα είναι η κύρια σελίδα καταστήματος από το αναπτυσσόμενο μενού. Στη συνέχεια, το WooCommerce θα εμφανίσει τα προϊόντα σας σε αυτήν τη σελίδα ως αποτέλεσμα της ενέργειάς σας.

Οι υπόλοιπες σελίδες μπορούν να διαμορφωθούν στην καρτέλα Για προχωρημένους, που βρίσκεται στο WooCommerce > Ρυθμίσεις > Για προχωρημένους .

Δημιουργία των προϊόντων σας

Βήμα 1 – Στην πλαϊνή γραμμή διαχειριστή του WordPress, μεταβείτε στην καρτέλα Προϊόντα > Προσθήκη προϊόντος.

Βήμα 2 – Στο επάνω μέρος της σελίδας, εισαγάγετε το όνομα του προϊόντος σας.

Βήμα 3 – Συμπληρώστε το πεδίο περιεχομένου της ανάρτησης με το κείμενο από την περιγραφή του προϊόντος. Όλες οι πληροφορίες του προϊόντος θα εμφανίζονται σε αυτήν την ενότητα.

Βήμα 4 – Συμπληρώστε το πλαίσιο « Δεδομένα προϊόντος » με όλες τις πληροφορίες προϊόντος. Για παράδειγμα amp η τιμή, το SKU και η αποστολή είναι όλες πιθανές επιλογές.

Βήμα 5 – Στο πλαίσιο « Σύντομη περιγραφή προϊόντος », πληκτρολογήστε μια συνοπτική περιγραφή του προϊόντος σας που θα εμφανίζεται δίπλα στις κύριες εικόνες σας.

Βήμα 6 – Η κύρια επιλεγμένη εικόνα πρέπει να τοποθετηθεί κάτω από το πλαίσιο « Εικόνα προϊόντος » στη δεξιά πλευρά της σελίδας. Αυτό πρέπει να συμπληρώνεται για κάθε προϊόν.

Βήμα 7 – Προσθέστε περισσότερες εικόνες στο πλαίσιο « Συλλογή προϊόντων » εάν θέλετε να χρησιμοποιήσετε μια συλλογή εικόνων αντί για μια μεμονωμένη εικόνα.

Βήμα 8 – Στο πλαίσιο « Κατηγορίες προϊόντων », εισαγάγετε τις κατηγορίες που ισχύουν για τα προϊόντα σας. Στη συνέχεια, συμπληρώστε τα κενά με τις κατάλληλες ετικέτες για το προϊόν σας στο πλαίσιο « Ετικέτες προϊόντων ».

Βήμα 9 – Αφού εισαγάγετε όλες τις απαραίτητες πληροφορίες, κάντε κλικ στο κουμπί « Δημοσίευση » και το αντικείμενο θα εμφανιστεί στην κύρια σελίδα της βιτρίνας σας.

Δημιουργία εφέ ζουμ προϊόντος

Εάν χρησιμοποιείτε Avada Layouts, θα πρέπει να βεβαιωθείτε ότι η επιλογή Zoom Images Products WooCommerce είναι ενεργοποιημένη στην επιλογή Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Product Zoom ή στην καρτέλα Woo Product Images Element General > Εικόνων προϊόντων Ζουμ αν χρησιμοποιείτε WooCommerce Layouts.

Πλάτος εικόνων προϊόντων WooCommerce – Το κύριο πλάτος εικόνας σας (δείτε τη ρύθμιση παρακάτω) και το πραγματικό μέγεθος της εικόνας που μεταφορτώνετε θα πρέπει να είναι μεγαλύτερα από τη ρύθμιση Avada > Επιλογές > WooCommerce > Γενικά WooCommerce > Πλάτος εικόνων προϊόντων WooCommerce ή τη ρύθμιση Μέγιστο πλάτος εικόνων προϊόντος στο στοιχείο Woo Product Images. Το πλάτος της στήλης κοντέινερ για μια συλλογή προϊόντων θα καθοριστεί από τις ρυθμίσεις που θα επιλέξετε. Αφού κάνετε τις απαραίτητες προσαρμογές, θα είστε έτοιμοι να ορίσετε το πλάτος της κύριας εικόνας στο WooCommerce.

WordPress Main Image Width – Η ρύθμιση WooCommerce Main Image Width μπορεί να βρεθεί στο Customizer του ιστότοπού σας WordPress. Από τον πίνακα ελέγχου του WordPress, μεταβείτε στην επιλογή Εμφάνιση > Προσαρμογή > WooCommerce > Εικόνες προϊόντων , όπου θα βρείτε τη ρύθμιση Πλάτος κύριας εικόνας. Αυτό θα καθορίσει το πραγματικό μέγεθος της εικόνας που εμφανίζεται στη συλλογή.

Όσο πιο λεπτομερές θα είναι το εφέ ζουμ σας, τόσο μεγαλύτερο είναι το μέγεθος της εικόνας που έχετε ορίσει για την εικόνα σας. Για να διευκρινίσουμε, εάν το μέγεθος της εικόνας στις ρυθμίσεις WooCommerce ταιριάζει με το πλάτος της εικόνας στις καθολικές επιλογές του Avada, δεν θα είναι ορατή η μεγέθυνση όταν το ποντίκι τοποθετηθεί πάνω από την εικόνα στη σελίδα. Επιπλέον, το μέγεθος της πραγματικής εικόνας που ανεβάζετε πρέπει να είναι ίδιο ή μεγαλύτερο από τη ρύθμιση Main Image Width στο σχέδιο του ιστότοπού σας.

Βεβαιωθείτε ότι έχετε αναδημιουργήσει τις μικρογραφίες σας μετά την αλλαγή των μεγεθών εικόνας WooCommerce. Αυτό θα εφαρμόσει τα νέα μεγέθη εικόνων σας σε οποιεσδήποτε εικόνες έχουν ήδη μεταφορτωθεί στον ιστότοπό σας. Μπορείτε να χρησιμοποιήσετε την plugin Regenerate Thumbnails για να το πετύχετε.

Προσαρμογή των ρυθμίσεων μεγέθους εικόνας προϊόντος στο WooCommerce.

Το WooCommerce περιλαμβάνει επιλογές για την προσαρμογή του μεγέθους των εικόνων προϊόντων στις ενότητες Κατάλογος και Εικόνες μεμονωμένου προϊόντος του καταστήματος. Επιπλέον, υπάρχουν συγκεκριμένες ρυθμίσεις Avada που λειτουργούν σε συνδυασμό με τα μεγέθη εικόνας που χρησιμοποιούνται από το κατάστημά σας WooCommerce. Κατά τη διαμόρφωση αυτών των ρυθμίσεων μεγέθους εικόνας, είναι σημαντικό να θυμάστε ότι πρέπει επίσης να ληφθούν υπόψη οι καθολικές ρυθμίσεις επιλογών του Avada. Θα εξετάσουμε κάθε μία από αυτές τις επιλογές με περισσότερες λεπτομέρειες αργότερα.

Ας υποθέσουμε ότι οι εικόνες που ανεβάζετε για τα προϊόντα σας είναι μικρότερες στην πηγή από τα μεγέθη εικόνων που καθορίζονται στις ρυθμίσεις WooCommerce. Σε αυτήν την περίπτωση, ενδέχεται να παρατηρήσετε ορισμένες διαφορές στην οπτική διάταξη στο μπροστινό μέρος των σελίδων του καταστήματός σας. Αυτό δεν είναι σφάλμα σε καμία περίπτωση. Είναι απλώς επειδή οι εικόνες σας ήταν πολύ μικρές για να τις επηρεάσουν οι ρυθμίσεις του WooCommerce. Μπορείτε να σκεφτείτε αυτές τις ρυθμίσεις ως το μέγιστο πλάτος και ύψος για τις εικόνες σας όσον αφορά τις διαστάσεις της εικόνας. Οτιδήποτε πέσει κάτω από το καθορισμένο όριο δεν θα αλλάξει μέγεθος.

Κατά τη διαμόρφωση του καταστήματός σας, βεβαιωθείτε ότι λαμβάνονται υπόψη τόσο οι ρυθμίσεις μεγέθους εικόνας του WooCommerce όσο και το πραγματικό μέγεθος των εικόνων σας. Συνοπτικά, οι εικόνες σας θα πρέπει να έχουν το ίδιο μέγεθος ή μεγαλύτερο από τις ρυθμίσεις μεγέθους εικόνας στο κατάστημά σας WooCommerce.

Οποιεσδήποτε αλλαγές στις ρυθμίσεις μεγέθους της εικόνας σας θα απαιτήσουν από εσάς να δημιουργήσετε εκ νέου τις μικρογραφίες σας για να ισχύουν σε εικόνες που έχουν ήδη μεταφορτωθεί στον ιστότοπό σας. Επομένως, συνιστάται ιδιαίτερα η χρήση της plugin Regenerate Thumbnails. Επιπλέον, τα μεγέθη εικόνας μπορούν να προσαρμοστούν χρησιμοποιώντας τα παρακάτω βήματα:

Βήμα 1 – Στην πλαϊνή γραμμή διαχειριστή, πλοηγηθείτε στην καρτέλα « Εμφάνιση » και μετά στην καρτέλα « Προσαρμογή » για να ξεκινήσετε την προσαρμογή του ιστότοπού σας.

Βήμα 2 – Μεταβείτε στην καρτέλα « WooCommerce » στο επάνω μέρος της σελίδας.

Βήμα 3 – Η ρύθμιση Εικόνες για Εικόνες μεμονωμένου προϊόντος βρίσκεται στην καρτέλα « Εικόνες προϊόντος » του παραθύρου διαμόρφωσης.

Βήμα 4 – Όταν ανεβάζετε εικόνες στις σελίδες μεμονωμένων προϊόντων σας, επιλέξτε την κύρια επιλογή πλάτους εικόνας. Το πλάτος της μικρογραφίας είναι το πλάτος των μικρογραφιών για τα προϊόντα σας στον κατάλογο. Συμπληρώστε τα κενά με την επιθυμητή τιμή πλάτους.

Βήμα 5 – Για να αναδημιουργήσετε μικρογραφίες αφού αλλάξετε τα μεγέθη της εικόνας και τις αποθηκεύσετε, θα χρειαστεί να χρησιμοποιήσετε την plugin , την οποία μπορείτε να βρείτε στην Plugin . plugin Regenerate Thumbnails και, στη συνέχεια, μεταβείτε στην WP Admin > Tools , όπου μπορείτε να επιλέξετε να αναδημιουργήσετε τις μικρογραφίες των εικόνων σας, δημιουργώντας τα νέα μεγέθη εικόνας.