Δημιουργήστε και σχεδιάστε μια καταπληκτική σελίδα προϊόντος WooCommerce με το Elementor

Πρέπει να τροποποιήσετε τη σελίδα του προϊόντος σας για να ξεχωρίσετε το ηλεκτρονικό σας κατάστημα από τον ανταγωνισμό και να παρέχετε στους πελάτες σας μια μοναδική εμπειρία. Επιπλέον, η επιλογή να εξατομικεύσετε αισθητικά τη σελίδα του προϊόντος σας είναι κρίσιμη για τη διατήρηση ενός συνεπούς οπτικού σχεδιασμού σε όλο το ηλεκτρονικό σας κατάστημα.

Το Elementor είναι ένας από τους κορυφαίους κατασκευαστές ιστοτόπων WordPress στην αγορά, αλλά ξέρατε επίσης ότι θα μπορούσατε να δημιουργήσετε καταστήματα WooCommerce χρησιμοποιώντας το;

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

Το στυλ και η προσαρμογή του WooCommerce απαιτούσαν PHP και CSS για κάθε μικροσκοπική αλλαγή, αλλά καθώς τα εργαλεία όπως το Elementor βελτιώνονται και γίνονται πιο περίπλοκα, όλο και περισσότερες επιλογές γίνονται διαθέσιμες για τον έλεγχο της εμφάνισης και της λειτουργίας του καταστήματός σας.

Ας αρχίσουμε.

• Δημιουργία προτύπου Elementor
• Εικόνα ή γκαλερί προϊόντος Building Elementor
• Τίτλος προϊόντος WooCommerce, τιμή και προσθήκη στο καλάθι
• Ρύθμιση καρτελών προϊόντων Elementor
• Σύντομη περιγραφή προϊόντος Elementor
• Ανοδικές πωλήσεις προϊόντων Elementor και WooCommerce
• Συμπέρασμα – Εργαλείο δημιουργίας σελίδων προϊόντων Elementor

Δημιουργία προτύπου Elementor

Το πρώτο βήμα στη διαδικασία είναι να δημιουργήσετε ένα νέο πρότυπο Elementor μεταβαίνοντας στα Πρότυπα στον πίνακα ελέγχου του WordPress. Κάντε κλικ στο «Δημιουργία νέου» και, στη συνέχεια, επιλέξτε Μεμονωμένο προϊόν ως πρότυπο που θέλετε να δημιουργήσετε.

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

Εικόνα ή γκαλερί προϊόντος Building Elementor

Κάθε προϊόν WooCommerce έχει μια εικόνα προϊόντος ή μια γκαλερί εικόνων που παρουσιάζει τις φωτογραφίες του προϊόντος στους πελάτες. Το Elementor παρέχει μια ενσωματωμένη ενότητα Product Images που μας επιτρέπει να την εισάγουμε στο πρότυπό μας.

Δημιουργήστε μια απλή σειρά 2 στηλών και εισαγάγετε τη λειτουργική μονάδα Product Images στην αριστερή στήλη. Αυτό φαίνεται πρακτικό και εκτελεί τη δουλειά, αλλά ας προσαρμόσουμε το σήμα πωλήσεων ώστε να ταιριάζει με το θέμα Elementor Hello που χρησιμοποιείται για αυτό το άρθρο. Για να γίνει αυτό, πρέπει να εφαρμόσουμε μια μικρή γραμμή προσαρμοσμένου CSS, η οποία μπορεί να εισαχθεί πηγαίνοντας στο Advanced > Custom CSS και επικολλήστε τον παρακάτω κώδικα.

