WooCommerce: Produktbilder an der Kasse anzeigen

In der Bestellübersicht an der Kasse in Ihrem WooCommerce Onlineshop werden keine Produktbilder angezeigt und Sie möchten das ändern? In diesem Artikel zeigen wir, wie sich das mit nur wenigen Handgriffen bewerkstelligen lässt. Grundlegende Programmierkenntnisse sind dabei allerdings vorausgesetzt.

Der Wunsch, die Produktbilder an der Kasse eines WooCommerce Onlineshops anzeigen zu lassen, kann verschiedene Gründe haben. Einer dürfte mit Sicherheit die Optimierung von WooCommerce für den Händlerbund sein. Je nachdem, welche Produkte in einem Shop vertrieben werden, bietet sich die Darstellung der Artikelbilder aber auch als stilistisches Werkzeug an, um dem Kunden einen besseren Überblick über die zu bestellende Waren zu geben. Je nach verwendetem Theme werden die Artikelbilder zwar noch im Warenkorb angezeigt, im Checkout-Prozess hingegen ist das Layout oftmals reduzierter und kommt ohne jegliche Fotos aus.

Produktfotos im Checkout anzeigen

Wer im Bereich der Programmierung oder im Umgang mit WooCommerce noch nicht allzu vertraut ist, sollte zunächst eine Datensicherung des WooCommerce Shops erstellen, bevor die folgenden Schritte befolgt werden. Dann steht der Bilderintegration auch schon nichts mehr im Wege.

1. Zunächst müssen Sie sich per (s)FTP mit dem Server verbinden.
2. Dort navigieren Sie in das Verzeichnis /wp-content/plugins/woocommerce/templates/checkout/ und laden die Datei review-order.php herunter.
3. Diese Datei wird jetzt um den entscheidenen Code-Schnipsel ergänzt, der dann die Artikelbilder darstellt.
   
   Am Besten ergänzt man den Code-Snippet vor dem Produkt-Titel. An welcher Stelle im Code die Produkt-Titel ausgegeben werden, verrät unser zweiter Code-Auszug.
4. Code integriert? Dann müssen Sie die Datei speichern und wieder auf den Webserver legen. Allerdings nicht mehr in das Verzeichnis, aus der Sie die Datei heruntergeladen haben. Bei einem Update von WooCommerce würde diese Modifikation sonst überschrieben werden. Um das zu vermeiden, nagivieren Sie auf dem Server in das Verzeichnis des gegenwärtig verwendeten Themes. Dieses findet sich unter /wp-content/themes/das-verwendete-theme/.
5. Erstellen Sie im Theme-Verzeichnis ein Unterverzeichnis namens /woocommerce/ und in wiederum diesem Verzeichnis eines namens /checkout/. Dort muss jetzt nur noch die bearbeitete review-order.php-Datei hochgeladen werden. Und schon ist die Modifikation sicher vor den kommenden Updates. Bei WooCommerce lassen diese bekanntlich nicht lange auf sich warten.
6. Fertig!