WooCommerce átdizájnolása
Posted on |
A legutóbbi projektemnél előjöttek olyan igények, amik a WooCommerce átalakítását hozták magukkal. Létezik jó pár bővítmény, ami ezt segíti elő, de mi van akkor, ha mi nem szeretnénk sokadik plugint telepíteni, de van egy kis időnk arra, hogy gépeljünk pár sort.
Hol módosítható a WooCommerce kinézete?
Szerencsére, ha ilyen igényünk van, akkor sem kell a rendszert kijátszanunk, ugyanis a következő módszerekkel legálisan módosítunk a kódon.
Az első alapszabály az, hogy a sablonunkból, egy gyermek sablont kell készíteni. Ennek az az oka, hogyha jön egy frissítés, akkor ne vesszen el a beállítás. Hátránya, ha egyszer lesz valamilyen főverzió módosítás a WordPress-ben, vagy a WooCommerce-ben, akkor lehet ezekhez hozzá kell nyúljunk.
Ha ez megvan, 2 helyen is bele tudunk nyúlni a kinézetbe. Az első, a template állományok.
Template állományok szerkesztése
Ezek az állományok, a WooCommerce mappában a Templates alkönyvtárban vannak. Ahhoz, hogy módosítani tudjuk, át kell másolni a sablonunk könyvtárába, azon belül is a WooCommerce almappába.
Itt bele tudnunk nyúlni a szerkezetébe az adott oldanak. Beleírhatunk, kitörölhetünk átszervezhetünk.
A fenti képen például a termék oldalon található információk sorrendjét cserélem fel. Először is a füleket tüntetem el az unsettel, utána a remove_actionnal leszedem az értékelést (single rating), a kosárba rakás gombot (add_to_cart) stb. Viszont a termékleírást, ami eddig ezek alatt volt, ide szúrom be az add_action sorral. Ezek mind-mind gyári függvények, használatuk körültekintést igényel.
A másik módszer, ha általánosságban szeretnék belenyúlni, akkor azt a functions.php módosításával tehetem meg.
Functions.php szerkesztése
Ezt az állományt a sablonunk fő könyvtárában találjuk meg és nem csak a WooCommerce módosításakor lehet szerkeszteni.
Ebben a kicsi kódrészletben például a kosárba teszem szöveg helyett a termék megjelenítése felirat lesz látható. Természetesen nem csak a felirat a funkció is változik vele.
Ezek a bonyolult, de gyors megoldásai annak, hogy egyedi kinézetű és funkciójú WooCommerce webshopunk legyen. Ha szeretnél te is ilyet, de nincs kedved kódolni, vagy a bővítményekkel próbálkozni keress bátran.