Προσθήκη Product tabs στο WooCommerce

Πριν λίγες μέρες εμφανίστηκε ανάγκη σε ένα WooCommerce project να προσθέσω κάποια δεδομένα μέσα σε κάθε προϊόν. Όλοι που ασχολούμαστε με το WooCommerce γνωρίζουμε ότι στην σελίδα που κάνουμε edit το προϊόν , κάτω από τον editor υπάρχουν τα product tabs.

Μέσα σε αυτά ορίζουμε τιμές, δεδομένα αποθήκης και δημιουργούμε και τα διάφορα variations του προϊόντος όταν χρειάζεται. Τα product tabs ενός προϊόντος είναι τα παρακάτω:

Image for post
Image for post
Τα product tabs στο WooCommerce μας βοηθάνε στην ρύθμιση του προϊόντος

Στο δικό μου το πρόβλημα ήθελα να δημιουργήσω ένα πεδίο το οποίο ανάλογα τον ρόλο που έχει ένας χρήστης , θα έδειχνε ένα HTML table για τον συγκεκριμένο ρόλο , ο οποίος θα γινόταν rendered με PHP. Στην περίπτωσή μας ήθελα να φαίνεται ο πίνακας για τους ρόλους shop manager ή customer και μόνο. Αυτός ο πίνακας είναι per product ,δηλαδή δεν θα εμφανιζόταν σε όλα τα προϊόντα αλλά μόνο εκεί που το συμπλήρωνα.

Τι θα μπορούσα να κάνω;

Θα μπορούσα να προσθέσω ένα custom field , το οποίο θα εμφανιζόταν είτε δεξιά είτε από κάτω από τα υπόλοιπα metaboxes και θα το συμπλήρωνα . Θα μπορούσα να είχα 2 πεδία,ένα για τον κάθε user role που ήθελα και να το συμπλήρωνα καταλλήλως. Στο frontend θα εμφάνιζα με κάποιο if..else αυτό που ήθελα. Δεν ήθελα όμως να το κάνω έτσι γιατί απλά ήθελα να δοκιμάσω να περάσω τα δεδομένα μέσα στα product tabs. Ένα δικό μου product tab για την ακρίβεια.

Διαβάζοντας και ψάχνοντας τα αναρίθμητα action και filter hooks του WooCommerce βρήκα τελικά ποια hooks ήταν αυτά που θα έκαναν τη δουλειά που ήθελα. Θα συμπεριλάβω ΟΛΟ τον κώδικα που χρησιμοποίησα και θα έχει επεξηγήσεις στα σχόλια.

Σημαντικό να αναφέρω ότι χρησιμοποίησα τον κώδικα αυτόν στο child theme του WordPress theme το οποίο ήταν εγκατεστημένο.

Το πώς θα εμφανίσετε μπροστά το αποτέλεσμα που θέλετε το αφήνω πάνω σας. Με τον παραπάνω κώδικα μπορέσαμε και προσθέσαμε custom fields μέσα σε δικό μας product tab στο WooCommerce.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store