Ο Elementor και το WooCommerce μαζί σχηματίζουν έναν από τους πιο ευέλικτους συνδυασμούς για την κατασκευή προσαρμοσμένων διαδικτυακών καταστημάτων στο WordPress. Ενώ το WooCommerce διαχειρίζεται τη λειτουργικότητα του ηλεκτρονικού εμπορίου (προϊόντα, καλάθι, πληρωμές), ο Elementor σας δίνει οπτικό έλεγχο για το πώς φαίνονται και λειτουργούν αυτές οι σελίδες καταστήματος. Σε αυτόν τον οδηγό, θα δούμε πώς να δημιουργήσουμε βασικές σελίδες WooCommerce με τον Elementor, συμπεριλαμβανομένων των σελίδων προϊόντων, των αρχείων καταστήματος και της εμπειρίας του καλαθιού.
Αυτό το σεμινάριο υποθέτει ότι έχετε εγκαταστήσει το WordPress, το WooCommerce και το Elementor Pro. Ο Elementor Pro είναι απαραίτητος για τα widgets του WooCommerce - η δωρεάν έκδοση του Elementor δεν τα περιλαμβάνει.
Τι Χρειάζεστε Πριν Ξεκινήσετε
| Απαιτούμενο | Γιατί Είναι Απαραίτητο | Πού Να Το Βρείτε |
|---|---|---|
| WordPress 6.x+ | Κεντρική πλατφόρμα CMS | wordpress.org |
| WooCommerce (δωρεάν) | Λειτουργικότητα ηλεκτρονικού εμπορίου | Κατάλογος πρόσθετων του WordPress |
| Elementor Pro | Widgets WooCommerce και Theme Builder | PluginTheme.net |
| Συμβατό θέμα | Βάση για το κατάστημά σας | Οδηγός επιλογής θέματος |
| Δείγματα προϊόντων | Περιεχόμενο για σχεδίαση προτύπων | WooCommerce → Εργαλεία → Εισαγωγή δείγματος δεδομένων |
Κατανόηση του WooCommerce Builder του Elementor
Ο Elementor Pro περιλαμβάνει έναν ειδικό WooCommerce Builder μέσα στο σύστημα Theme Builder του. Αυτό σας επιτρέπει να δημιουργείτε προσαρμοσμένα πρότυπα για:
- Σελίδα Μεμονωμένου Προϊόντος: Ελέγξτε τη διάταξη των μεμονωμένων σελίδων προϊόντων
- Αρχείο Προϊόντων: Προσαρμόστε τη σελίδα καταστήματος και τις σελίδες κατηγορίας
- Σελίδα Καλαθιού: Σχεδιάστε μια προσαρμοσμένη διάταξη καλαθιού
- Σελίδα Πληρωμής: Προσαρμόστε τη διάταξη της φόρμας πληρωμής
- Σελίδα Ο Λογαριασμός Μου: Επανασχεδιάστε τον πίνακα ελέγχου του λογαριασμού πελάτη
Κάθε πρότυπο χρησιμοποιεί widgets που είναι ειδικά για το WooCommerce και αντλούν δυναμικά δεδομένα από τα προϊόντα σας. Αυτό σημαίνει ότι σχεδιάζετε τη διάταξη μία φορά και εφαρμόζεται σε όλα τα προϊόντα (ή σε συγκεκριμένες κατηγορίες) αυτόματα.
Δημιουργία Μιας Προσαρμοσμένης Σελίδας Προϊόντος
Βήμα 1: Δημιουργία του Προτύπου
- Μεταβείτε στο Πρότυπα → Theme Builder στην διαχείριση του WordPress σας
- Κάντε κλικ στο "Προσθήκη Νέου" και επιλέξτε "Μεμονωμένο Προϊόν" ως τύπο προτύπου
- Επιλέξτε ένα προ-κατασκευασμένο πρότυπο σελίδας προϊόντος ή ξεκινήστε από έναν κενό καμβά
- Ο επεξεργαστής Elementor θα ανοίξει με διαθέσιμα widgets WooCommerce στον πίνακα
Βήμα 2: Προσθήκη Widgets WooCommerce
Βασικά widgets WooCommerce για σελίδες προϊόντων:
| Widget | Τι Εμφανίζει | Επιλογές Προσαρμογής |
|---|---|---|
| Εικόνες Προϊόντος | Γκαλερί με μικρογραφίες και lightbox | Διάταξη γκαλερί, θέση μικρογραφιών, εναλλαγή ζουμ |
| Τίτλος Προϊόντος | Όνομα προϊόντος (H1) | Τυπογραφία, χρώμα, ευθυγράμμιση |
| Τιμή Προϊόντος | Κανονική και τιμή προσφοράς | Τυπογραφία, χρώμα ετικέτας προσφοράς, διάταξη |
| Αξιολόγηση Προϊόντος | Αξιολόγηση με αστέρια από κριτικές | Χρώμα αστεριών, μέγεθος, ευθυγράμμιση |
| Προσθήκη στο Καλάθι | Επιλογέας ποσότητας + κουμπί προσθήκης στο καλάθι | Στυλ κουμπιού, χρώματα, διάταξη ποσότητας |
| Σύντομη Περιγραφή Προϊόντος | Σύντομη περίληψη προϊόντος | Τυπογραφία, διάστημα |
| Μεταδεδομένα Προϊόντος | SKU, κατηγορίες, ετικέτες | Διάταξη, τυπογραφία, διαχωριστής |
| Καρτέλες Δεδομένων Προϊόντος | Περιγραφή, κριτικές, καρτέλες επιπλέον πληροφοριών | Στυλ καρτέλας, περίγραμμα, διάστημα |
| Σχετικά Προϊόντα | Προϊόντα από την ίδια κατηγορία | Στήλες, αριθμός, σειρά |
| Upsells | Συνδεδεμένα upsell προϊόντα | Διάταξη, στυλ, αριθμός |
Βήμα 3: Καλές Πρακτικές Διάταξης
Μια σελίδα προϊόντος με υψηλή μετατροπή ακολουθεί ένα δοκιμασμένο πρότυπο διάταξης:
- Πάνω από την πτυχή: Εικόνες προϊόντων (αριστερά, 50-60% πλάτος) + τίτλος, τιμή, αξιολόγηση, σύντομη περιγραφή και κουμπί προσθήκης στο καλάθι (δεξιά, 40-50% πλάτος)
- Κάτω από την πτυχή: Καρτέλες δεδομένων προϊόντος (πλήρης περιγραφή, προδιαγραφές, κριτικές)
- Κάτω τμήμα: Σχετικά προϊόντα και αναβάθμιση σε πλέγμα (3-4 στήλες)
- Στοιχεία εμπιστοσύνης: Πληροφορίες αποστολής, πολιτική επιστροφών, εικονίδια ασφάλειας κοντά στο κουμπί προσθήκης στο καλάθι
Διατηρήστε το κουμπί προσθήκης στο καλάθι ορατό χωρίς κύλιση τόσο σε υπολογιστές όσο και σε κινητά. Χρησιμοποιήστε αντίθετα χρώματα για το κουμπί ώστε να τραβάει την προσοχή.
Προσαρμογή της Σελίδας Καταστήματος (Αρχείο Προϊόντων)
Βήμα 1: Δημιουργία Προτύπου Αρχείου
- Μεταβείτε σε Πρότυπα → Δημιουργός Θέματος → Αρχείο Προϊόντων
- Προσθέστε ένα νέο πρότυπο και επιλέξτε "Αρχείο Προϊόντων" ως τύπο
- Αναθέστε συνθήκες εμφάνισης (όλα τα αρχεία, συγκεκριμένες κατηγορίες ή σελίδες ετικετών)
Βήμα 2: Ρύθμιση του Πλέγματος Προϊόντων
Το Widget Αρχείου Προϊόντων εμφανίζει τη λίστα προϊόντων σας με αυτές τις επιλογές:
- Στήλες: 2-6 στήλες (3-4 λειτουργούν καλά για τα περισσότερα καταστήματα)
- Προϊόντα ανά σελίδα: 12-24 είναι το πρότυπο για την εμπειρία χρήστη
- Σελιδοποίηση: Αριθμημένες σελίδες, κουμπί "φορτώστε περισσότερα" ή ατελείωτη κύλιση
- Dropdown ταξινόμησης: Επιτρέψτε στους πελάτες να ταξινομούν κατά τιμή, δημοτικότητα ή αξιολόγηση
- Ετικέτα πώλησης: Προσαρμόστε τη θέση, το χρώμα και το κείμενο της ετικέτας πώλησης
Για καταστήματα με πολλά προϊόντα, προσθέστε φιλτράρισμα κατηγορίας πάνω από το πλέγμα. Μπορείτε να χρησιμοποιήσετε το Widget Μενού του Elementor ή ένα πρόσθετο φίλτρου προϊόντων όπως το JetWooBuilder για προηγμένες επιλογές φιλτραρίσματος.
Σχεδίαση της Σελίδας Καλαθιού
Το Elementor Pro σας επιτρέπει να προσαρμόσετε τη διάταξη της σελίδας καλαθιού. Μια καλή σελίδα καλαθιού θα πρέπει να:
- Εμφανίζει εικόνες προϊόντων, ονόματα, τιμές και ποσότητες σε έναν καθαρό πίνακα
- Δείχνει το τρέχον σύνολο με έμφαση
- Περιλαμβάνει ένα κουμπί "Συνεχίστε τις Αγορές" που επιστρέφει στη σελίδα καταστήματος
- Εμφανίζει έναν υπολογιστή αποστολής ώστε οι πελάτες να μπορούν να εκτιμήσουν τα κόστη παράδοσης
- Δείχνει προϊόντα cross-sell κάτω από τον πίνακα καλαθιού
Το Widget Καλαθιού του Elementor αντικαθιστά την προεπιλεγμένη διάταξη καλαθιού του WooCommerce με έναν οπτικό επεξεργαστή όπου μπορείτε να στυλιζάρετε κάθε στοιχείο—όρια πίνακα, χρώματα κουμπιών, τυπογραφία και διάστημα.
Προσαρμογή της Σελίδας Ταμείου
Η σελίδα ταμείου επηρεάζει άμεσα το ποσοστό μετατροπών σας. Το Widget Ταμείου του Elementor Pro παρέχει έλεγχο πάνω σε:
- Διάταξη φόρμας: Μία στήλη ή δύο στήλες φόρμας χρέωσης/αποστολής
- Θέση συνοψίσεως παραγγελίας: Πλάι-πλάι με τη φόρμα ή πάνω/κάτω
- Στυλ κουμπιού: Χρώμα, μέγεθος και κείμενο κουμπιού παραγγελίας
- Τμήμα πληρωμής: Διάταξη ραδιοκουμπιών ή καρτελών για μεθόδους πληρωμής
- Εικονίδια εμπιστοσύνης: Προσθέστε εικονίδια ασφάλειας και κείμενο εγγύησης κοντά στη φόρμα πληρωμής
Για συμβουλές βελτιστοποίησης μετατροπών στο ταμείο, δείτε τον οδηγό βελτιστοποίησης ταμείου WooCommerce.
Σκέψεις για την Απόδοση
Το Elementor προσθέτει CSS και JavaScript στις σελίδες σας. Για ένα κατάστημα WooCommerce, η απόδοση συνδέεται άμεσα με τις μετατροπές. Διατηρήστε αυτές τις συμβουλές στο μυαλό σας:
- Χρησιμοποιήστε κοντέινερ Flexbox αντί για τμήματα/στήλες για λιγότερα στοιχεία DOM
- Βελτιστοποιήστε τις εικόνες προϊόντων: Χρησιμοποιήστε μορφή WebP, σωστές διαστάσεις και lazy loading. Δείτε τον οδηγό βελτιστοποίησης εικόνας
- Περιορίστε τον αριθμό των widgets: Κάθε widget προσθέτει markup; χρησιμοποιήστε μόνο ό,τι χρειάζεστε
- Ενεργοποιήστε τις δυνατότητες απόδοσης του Elementor: Βελτιωμένη φόρτωση πόρων, Βελτιωμένη φόρτωση CSS
- Χρησιμοποιήστε ένα plugin caching: WP Rocket λειτουργεί καλά με τις ρυθμίσεις Elementor WooCommerce
Βασικά Addons για Elementor WooCommerce
Αυτά τα addons του Elementor επεκτείνουν τις δυνατότητες κατασκευής του WooCommerce:
| Addon | Κύριες δυνατότητες WooCommerce |
|---|---|
| JetWooBuilder | Προηγμένα grids προϊόντων, προσαρμοσμένα templates αρχείων, διάταξεις μεμονωμένων προϊόντων με λογική υπό όρους |
| Essential Addons Pro | Grid προϊόντων, carousel προϊόντων, checkout WooCommerce |
| Happy Elementor Addons | Grid κατηγορίας προϊόντων, mini cart, carousel προϊόντων |
Συχνές Ερωτήσεις
Χρειάζομαι το Elementor Pro για WooCommerce ή λειτουργεί η δωρεάν έκδοση;
Το Elementor Pro απαιτείται για widgets που είναι ειδικά για WooCommerce (Εικόνες προϊόντων, Προσθήκη στο καλάθι, Καρτέλες δεδομένων προϊόντος, Καλάθι, Checkout, κ.λπ.). Η δωρεάν έκδοση του Elementor δεν περιλαμβάνει αυτά τα widgets. Μπορείτε να χρησιμοποιήσετε τη δωρεάν έκδοση για να σχεδιάσετε κανονικές σελίδες, αλλά τα προσαρμοσμένα templates WooCommerce απαιτούν Elementor Pro.
Μπορώ να χρησιμοποιήσω το Elementor για τη σελίδα checkout;
Ναι. Το Elementor Pro περιλαμβάνει ένα widget Checkout που αντικαθιστά την προεπιλεγμένη διάταξη checkout του WooCommerce. Μπορείτε να προσαρμόσετε τα πεδία της φόρμας, τη σύνοψη παραγγελίας, την ενότητα πληρωμής και τη συνολική διάταξη. Ωστόσο, προσέξτε με τις βαριές προσαρμογές που μπορεί να σπάσουν τις ενσωματώσεις πύλης πληρωμής—δοκιμάστε πάντα τη συνολική ροή αγοράς μετά από αλλαγές.
Πώς μπορώ να δημιουργήσω διαφορετικές διατάξεις σελίδων προϊόντων για διαφορετικές κατηγορίες;
Στον Theme Builder του Elementor, μπορείτε να αναθέσετε συνθήκες εμφάνισης σε κάθε template. Δημιουργήστε ένα template σελίδας προϊόντος για ρούχα (με επιλογές μεγέθους/χρώματος), ένα άλλο για ψηφιακά προϊόντα (χωρίς πληροφορίες αποστολής), και ούτω καθεξής. Κάθε template εφαρμόζεται μόνο σε προϊόντα στις καθορισμένες κατηγορίες.
Επιβραδύνει το Elementor το WooCommerce;
Το Elementor προσθέτει CSS και JavaScript overhead σε οποιαδήποτε σελίδα. Σε σελίδες προϊόντων με πολλά widgets, αυτό μπορεί να αυξήσει τους χρόνους φόρτωσης κατά 0.5-1.5 δευτερόλεπτα σε σύγκριση με τα προεπιλεγμένα templates WooCommerce. Η χρήση των ενσωματωμένων δυνατοτήτων απόδοσης του Elementor, η βελτιστοποίηση εικόνων και η χρήση ενός plugin caching βοηθούν στη μείωση αυτού του αντίκτυπου. Για καταστήματα που είναι κρίσιμα για την απόδοση, σκεφτείτε ένα ελαφρύτερο θέμα όπως το GeneratePress.
Μπορώ να χρησιμοποιήσω templates WooCommerce του Elementor με οποιοδήποτε θέμα;
Τα περισσότερα templates WooCommerce του Elementor λειτουργούν με οποιοδήποτε θέμα που υποστηρίζει το WooCommerce. Ωστόσο, ορισμένα θέματα μπορεί να έχουν τη δική τους στυλ σελίδας προϊόντων που συγκρούεται με τα templates του Elementor. Θέματα όπως το Astra, GeneratePress και OceanWP έχουν σχεδιαστεί για να λειτουργούν απρόσκοπτα με το Elementor και να παρέχουν τον καθαρότερο καμβά για προσαρμοσμένα templates.
Αποκτήστε το Elementor Pro για Δημιουργία Καταστήματος WooCommerce
Αποκτήστε πρόσβαση σε όλα τα widgets WooCommerce, Theme Builder και 100+ Pro templates. Δημιουργήστε προσαρμοσμένες σελίδες προϊόντων, αρχεία καταστημάτων και διατάξεις checkout οπτικά.
Περιηγηθείτε στο Elementor Pro →
