Όταν πρόκειται για τη δημιουργία ενός ηλεκτρονικού καταστήματος, το WooCommerce είναι το plugin μπορείς να κάνεις. Είναι γελοία απλό να δημιουργήσετε ένα ηλεκτρονικό κατάστημα και να αρχίσετε να πουλάτε τα προϊόντα σας μόλις τελειώσετε. Το Avada παρέχει ολοκληρωμένη υποστήριξη και ενσωμάτωση σχεδιασμού για το WooCommerce, επιτρέποντάς σας να δημιουργήσετε το κατάστημα των ονείρων σας, διασφαλίζοντας παράλληλα ότι φαίνεται ακριβώς στο πλαίσιο που έχετε στο μυαλό σας.
Το Avada έχει να κάνει με τη δυνατότητα προσαρμογής της εμφάνισης του ιστότοπού σας, η οποία δεν διαφέρει από την ενσωμάτωση του WooCommerce. Χρησιμοποιώντας το δημοφιλές δίκτυο προηγμένων επιλογών μας, μπορείτε να επιλέξετε από ένα ευρύ φάσμα προσαρμογών για μια ποικιλία δυνατοτήτων σχεδιασμού, όπως:
- Το WooCommerce έχει τον δικό του πίνακα παγκόσμιων επιλογών Avada, ξεχωριστό από τον κύριο πίνακα επιλογών Avada.
- Οι επιλογές σελίδας Avada είναι διαθέσιμες για κάθε προϊόν.
- Το Avada Builder σάς επιτρέπει να δημιουργείτε σχέδια σελίδων προϊόντων σύροντας και αποθέτοντας στοιχεία.
Για να δημιουργήσετε τον ιστότοπό σας ηλεκτρονικού εμπορίου με το Avada.
Αρχικά, πρέπει να εγκαταστήσουμε το wooCommerce στο Avada.
- Εγκατάσταση WooCommerce - Οδηγίες βήμα προς βήμα
- Πώς να αντιστοιχίσετε μια σελίδα καταστήματος στον ιστότοπό σας
- Δημιουργία των προϊόντων σας
- Δημιουργία προϊόντος Zoom Effect
- Προσαρμογή των ρυθμίσεων μεγέθους εικόνας προϊόντος στο WooCommerce.
Εγκατάσταση WooCommerce - Οδηγίες βήμα προς βήμα
Πηγαίνετε στο Avada> Plugin s / Add-ons και εμφάνιση για την WooCommerce 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 – Συμπληρώστε το πλαίσιο « Δεδομένα προϊόντος » με όλες τις πληροφορίες προϊόντος. Για παράδειγμα , η τιμή, το SKU και η αποστολή είναι όλες πιθανές επιλογές amp
Βήμα 5 – Στο πλαίσιο « Σύντομη περιγραφή προϊόντος », πληκτρολογήστε μια συνοπτική περιγραφή του προϊόντος σας που θα εμφανίζεται δίπλα στις κύριες εικόνες σας.
Βήμα 6 – Η κύρια επιλεγμένη εικόνα πρέπει να τοποθετηθεί κάτω από το πλαίσιο « Εικόνα προϊόντος » στη δεξιά πλευρά της σελίδας. Αυτό πρέπει να συμπληρώνεται για κάθε προϊόν.
Βήμα 7 – Προσθέστε περισσότερες εικόνες στο πλαίσιο « Συλλογή προϊόντων » εάν θέλετε να χρησιμοποιήσετε μια συλλογή εικόνων αντί για μια μεμονωμένη εικόνα.
Βήμα 8 – Στο πλαίσιο « Κατηγορίες προϊόντων », εισαγάγετε τις κατηγορίες που ισχύουν για τα προϊόντα σας. Στη συνέχεια, συμπληρώστε τα κενά με τις κατάλληλες ετικέτες για το προϊόν σας στο πλαίσιο « Ετικέτες προϊόντων ».
Βήμα 9 – Αφού εισαγάγετε όλες τις απαραίτητες πληροφορίες, κάντε κλικ στο κουμπί « Δημοσίευση » και το αντικείμενο θα εμφανιστεί στην κύρια σελίδα της βιτρίνας σας.
Δημιουργία προϊόντος Zoom Effect
Εάν χρησιμοποιείτε Avada Layouts, θα πρέπει να βεβαιωθείτε ότι η επιλογή Zoom Images Products WooCommerce είναι ενεργοποιημένη στην επιλογή Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Products 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, δεν θα είναι ορατό το ζουμ όταν το ποντίκι τοποθετεί τον δείκτη πάνω από την εικόνα στη σελίδα. Επιπλέον, το μέγεθος της πραγματικής εικόνας που ανεβάζετε πρέπει να είναι το ίδιο ή μεγαλύτερο από τη ρύθμιση Κύριο πλάτος εικόνας στο σχεδιασμό του ιστότοπού σας.
Βεβαιωθείτε ότι αναγεννάτε τις μικρογραφίες σας αφού αλλάξετε τα μεγέθη εικόνας του WooCommerce. Αυτό θα εφαρμόσει τα νέα σας μεγέθη εικόνας σε τυχόν εικόνες που έχουν ήδη μεταφορτωθεί στον ιστότοπό σας. Μπορείτε να χρησιμοποιήσετε την plugin Αναγέννηση μικρογραφιών plugin να το κάνετε αυτό.
Προσαρμογή των ρυθμίσεων μεγέθους εικόνας προϊόντος στο WooCommerce.
Το WooCommerce περιλαμβάνει επιλογές για την προσαρμογή του μεγέθους των εικόνων προϊόντων στις ενότητες Κατάλογος καταστήματος και εικόνες ενός προϊόντος. Επιπλέον, υπάρχουν συγκεκριμένες ρυθμίσεις Avada που λειτουργούν σε συνδυασμό με τα μεγέθη εικόνας που χρησιμοποιεί το κατάστημα WooCommerce. Κατά τη διαμόρφωση αυτών των ρυθμίσεων μεγέθους εικόνας, είναι σημαντικό να θυμάστε ότι οι γενικές ρυθμίσεις επιλογών Avada πρέπει επίσης να λαμβάνονται υπόψη. Θα εξετάσουμε κάθε μία από αυτές τις επιλογές με περισσότερες λεπτομέρειες αργότερα.
Ας υποθέσουμε ότι οι εικόνες που ανεβάζετε για τα προϊόντα σας είναι μικρότερες στην πηγή από τα μεγέθη εικόνας που καθορίζονται στις ρυθμίσεις του WooCommerce. Σε αυτήν την περίπτωση, ενδέχεται να παρατηρήσετε ορισμένες ασυμφωνίες οπτικής διάταξης στο μπροστινό μέρος των σελίδων του καταστήματός σας. Αυτό δεν είναι σφάλμα με κανέναν τρόπο. Είναι απλά επειδή οι εικόνες σας ήταν πολύ μικρές για να τις επηρεάσουν οι ρυθμίσεις του WooCommerce. Μπορείτε να σκεφτείτε αυτές τις ρυθμίσεις ως το μέγιστο πλάτος και ύψος για τις εικόνες σας ως προς τις διαστάσεις της εικόνας. Οτιδήποτε πέσει κάτω από το καθορισμένο όριο δεν θα αλλάξει μέγεθος.
Κατά τη διαμόρφωση του καταστήματός σας, βεβαιωθείτε ότι λαμβάνονται υπόψη τόσο οι ρυθμίσεις μεγέθους εικόνας WooCommerce όσο και το πραγματικό μέγεθος των εικόνων σας. Συνοψίζοντας, οι εικόνες σας πρέπει να έχουν το ίδιο μέγεθος ή μεγαλύτερες από τις ρυθμίσεις μεγέθους εικόνας στο κατάστημα WooCommerce.
Οποιεσδήποτε αλλαγές στις ρυθμίσεις μεγέθους εικόνας θα απαιτούν από εσάς να αναγεννήσετε τις μικρογραφίες σας για να ισχύσουν σε εικόνες που έχουν ήδη μεταφορτωθεί στον ιστότοπό σας. Επομένως, συνιστάται ιδιαίτερα η χρήση της plugin Αναγέννηση μικρογραφιών. Επιπλέον, τα μεγέθη εικόνας μπορούν να προσαρμοστούν χρησιμοποιώντας τα παρακάτω βήματα:
Βήμα 1 – Στην πλαϊνή γραμμή διαχειριστή, μεταβείτε στην καρτέλα « Εμφάνιση » και μετά στην καρτέλα « Προσαρμογή » για να ξεκινήσετε την προσαρμογή του ιστότοπού σας.
Βήμα 2 – Μεταβείτε στην καρτέλα « WooCommerce » στο επάνω μέρος της σελίδας.
Βήμα 3 καρτέλα « Εικόνες προϊόντος » του παραθύρου διαμόρφωσης
Βήμα 4 – Όταν ανεβάζετε εικόνες στις σελίδες μεμονωμένων προϊόντων σας, επιλέξτε την κύρια επιλογή πλάτους εικόνας. Το πλάτος της μικρογραφίας είναι το πλάτος των μικρογραφιών για τα προϊόντα σας στον κατάλογο. Συμπληρώστε τα κενά με την επιθυμητή τιμή πλάτους.
Βήμα 5 – Για να αναδημιουργήσετε μικρογραφίες αφού αλλάξετε τα μεγέθη της εικόνας και τις αποθηκεύσετε, θα χρειαστεί να χρησιμοποιήσετε την plugin , την οποία μπορείτε να βρείτε στην ενότητα Plugin s. Πρώτα, εγκαταστήστε την plugin και, στη συνέχεια, μεταβείτε στην WP Admin > Tools , όπου μπορείτε να επιλέξετε να δημιουργήσετε ξανά τις μικρογραφίες των εικόνων σας, δημιουργώντας τα νέα μεγέθη εικόνας.
