Ausblick auf WooCommerce 2.7: Zoom für Produktbilder

Noch ist es nicht bestätigt, aber die Hinweise verdichten sich: WooCommerce 2.7 erhält wahrscheinlich eine neu gestaltete Galerie für Produktbilder. Inklusive Mouseover-Zoom-Funktion und mobiloptimierter Lightbox.

Bereits Mitte August äußerte sich James Koster – Entwickler bei WooCommerce – in einem Blogbeitrag sehr selbstkritisch:

The product image galleries in WooCommerce basically haven’t changed since version 1. … The experience on smaller handheld devices is terrible.

Und da es sich mittlerweile kein Shop mehr leisten kann, „mobile“ Nutzer zu vergraulen, wird es tatsächlich Zeit für eine Lösung. Wie eine solche aussehen könnte, skizziert das Team von WooCommerce in einem aktuellen Beitrag auf dem dev-Blog.

Grundlage der Entwicklung war eine Umfrage, bei der WooCommerce-Nutzer und -Entwickler abstimmen konnten: „Wollt ihr für die neue Galerie eine Lightbox, oder eine Zoom/Magnification-Variante, oder beides?“. Am Ende entschied sich das Team für eine Umsetzung beider Varianten. Die Lightbox-Version soll auf Basis von Photoswipe entwickelt werden, der Zoom mit dem gleichnamigen Skript von Jack Moore (hier ist eine Demo verfügbar). Die Swipe-Funktion auf mobilen Endgeräten wird über den hauseigenen Flexslider realisiert.

Erste Demo verfügbar

Wie das Ganze auf dem Desktop aussehen könnte, veranschaulicht WooCommerce hier:

Animation © WooCommerce
Die Animation für den Desktop… (© WooCommerce)

Auch eine mobile Variante wird gezeigt, selbst wenn sich die User Experience (UX) dabei nur sehr bedingt abbilden lässt:

... und die mobile Variante (© WooCommerce)
… und die mobile Variante (© WooCommerce)

In dem Blogbeitrag gibt das Team von WooCommerce zudem einige Hinweise für Theme-Entwickler. Diese können die neue Galerie bereits mit einer ersten Version auf GitHub ausprobieren. Außerdem kommen auf Entwickler Änderungen in den Templates product-image.php und product-thumbnails.php sowie neue Skripte/CSS zu. Wer Themes für WooCommerce anbietet, sollte sich damit rechtzeitig auseinandersetzen.

Alternative: Image Zoom Plugin

Wenn du nicht bis zum Erscheinen von WooCommerce 2.x warten möchtest, um den eigenen Shop mit zoombaren Produktbildern auszustatten, solltest du dir das kostenlose Plugin Woocommerce Image Zoom anschauen.

Die Plugin-Variante mit "WooCommerce Image Zoom"
Die Plugin-Variante mit „WooCommerce Image Zoom“

Hier findest du einen ausführlichen Testbericht der Erweiterung.

Beitrag teilen

Author Avatar

Redakteur bei MarketPress. Blogger aus Leidenschaft, Corporate Blog & Content Marketing Trainer, Buchautor (u.a. "Blog Boosting"). Mit-Organisator des WP Camp Berlin.

Auch interessant:

WooCommerce Plugins angetestet: Coupon Generator - Automatisiert Gutscheine erstellen

von Michael Firnkes

Du willst eine große Anzahl von Gutscheinen auf einmal erstellen, beispielsweise für eine Marketingaktion? Coupon Generator for WooCommerce - ein kostenf ...

Weiterlesen

Anleitung: Zahlungsfrist und Fälligkeitsdatum "zahlbar bis" mit WooCommerce umsetzen

von Michael Firnkes

WooCommerce gibt im Standard kein Fälligkeitsdatum oder ein Zahlungsziel im Shop, den Rechnungen etc. aus. Wir zeigen dir, wie du dies in German Market mi ...

Weiterlesen

WooCommerce Plugins angetestet: Custom Related Products - Ähnliche Produkte selbst auswählen

von Michael Firnkes

Wenn du passende Zusatzangebote auf einer Produktseite integrierst, erhöht dies deine Umsätze. Ein kleines kostenloses WooCommerce-Plugin hilft dir dabei ...

Weiterlesen

WooCommerce Wochenrückblick #29: Beliebteste Zahlungsarten und sinnvolle Produktauswahl

von Michael Firnkes

Kauf auf Rechnung ist beliebter, als gedacht. Und zu viele Produkte können deine Kunden auch verwirren - wenn sie schlecht präsentiert werden. Dies und m ...

Weiterlesen

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Abonniere unseren Newsletter

Trage hier deine E-Mail Adresse ein, damit du unseren Newsletter abonnieren kannst.