Δημιουργήστε και σχεδιάστε μια καταπληκτική σελίδα προϊόντων 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 παρέχει μια ενσωματωμένη ενότητα Εικόνες προϊόντων που μας επιτρέπει να το εισαγάγουμε στο πρότυπό μας.

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

επιλογέας .onsale {\ sbackground-color: # cc3366; \μικρό}

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

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

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

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

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

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

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

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

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

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

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

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

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

Σύντομη περιγραφή του Elementor p roduct

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

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

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

Elementor και WooCommerce p roduct upsells

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

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

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

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

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

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

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

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

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

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