Καταχωρίστε τα προϊόντα στο Elementor με τον πίνακα προϊόντων WooCommerce

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

Το WordPress απλοποιεί τη διαδικασία δημιουργίας ενός ιστότοπου και γρήγορης λειτουργίας του. Το WooCommerce είναι ένα plugin WordPress που σας επιτρέπει να μετατρέψετε οποιονδήποτε ιστότοπο WordPress σε ένα πλήρως λειτουργικό ηλεκτρονικό κατάστημα. Διατρέχετε τον κίνδυνο να δημιουργήσετε έναν ιστότοπο αντιγραφής, ωστόσο, εάν συνεχίσετε με τις προεπιλεγμένες επιλογές και δυνατότητες του, αυτό μπορεί να μην είναι κατάλληλο για τις ανάγκες της επιχείρησής σας. Είναι σημαντικό να εντοπίσετε τα καλύτερα εργαλεία για το σχεδιασμό και την προσαρμογή του ιστότοπού σας μέχρι να γίνει αυτό που θέλετε.

plugin WordPress και WooCommerce είναι διαθέσιμα για τη βελτίωση της λειτουργικότητας του καταστήματός σας — το Elementor, για παράδειγμα amp είναι το πιο απλό εργαλείο για την προσαρμογή της σελίδας προϊόντος WooCommerce. Αν και είναι ένα από τα σημαντικότερα πλεονεκτήματά του, έχει επίσης ορισμένα σημαντικά μειονεκτήματα. Για amp , όταν συνδυάζετε plugin από διαφορετικούς δημιουργούς, έχετε την πιθανότητα να αντιμετωπίσετε σφάλματα συμβατότητας και άλλες επιπλοκές. Αυτό δεν συμβαίνει όταν χρησιμοποιείτε τις plugin WooCommerce Product Table και Elementor για ιστότοπους WordPress. Θα έχετε μεγαλύτερο έλεγχο της εμφάνισης και της λειτουργικότητας του ιστότοπού σας όταν χρησιμοποιείτε οποιοδήποτε από αυτά τα plugin και μπορούν να χρησιμοποιηθούν σε συνδυασμό για να έχετε ακόμα πιο εξαιρετικά αποτελέσματα.

Μια γρήγορη επισκόπηση του πίνακα προϊόντων WooCommerce και των πλαισίων Elementor

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

Το Elementor είναι ένα amp του πρώτου τύπου εφαρμογής:

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

Ενώ ο πίνακας προϊόντων WooCommerce είναι μια πιο γενική λύση, είναι επίσης πιο στοχευμένη:

Αυτό plugin σάς επιτρέπει να δημιουργείτε δυναμικούς, πλήρως προσαρμόσιμους πίνακες που παραθέτουν τα προϊόντα και τις υπηρεσίες σας στο WooCommerce. Ωστόσο, λόγω της αλληλεπίδρασής τους με το WooCommerce, αυτοί οι πίνακες είναι ιδιαίτερα κατάλληλοι για την εμφάνιση αντικειμένων και υπηρεσιών με φιλικό προς τον χρήστη και οπτικά ελκυστικό τρόπο για τους online αγοραστές. Το plugin Posts Table Pro αλληλεπιδρά εξίσου με το Elementor και παραθέτει οποιονδήποτε τύπο περιεχομένου WordPress σε έναν πίνακα αντί για απλά προϊόντα WooCommerce (αν θέλετε να εμφανίσετε κάτι ξεχωριστό από προϊόντα – όπως αναρτήσεις, σελίδες ή έγγραφα), μπορεί να χρησιμοποιηθεί αντί αυτού.

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

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

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

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

Για να ενσωματώσετε έναν πίνακα προϊόντων WooCommerce σε ένα πρόγραμμα επεξεργασίας κειμένου ή ένα γραφικό στοιχείο σύντομου κώδικα, ακολουθήστε τα εξής βήματα:

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

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

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

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

Μετά από αυτό, μπορείτε να κάνετε κλικ στο εσωτερικό του γραφικού στοιχείου για να αφαιρέσετε το προεπιλεγμένο κείμενο και να το αντικαταστήσετε με όποιο περιεχόμενο θέλετε. Όταν πρόκειται για τον ίδιο τον πίνακα προϊόντων, μπορείτε να τον συμπεριλάβετε επικολλώντας σε αυτόν τον απλό σύντομο κώδικα:

