Archimidis Mertzanos

Τιμολόγιο στο Woocommerce χωρίς χρήση Plugin.

Καλησπέρα σε όλους. Πρωτίστως να ευχηθώ καλή συνέχεια καλοκαιριού και κατά δεύτερον να ευχηθώ καλές διακοπές σε όσους δεν έχουν πάει. Έχει περάσει πολύς καιρός και  έχουν αλλάξει διάφορα στη ζωή μου. Πλέον θα αρθρογραφώ υπό τη σκέπην της Hellenic Technologies και φυσικά ανήκω στο ανθρώπινο δυναμικό της , ειδικά στην κατασκευή ιστοσελίδων με WordPress. Σήμερα λοιπόν θα ασχοληθούμε με το τιμολόγιο στο Woocommerce.

Τιμολόγιο στο Woocommerce – Πρόλογος

Το θέμα που πραγματεύεται το σημερινό Woocommerce tutorial είναι κάτι που όλους μας , είτε ως freelancers ,είτε ως project managers είτε ως πελάτες μας έχει «ανησυχήσει» σίγουρα. Είναι η προσθήκη της δυνατότητας για τιμολόγιο στο Woocommerce. Να μπορεί δηλαδή ο πελάτης να συμπληρώνει στοιχεία τιμολογίου και ο eshop administrator να μπορεί στη συνέχεια να «κόβει» τιμολόγιο στον πελάτη αυτό. Πριν καιρό υπήρξε ένα plugin στο WordPress.org που έδινε αυτή τη δυνατότητα στα ελληνικά Woocommerce eshops , το οποίο όμως για αδιευκρίνιστο λόγο δεν υπάρχει πλέον διαθέσιμο. Έτσι αποφάσισα να γράψω ένα οδηγό ο οποίος θα σας δείξει πώς μπορείτε να ενεργοποιήσετε στοιχεία τιμολογίου στο eshop σας και να μπορεί ο εκάστοτε πελάτης να επιλέγει μεταξύ απόδειξης και τιμολογίου.

Τι γνώσεις πρέπει να έχω για να ακολουθήσω;

Όπως έχω πει πάμπολλες φορές, τα βασικά εφόδια της παρακολούθησης όλων των Woocommerce Tutorials και όχι μόνο είναι η καλή διάθεση και η θέληση για μάθηση. Βέβαια για να παρακολουθήσετε το tutorial «Τιμολόγιο στο Woocommerce» θα πρέπει να γνωρίζετε:

  • τα βασικά για WordPress Theme file names.
  • Τι είναι ένα WordPress action hook.
  • Τι είναι ένα WordPress filter hook.
  • μέτρια PHP.

Δεν θα φτιάξουμε το συγκεκριμένο feature σαν plugin αλλά θα χρησιμοποιήσουμε το functions.php αρχείο ενός child theme. Το theme είναι το Storefront theme που είναι το επίσημο δωρεάν theme για το Woocommerce.

Ξεκινώντας το τιμολόγιο για Woocommerce. Πρώτες σκέψεις

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

Τι θέλω να κάνω; Ποιο πρόβλημα θα επιλύσω στο τέλους αυτού του άρθρου;

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

  1. Επωνυμία Εταιρείας
  2. Επάγγελμα
  3. Α.Φ.Μ
  4. Δ.Ο.Υ

Το Woocommerce plugin δεν διαθέτει τα πεδία αυτά by default. Εμείς λοιπόν θα τα δημιουργήσουμε.

Πώς θα «δημιουργήσω» τα πεδία για τιμολόγιο στο Woocommerce;

Όπως είπαμε και παραπάνω, δεν θα χρησιμοποιήσω Plugin για αυτή την εργασία αλλά θα φτιάξω κάποια functions τα οποία θα κάνουν τις εξής εργασίες.

  • Θα προσθέτουν ένα checkbox κάτω από τα «Order Notes» της παραγγελίας, στη σελίδα «checkout»
  • Εάν ο χρήστης το επιλέξει θα ανοίγουν 4 text input fields που ο χρήστης θα τα συμπληρώνει υποχρεωτικά.
  • Θα προσπαθήσω να τα κάνω required ώστε ο χρήστης που επιλέγει «τιμολόγιο» να τα συμπληρώνει υποχρεωτικά.
  • Θα προσπαθήσω να χρησιμοποιήσω action hooks και filters και με τη χρήση αυτών να τα προσθέσω.

Τι αποτέλεσμα θέλω να πετύχω;

Θέλω να καταφέρω τα εξής:

  1. Ο χρήστης να μπορεί να επιλέξει τιμολόγιο και να συμπληρώνει τα αντίστοιχα πεδία αυτού.
  2. Ο admin να μπορεί στην παραγγελία να βλέπει τα στοιχεία αυτά.

Ξεκινώντας το tutorial «Τιμολόγιο στο Woocommerce».