selector .onsale { \sbackground-color: #cc3366 ; \μικρό}

WooCommerce , τιμή και προσθήκη στο καλάθι

Θα προσθέσουμε τις ενότητες Elementor για τον τίτλο προϊόντος, την τιμή προϊόντος και την προσθήκη στο καλάθι στη δεξιά στήλη.

Αναζητήστε αυτές τις τρεις μονάδες στον κατασκευαστή Elementor και, στη συνέχεια, σύρετέ τις και αποθέστε τις για να τις τακτοποιήσετε με τη σειρά που αναφέρεται παραπάνω. Αυτό είναι πλήρως λειτουργικό, αλλά θέλουμε να το προσαρμόσουμε ώστε να ταιριάζει με το στυλ όπως το θέμα Hello Elementor παραπάνω ενότητας. Η διαμόρφωση μονάδων στυλ με το Elementor είναι εύκολη, το μόνο που χρειάζεται να κάνετε είναι να κάνετε κλικ στη μονάδα και ο επεξεργαστής θα πρέπει να ανοίξει τις επιλογές στυλ στα αριστερά.

Το περιεχόμενο αυτών των ενοτήτων είναι εξαιρετικό. Επομένως, θα εργαζόμαστε στην καρτέλα Στυλ Αρχικά, ας ενημερώσουμε τη γραμματοσειρά και το χρώμα του τίτλου του προϊόντος για να ταιριάζουν με αυτά που χρησιμοποιούνται στο θέμα Hello Elementor.

Στη συνέχεια, πρέπει να κάνουμε το ίδιο για τις ενότητες Τιμή προϊόντος και Προσθήκη στο καλάθι κάνοντας κλικ σε κάθε ενότητα και τροποποιώντας το χρώμα του κειμένου. Για την τιμή προϊόντος, θα χρησιμοποιήσω ένα σκούρο γκρι για αντίθεση με την επικεφαλίδα, οπότε πληκτρολογήστε αυτόν τον εξαγωνικό κώδικα εάν ακολουθείτε – #54595f

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

• Ορίστε το περιεχόμενο σε "Προσθήκη στο καλάθι".
• Ορίστε το χρώμα φόντου σε '#cc3366'
• Ορίστε την ακτίνα περιγράμματος στο 0

Άλλαξα την ακτίνα περιγράμματος του επιλογέα ποσού σε 0, το οποίο μπορείτε να κάνετε στην καρτέλα Στυλ για Ποσότητα.

Ρύθμιση καρτελών προϊόντων Elementor

Κάθε προϊόν πρέπει να εμφανίζει ορισμένες βασικές πληροφορίες, όπως περιγραφή προϊόντος και κριτικές, εάν είναι διαθέσιμες. Αυτό γίνεται συνήθως μέσω των καρτελών προϊόντων.

Δημιουργήστε μια νέα σειρά κάτω από την επάνω ενότητα και σύρετε τη λειτουργική μονάδα καρτελών δεδομένων προϊόντος από το εργαλείο δημιουργίας Elementor στη σειρά για να την εισαγάγετε. Δεν απαιτείται πολύ στυλ εδώ, επειδή κληρονομεί ορισμένα στυλ από το θέμα Hello Elementor. Ωστόσο, ας τροποποιήσουμε το στυλ του κουμπιού υποβολής κριτικής.

Για να γίνει αυτό, θα χρειαστούμε ξανά λίγο προσαρμοσμένο CSS. Ξεκινήστε να επεξεργάζεστε τις καρτέλες δεδομένων προϊόντος και, στη συνέχεια, κάντε κλικ στην καρτέλα Για προχωρημένους και κάντε κύλιση προς τα κάτω στο Προσαρμοσμένο CSS. Εισαγάγετε το παρακάτω CSS και μπορείτε να προσαρμόσετε τα χρώματα σύμφωνα με το σχέδιό σας.

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; χρώμα: #fff; περίγραμμα-ακτίνα: 0px; }

Σύντομη περιγραφή προϊόντος Elementor

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

Αναζητήστε την ενότητα Σύντομη περιγραφή WooCommerce και, στη συνέχεια, σύρετε και αποθέστε την κάτω από την Τιμή προϊόντος και πάνω από τη μονάδα Προσθήκη στο καλάθι.

Δεν απαιτείται ακόμη στυλ εδώ, καθώς έχει κληρονομήσει τα στυλ από το Hello Elementor.

Ανοδικές πωλήσεις προϊόντων Elementor και WooCommerce

Η αύξηση της μέσης αξίας του καλαθιού σας είναι ζωτικής σημασίας για κάθε ιστότοπο WooCommerce, γι' αυτό είναι ωραίο που το Elementor περιλαμβάνει μια ενότητα Product Upsells για να μπορείτε να ενσωματώσετε εύκολα την προσαρμογή στο κατάστημά σας.

Αναζητήστε τη λειτουργική μονάδα Upsells προϊόντος στο εργαλείο δημιουργίας Elementor και εισαγάγετε τη σε μια νέα σειρά πίσω από τις καρτέλες δεδομένων προϊόντος.

Όπως μπορείτε να δείτε, αυτό απαιτεί λίγη προσαρμογή για να συμπληρώσει το υπόλοιπο στυλ μας. Ξεκινήστε να τροποποιείτε τη μονάδα και κάντε τις ακόλουθες αλλαγές:

• Ορίστε το χρώμα τίτλου σε – #cc3366
• Ορίστε το χρώμα Επικεφαλίδας σε – #cc3366
• Ορίστε το χρώμα τιμής σε – #54595f
• Ορίστε το χρώμα φόντου του κουμπιού σε – #cc3366
• Ορίστε το χρώμα του κουμπιού σε – #fff
• Ρυθμίστε την ακτίνα περιγράμματος του κουμπιού t0 – 0

Το τελικό προϊόν θα μοιάζει με το παραπάνω. Μπορείτε να προσαρμόσετε τον εξαγωνικό κώδικα χρώματος όπως κρίνετε κατάλληλο, εάν χρησιμοποιήσετε αυτόν τον οδηγό ως σημείο εκκίνησης για το πρότυπό σας.

Μόλις τελειώσετε, δημοσιεύετε το πρότυπό σας. Στο επόμενο παράθυρο, θα δείτε την ερώτηση "Πού θέλετε να εμφανίσετε το πρότυπό σας;". Κάντε κλικ στο "Προσθήκη συνθήκης" για να προσδιορίσετε πότε θα χρησιμοποιηθεί αυτό το πρότυπο. Μπορείτε να επιλέξετε "Όλα τα προϊόντα" για να χρησιμοποιήσετε το πρότυπο σε όλες τις σελίδες προϊόντων σας. Μπορείτε επίσης να επιλέξετε να χρησιμοποιήσετε αυτό το πρότυπο μόνο για προϊόντα που εμπίπτουν σε μια συγκεκριμένη κατηγορία ή έχουν μια συγκεκριμένη ετικέτα που σχετίζεται με αυτά.

Συμπέρασμα – Εργαλείο δημιουργίας σελίδων προϊόντων

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

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

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