Elementor WooCommerce Produktvergleichs-Skript (AJAX + LocalStorage)
Egal was Sie verkaufen: Wenn Kunden zwischen mehreren Optionen schwanken, brechen sie den Kauf oft ab. Mit diesem universellen WooCommerce Produktvergleich-Tool nehmen Sie Ihre Kunden an die Hand. Diese können beliebige Produkte Ihres Shops per Knopfdruck gegenüberstellen. Vollständig fertig gecodet, extrem performant dank AJAX und ohne Programmierkenntnisse via Shortcode in Elementor oder jedes andere Theme integrierbar.
Die Conversion-Features im Überblick:
- ✓
Interaktive 2-Klick-Logik: Klick 1 fügt das Produkt der Liste hinzu und der Button verwandelt sich dynamisch in einen grünen Weiterleitungs-Link. Klick 2 bringt den Kunden direkt zur fertigen Vergleichstabelle. - ✓
„Nur Unterschiede anzeigen“-Button: Ein absoluter Conversion-Booster! Kunden können identische Eigenschaften per Mausklick ausblenden, um sofort zu sehen, welches Produkt besser zu ihnen passt. - ✓
Null Serverlast (LocalStorage): Die ausgewählten Produkte werden direkt im Browser des Kunden zwischengespeichert. Die Tabelle wird pfeilschnell via AJAX geladen – keine Verlangsamung Ihrer Website! - ✓
Perfekt optimiert für Mobile: Auf Smartphones bleibt die linke Spalte mit den Eigenschaften fixiert („sticky“), während Kunden die Produkte bequem von rechts nach links durchwischen können.
Unbegrenzte Einsatzmöglichkeiten für Ihren Shop:
Dieses Skript ist ein Chamäleon. Sie müssen im Code lediglich die Attribut-Namen austauschen und es funktioniert für jede Branche perfekt:
Vergleichen Sie Akkulaufzeit, Prozessor, Speicherplatz, Displaygröße und Anschlüsse.
Vergleichen Sie Material, Passform (Slim/Regular), Pflegehinweise, Herkunftsland und Schnitte.
Vergleichen Sie Leistung (Watt), Antriebsart (Akku/Kabel), Gewicht und Lieferumfang.
Vergleichen Sie Inhaltsstoffe, Hauttyp-Eignung, Füllmenge, Vegan-Zertifizierungen und Haltbarkeit.
Vergleichen Sie exakte Abmessungen, Holzart, Bezugsstoff, Gewicht und Aufbauzeit.
Vergleichen Sie Lizenztyp (Single/Multi), Dateiformat, Updatesicherheit und Support-Level.
Lieferumfang des Downloads:
- PHP Code-Struktur: Vollständiger AJAX-Handler zur dynamischen Tabellenausgabe basierend auf Ihren WooCommerce-Attributen.
- 2 flexible Shortcodes: Universell nutzbar für den „Vergleichen“-Button undfür die Ausgabe der Tabelle auf einer beliebigen Seite.
- CSS-Styles: Bereit für alle Endgeräte inklusive responsivem Touch-Wisch-Effekt für mobile User.
- JS Frontend-Skript: Performante jQuery-Logik zur Verwaltung der gewählten Produkte im LocalStorage (limitiert auf max. 6 Produkte).
Technische Daten & Integration
| Kompatibilität: | WooCommerce 8.x / 9.x+ & WordPress 6.x (vollständig getestet) |
| Pagebuilder: | Kompatibel mit Elementor, Gutenberg |
| Technischer Kern: | PHP (saubere WordPress-Hooks), jQuery, CSS3, HTML5 |
| Anpassbarkeit: | Die ausgelesenen Attribute lassen sich im PHP-Array in wenigen Sekunden abändern. |
Häufig gestellte Fragen (FAQ)
Wie passe ich das Skript an meine eigenen Produkte und Attribute an?
Ganz einfach: Im PHP-Teil finden Sie den Bereich $attributes_to_check. Ersetzen Sie dort einfach die Standard-Einträge durch die Slugs Ihrer eigenen WooCommerce-Eigenschaften (z.B. ‚pa_farbe‘, ‚pa_groesse‘). Das Skript zieht sich die Daten dann vollautomatisch.
Wo genau füge ich den Code in WordPress ein?
Sie können den Code entweder direkt ans Ende der functions.php Ihres Child-Themes anhängen oder ein kostenloses Plugin wie „Code Snippets“ bzw. „WPCode“ verwenden, um das Skript sauber und updatesicher zu verwalten.
Verlangsamt das Skript meinen Onlineshop?
Nein. Da die Liste der ausgewählten Produkte im LocalStorage des Browsers der Kunden gespeichert wird, entstehen beim Surfen im Shop keinerlei zusätzliche Datenbank-Abfragen. Erst wenn die eigentliche Vergleichsseite aufgerufen wird, lädt die Tabelle via asynchronem AJAX.
Rezensionen
Es gibt noch keine Rezensionen.