Termékszínek vizuális megjelenítése WooCommerce webáruházban

A WooCommerce webáruházaknál létrehozott termékvariációk (pl.: szín, méret, súly) alapesetben vizuálisan nem a legjobban átláthatóak. Erre mutatok megoldást.

Hogyan kell termékvariációkat létrehozni?

Nagyon röviden:
A Termékek => Attribútumok alatt létre kell hozni egy attribútumot (pl.: szín), majd meg kell adni hozzá értékeket (pl.: sárga, kék, zöld, stb.). Ezután a terméket át kell állítani variálhatóra, majd hozzáadni az attribútumo(ka)t és az értékeket. Utána létre lehet hozni ezekből a variációkat, amelyből külön-külön árazható mindegyik, illetve lehet egyedi termékképük is.

Korábban 2 cikk/videó is született témában:

Hogyan néznek ki a termékvariációk?

Az alap verzió így néz ki:

Variálható termék WooCommerce webáruházban
Variálható termék WooCommerce webáruházban

Miért nem a legelőnyösebb ez a megjelenés?
Látható, hogy az opcióknak (szín, méret) nincs vizuális verziója. Csupán lenyíló menüből lehet kiválasztani az igényeknek megfelelő terméket.

Szebb megoldás a variációk bemutatására

Mennyivel szebb az a megoldás, ahol a variációk színekkel/ikonokkal láthatóak? Mutatok egy mintát erre, ahol az elérhető méretek és színek azonnal, minden további kattintás nélkül látszódnak:

Szebb termékvariációs megjelenés
Szebb termékvariációs megjelenés

Természetesen kattintásra az adott termékvariáció termékképe jelenik meg, illetve a kosárba is ugyanúgy kell tenni, mint a „hagyományos” megjelenítésnél.

Termékvariációk vizuális megjelenítése

Sok bővítményt lehet találni erre a célra. A fenti képeken a Variation Swatches for WooCommerce by CartFlows nevű bővítményt használtam. Telepítés és aktiválás után az alapbeállítások a WooCommerce => Variation Swatches menü alatt találhatóak.

A Termékek => Attribútumok alatt egy Attribútum NEVE ALATTI SZERKESZTÉS gombra kattintva előjön annak a beállítási lehetősége, hogy az adott attribútum pl. szín legyen.

Ha a meglévő (vagy új) attribútum szín típusúként van megjelölve, akkor utána az attribútum alá tartozó értékeknél beállítható a megjelenő szín. Példa:

Ezek után, ha valamelyik terméknél fel van véve a szín attríbútum, azon belül pedig az Almazöld, akkor a termék adatlapon meg fog jelenni a fenti képen látható – vizuális – módon a zöld szín, mint választható termékvariáció.

Variation Swatches for WooCommerce by CartFlows letöltés:

Mit gondolsz a fenti megoldásról? Ugye, hogy elegánsabb, mint a beépített, alapverzió?

Cikkértesítő

Ha nem szeretnél lemaradni az új cikkekről, akkor iratkozz fel az értesítőre!

Szólj hozzá!

WordPress segítséget keresel?

Kérj díjmentes árajánlatot!

Főbb szolgáltatásaim: weboldal/webáruház készítés, megújítás, fejlesztés, gyorsítás, karbantartás, hibajavítás, oktatás, stb.