Καταρχάς θα κάνουμε ένα WordPress installation είτε τοπικά , είτε σε κάποιον live server. Σε αυτό το installation θα εγκαταστήσουμε το Woocommerce plugin καθώς και το storefront theme και θα τα ενεργοποιήσουμε φυσικά. Το πιο καλό στοιχείο είναι ότι πλέον με την εγκατάσταση του Woocommerce και χρησιμοποιώντας τον wizard που εμφανίζεται , σας προτείνετε να εγκαταστήσετε και το Storefront theme. Έτσι εγκαθιστάτε και τα 2 .

Έχοντας κάνει τα παραπάνω σας προτείνω να χρησιμοποιήσετε άλλο ένα WordPress plugin , το Woocommerce Products Generator για να προσθέσετε μερικά dummy products στο νέο eshop σας. Στη συνέχεια συνδέστε στο eshop σας τον αγαπημένο σας HTML/CSS editor και ξεκινάει η δράση.

Μερικά λόγια για τα WordPress action hooks / filter hooks.

Τα hooks είναι μία πολύ βασική δυνατότητα που παρέχει το WordPress στους διάφορους developers .Είναι κάποια σημεία , κάποια functions στα οποία μπορούμε εμείς είτε να δέσουμε τα δικά μας είτε να αλλάξουμε αυτό που παράγουν με ένα δικό μας function. Στην πρώτη περίπτωση έχουμε να κάνουμε με τα  «action hooks» ενώ στη δεύτερη με τα «filter hooks». Ένα πολύ απλό παράδειγμα χρήσης action hook είναι ο τρόπος με τον οποίο κάνουμε enqueue τα styles και τα scripts στο WordPress. Για παράδειγμα μέσα σε κάποιο αρχείο functions.php σίγουρα έχετε δει το παρακάτω κομμάτι κώδικα:

Στο παράδειγμά μας , φτιάξαμε μία custom function «example_load_styles» και την «κρεμάσαμε» στο hook «wp_enqueue_scripts» και έτσι προσθέσαμε τα διάφορα stylesheets που θέλαμε.

Το WordPress καταρχήν αλλά και πολλά καλά Custom WordPress themes και Plugins φτιάχνονται με την λογική των hooks για να μπορούμε εύκολα να αλλάξουμε αυτό που λαμβάνουμε χωρίς να κάνουμε αλλαγές στα διάφορα core files. Το ίδιο ισχύει φυσικά και με το Woocommerce plugin. Εμείς, στο tutorial αυτό θα χρησιμοποιήσουμε διάφορα hooks του για να τροποποιήσουμε την checkout page ώστε να προστεθούν τα στοιχεία τιμολογίου.

Τι hooks θα χρησιμοποιήσουμε για το τιμολόγιο για Woocommerce;

Καταρχάς ότι custom coding γράψουμε ,θα το περάσουμε στο functions.php του child theme που δημιουργήσαμε , εγκαθιστώντας το storefront theme. Για να κάνουμε ένα child theme, ο απλός τρόπος είναι να χρησιμοποιήσουμε plugin. Ένα πολύ καλό WordPress plugin είναι το One Click Child Theme Plugin.

Όσον αφορά τα hooks ψάχνοντας στο codex του Woocommerce , στο ίδιο το Woocommerce αλλά και στο ίντερνετ σίγουρα θα χρειαστούμε να «πειράξουμε» το εξής hook:

Άρα λοιπόν δεν μένει κάτι άλλο από το να αρχίσουμε να γράφουμε κώδικα. Όπως θα παρατηρήσετε , επειδή θέλουμε να προσθέσουμε πεδία στα υπάρχοντα , το πάνω Hook είναι «filter» hook. Μας επιτρέπει δηλαδή να αλλάξουμε, να μετατρέψουμε το default αποτέλεσμα όχι όμως να το σβήσουμε. Είναι προφανές ότι θέλουμε να διατηρήσουμε τα υπάρχοντα πεδία.

Πώς μπορώ να προσθέσω ένα έξτρα πεδίο στο Woocommerce checkout;

Σύμφωνα με το codex του Woocommerce ένα πεδίο έχει την εξής μορφή. Δείτε σχόλια για επεξήγηση.

Έτσι λοιπόν θα φτιάξουμε ένα custom function που θα δέσουμε με το hook που αναφέραμε πιο πάνω και θα προσθέσω τα πεδία που θέλω. Τον παρακάτω κώδικα τον γράφω στο functions.php αρχείο του child theme.

Μικρή επεξήγηση παραπάνω κώδικα

Χωρίς να πούμε πολλά ο παραπάνω κώδικας κάνει το εξής. Δηλώνει 4 έξτρα πεδία στη σελίδα checkout . Όλα τα πεδία είναι της μορφής  $fields['billing']['billing_afm'] όπου το πρώτο κομμάτι είναι το που βρίσκεται το πεδίο,μέσα σε ποιο section βρίσκεται. Στην περίπτωση μας βρίσκεται στα billing fields. Το δεύτερο κομμάτι είναι το name attribute του πεδίου αυτού το οποίο θα χρησιμοποιήσουμε και αργότερα. Βλέποντας πλέον το checkout διακρίνω τα νέα πεδία.

