Πως προσθέτουμε εικονίδιο σε φόρμα αναζήτησης προϊόντων Woocommerce

Για το Woocommerce υπάρχουν πάρα πολλά θέματα τα οποία συνήθως συμπεριλαμβάνουν custom αρχεία για την παραμετροποίηση της εμφάνισης και συμπεριφοράς του Woocommerce. Όταν όμως το template, μας αρέσει αλλά δεν θέλουμε να φορτώσουμε την ιστοσελίδα μας με περιττά στοιχεία αλλα θέλουμε να κάνουμε χρήση μόνο τα απαραίτητα, έχοντας παράλληλα τη δυνατότητα παραμετροποίησης, χρησιμοποιούμε Page Builders με δυνατότητες custom layout.

Το παρών άρθρο απευθύνεται σε εγκατάσταση Woocommerce 3.3.3 με template Ocean WP, elementor Page Builder & Elementor Pro.

Σε μία αρχική κατάσταση η φόρμα αναζήτησης διαθέτει το πεδίο εισόδου κειμένου και ένα εικονίδιο.

Woocommerce Storefront Demo
Woocommerce Storefront Demo

Το εικονίδιο στην φόρμα αναζήτησης, παίζει το ρόλο της υπόδειξης του λόγου ύπαρξης του πεδίου. Κατευθύνει τον χρήστη στο να εισάγει την επιθυμητή λέξη ή φράση, με σκοπό την αναζήτηση προϊόντων ή σελίδων ή custom post types. Συχνά, συναντάμε περιπτώσεις όπου απαιτείται η παρουσία εικονιδίου το οποίο να αλλεληλεπιδρά με τον χρήστη. Ιδιαίτερα σε οθόνες αφής. Αλληλεπίδραση, θεωρούμε την δυνατότητα κλικ ή tap του εικονιδίου αναζήτηση. Στην περίπτωση αυτή, σας γράφουμε πως τοποθετήσαμε ένα τέτοιο εικονίδιο με απλά βήματα.

Woocommerce Override Template

Για τις αλλαγές σε πρόσθετα στο WordPress, χρησιμοποιούμε την μέθοδο του override. Δημιουργούμε ένα αντίγραφο του αρχείου του Woocommerce, στον φάκελο του theme. Έτσι, ενημερώνουμε το WordPress, πως θέλουμε να φορτώσει το παραμετροποιημένο αρχείο μας, αντί του βασικού αρχείου που βρίσκεται στους φακέλους του plugin.

Έτσι, δεν σπάμε το Plugin σε περίπτωση λάθους. Επιτρέπουμε σε μία αναβάθμιση να μην επηρεάσει τις αλλαγές μας. Για να επιτύχουμε το παραπάνω δημιουργούμε έναν φάκελο με το όνομα woocommerce στον φάκελο του template. Η διαδρομή είναι στο /wp-content/themes/όνομα-theme/.

Στην περίπτωσή μας η κλάση που θέλουμε να αλλάξουμε είναι η product-searchform.php η οποία βρίσκεται στον φάκελο /wp-content/plugins/woocommerce/templates/.

product-search-form-codeΕμείς θέλουμε στο button Αναζήτηση ή Search να προσθέσουμε ένα εικονίδιο από την οικογένεια του Font Awesome. Η μία γραμμή που πρέπει να προσθέσουμε στο button είναι η ακόλουθη.

woocommerce codeΜε τελικό αποτέλεσμα το παρακάτω.

Add Icon to Woocommerce Search Field

 

Μοιράσου το

Close Menu