[πίνακας προϊόντων]

Όταν εισάγετε τον σύντομο κώδικα στη σελίδα σας, ο πίνακας θα εμφανιστεί στη θέση που καθορίσατε, την οποία μπορείτε να επαληθεύσετε προβάλλοντάς τον στη διεπαφή:

Εάν θέλετε να χρησιμοποιήσετε μόνο ένα στοιχείο για τον ίδιο τον κώδικα, μπορείτε να χρησιμοποιήσετε το γραφικό στοιχείο Shortcode.

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

Επιστρέψτε στον πίνακα ελέγχου του WordPress και μεταβείτε στην καρτέλα WooCommerce > Ρυθμίσεις για να ολοκληρώσετε αυτήν την εργασία. Οι πίνακες προϊόντων μπορούν να βρεθούν επιλέγοντας Προϊόντα στο επάνω μέρος της οθόνης και, στη συνέχεια, Πίνακες προϊόντων:

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

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

Ακορντεόν, καρτέλες και εναλλαγές μπορούν να χρησιμοποιηθούν για την οργάνωση πολλών τραπεζιών προϊόντων.

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

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

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

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

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

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

Καθαρίστε την ακατάλληλη σήμανση χάρη στους δωρεάν online διοργανωτές HTML, CSS και JavaScript!

Βάλτε λίγη σοβαρή σκέψη στο σχεδιασμό του ιστότοπού σας ηλεκτρονικού εμπορίου, εάν θέλετε η επιχείρησή σας να ξεχωρίζει από τον ανταγωνισμό. Για amp , θα θελήσετε να καθορίσετε τον πιο αποτελεσματικό τρόπο προβολής των προϊόντων σας, ιδανικά με ένα στυλ φιλικό προς το χρήστη και οπτικά ελκυστικό στο μάτι.

Ευτυχώς, η χρήση της plugin WooCommerce Product Table με το Elementor καθιστά αυτό μια απλή εργασία. Ο σύντομος κώδικας του πίνακα προϊόντων σας μπορεί να χρησιμοποιηθεί για να εμφανίσει όλα όσα έχει να προσφέρει ο ιστότοπός σας (ή απλώς μια επιλογή) με έναν πραγματικά δυναμικό τρόπο.

Χάνσον Φ.

Πρόσφατες δημοσιεύσεις

Πώς να χρησιμοποιήσετε κεφαλίδες και υποσέλιδα με το Elementor

Οι κεφαλίδες και τα υποσέλιδα ενός ιστότοπου είναι απαραίτητα στοιχεία. Στις περισσότερες περιπτώσεις, η κεφαλίδα παρέχει πλοήγηση…

6 Ιανουαρίου 2022

Σύγκριση θεμάτων WordPress: Astra vs OceanWP

Δύο από τα πιο δημοφιλή θέματα WordPress στην αγορά είναι το Astra και το OceanWP. Επαγγελματίας…

2 Ιανουαρίου 2022

Σύγκριση θεμάτων ειδήσεων WordPress: Εφημερίδα vs. Astra

Η δημιουργία μιας εξαιρετικής ιστοσελίδας ειδήσεων δεν απαιτεί να γίνετε σχεδιαστής ιστοσελίδων. Εμείς…

25 Οκτωβρίου 2021

Δημιουργήστε έναν ιστότοπο που σχετίζεται με ειδήσεις με Θέμα εφημερίδας

Το θέμα εφημερίδας είναι ένα από τα πιο σημαντικά θέματα WordPress που σχεδιάστηκε από την tagDiv, μια…

18 Οκτωβρίου 2021

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

Όταν πρόκειται για τη δημιουργία ενός ηλεκτρονικού καταστήματος, το WooCommerce είναι η πιο δημοφιλής plugin . Το…

4 Οκτωβρίου 2021

Πώς να χρησιμοποιήσετε εφέ κολλητικής κεφαλίδας και κύλισης με το Elementor

Μια κεφαλίδα είναι γενικά το πρώτο πράγμα που βλέπει ένα άτομο όταν επισκέπτεται τον ιστότοπό σας,…

21 Σεπτεμβρίου 2021