Τιμολόγιο στο Woocommerce, έξτρα πεδία

Στη συνέχεια και αφού σώσω τις αλλαγές πάω στο demo site μου, βάζω κάτι στο καλάθι και πάω στο checkout page όπου βλέπω αυτό.

Πώς εμφανίζω τα πεδία για το τιμολόγιο στο Woocommerce στην παραγγελία;

Μέχρι στιγμής όλα καλά. Όμως αν κάνω παραγγελία θα δω ότι στο διαχειριστικό , δε βλέπω τα πεδία που συμπλήρωσα. Βλέποντας το πάνω μέρος της παραγγελίας ίσως να μπορούσα να τα βάλω τα στοιχεία σε 2 θέσεις, στην 1 ή και στη 2.

Εννοείται ότι θα χρησιμοποιήσω κάποιο Woocommerce hook για να τα εμφανίσω εκεί. Ψάχνοντας καλά βρίσκουμε ότι μπορούμε να χρησιμοποιήσουμε είτε το  woocommerce_admin_order_data_after_shipping_address  (θέση 2) είτε το  woocommerce_admin_order_data_after_billing_address (θέση 1) για να εμφανίσουμε τα πεδία. Ας δοκιμάσουμε το πρώτο. Στο functions.php γράφουμε τον εξής κώδικα. Δείτε σχόλια για τυχόν επεξηγήσεις.

Πάμε να κάνουμε μια παραγγελία ακόμα..

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

Βελτιώσεις στο tutorial «τιμολόγιο στο Woocommerce»

Μέχρι εδώ τα πήγαμε πολύ καλά . Όμως εύκολα διαπιστώνει κάποιος ότι θα μπορούσαμε να κάνουμε κάποιες αλλαγές/προσθήκες στον κώδικά μας ώστε αυτό που φτιάξαμε να είναι ακόμα καλύτερο. Να το κάνουμε πιο user friendly για παράδειγμα. Μία βασική βελτίωση είναι να εμφανίζουμε τα πεδία τιμολογίου ΜΟΝΟ όταν ο χρήστης επιλέγει στο dropdown ότι θέλει τιμολόγιο. Υπάρχουν και μερικές άλλες που θα τις δούμε πιο κάτω.

Βελτίωση 1: Εμφάνιση στοιχείων τιμολογίου μόνο όταν τα ζητάει ο χρήστης.

Σε αυτό το σημείο θα χρησιμοποιήσουμε λίγο jQuery. Θα κάνουμε το εξής. Θα φτιάξουμε ένα script το οποίο θα ελέγχει καταρχάς το dropdown τι τιμή έχει:

  1. Αν είναι στο «Όχι» τα πεδία θα κρύβονται
  2. Αν είναι στο «Ναι» τα πεδία θα παραμένουν. Αυτό γιατί το Woocommerce λόγω του Session που χρησιμοποιεί κρατά τις επιλογές του χρήστη στη φόρμα . Αν δηλαδή συνδεθείτε ,κάνετε αγορά και εν συνεχεία το ξανακάνετε , όλα τα στοιχεία σας θα είναι στην φόρμα.
  3. Αν ο χρήστης αλλάζει την τιμή του dropdown , τα πεδία θα εμφανίζονται και θα εξαφανίζονται αντιστοίχως.

Μπορούμε να γράψουμε το εξής code block. Εγώ προσωπικά το τοποθέτησα μέσα σε ένα αρχείο childjs.js το οποίο το κάνω enqueue στο child theme που έφτιαξα.

Leave a Reply

6 Σχόλια on "Τιμολόγιο στο Woocommerce χωρίς χρήση Plugin."

Ενημέρωσε με για..
avatar
Sort by:   νεότερα | παλαιότερα | πιο πολύ ψηφισμένα
Andreas
Guest

Καλησπέρα Αρχιμήδη,

Σε περίπτωση που θα ήθελα να ελέγξω και το order status της παραγγελίας τι θα έπρεπε να κάνω;
Δηλαδή εάν έχει επιλεγεί τιμολόγιο: ΝΑΙ τότε η παραγγελία να μπαίνει σε status hold.

Ευχαριστώ,

Ανδρέας

spiros
Guest

«»Μπορούμε να γράψουμε το εξής code block. Εγώ προσωπικά το τοποθέτησα μέσα σε ένα αρχείο childjs.js το οποίο το κάνω enqueue στο child theme που έφτιαξα.»»
Αρχιμήδη καλησπερα!!
μηπως μπορεις να μου πεις που να βαλω το αρχειο js? (το εχω βαλει μεσα στον φακελο js του theme). Επισης μπορεις να μου πεις πως θα κανω enqueue στο theme μου? ευχαριστω εκ των προτερων!!

wpDiscuz