WordPress und WooCommerce – das perfekte Duo

WordPress ist bekannterweise die Nummer eins der CMS weltweit, das ist nun keine Neuheit mehr. Eigentlich nicht neu, aber weniger bekannt ist, dass WordPress mit WooCommerce auch die Nummer eins im Bereich Online Shops ist.

WooCommerce ist seit 2015 auch Teil von Automattic und damit ist auch sichergestellt, dass die Kompatibilität und die Entwicklung der Erweiterung dauerhaft sein wird.

Die Features von WooCommerce im Schnellüberblick

Nachdem WooCommerce installiert und aktiviert wird, werden neue Custom Post Types, Custom Taxonomy und Spezial-Seiten erstellt. Der Custom Post Type, Sie haben es erraten, ist das Abbild eines Produkts in WordPress, die Custom Taxonomy wird für die Produkkategorie und das Produktschlagwort verwendet. Die Spezial-Seiten sind die Shop-Seite (standardmäßig /shop) auf der alle Produkte angezeigt werden, die AGB-Site (/terms-conditions), der Kundenbereich (/my-account) damit Kunden ihre laufenden Bestellungen verfolgen können, der Einkaufswagen (/cart) und die Bestellseite (/checkout).

Hier die Funktionen, die mit WooCommerce bereitgestellt werden:

  • Produkte
    • Produkttypen: einfaches Produkt, variables Produkt, "nicht-materielle" Ware, Verlinkung zu anderem Produkt. Ein variables Produkt ist beispielsweise ein Produkt in mehreren Größen oder Farben. Die einzelnen Varianten können anhand von frei-definierbaren Attributen erstellt werden. Nicht-materielle Produkte sind z. B. PDF-Downloads, Codes zum Runterladen.
    • Produktdarstellung: zu jedem Produkt kann ein Name, eine kurze und eine ausführliche Beschreibung des Produkts eingetragen werden. Dazu noch ein großes Produktbild sowie zusätzliche Bilder (Galerie). Natürlich wird auch ein Preis angegeben.
  • Währung, Preise: sowohl die Währung kann eingestellt werden als auch ob die Preise mit oder ohne Mehrwertsteuer angezeigt werden. Es lassen sich auch unterschiedliche MwSt-Sätze angeben, abhängig vom Herkunftsland der Bestellung.
  • Lagerverwaltung: Eine einfache Lagerverwaltung kann aktiviert werden. Die Menge wird manuell eingegeben, der Stand wird anschließend automatisch anhand der Bestellungen angepasst. Die Lagermenge kann bei variablen Produkten für die jeweiligen Varianten angegeben werden. Auch lässt sich einstellen, ob ein Produkt bei Lagermenge 0 automatisch auf nicht verfügbar wechselt oder ob "Überbestellungen" erlaubt sein dürfen und wie viele.
  • Versand: es werden Versandzonen definiert. Eine Versandzone kann für ein oder mehrere Länder gelten und eine oder mehrere Versandarten werden dafür festgelegt wie Versandkostenpauschale oder kostenlose Lieferung.
  • Zahlungsoptionen: standardmäßig ist eine Paypal Integration aktivierbar, ansonsten stehen die Optionen zu Verfügung: Überweisung, Nachnahme und Scheck. Es lassen sich auch Gutscheine aktivieren und mit den Bestellungen verrechnen.
  • Kundenkonto: es besteht die Möglichkeit für Kunden die Konto-Funktion zu aktivieren und den Kunden somit einen Bereich anzubieten wo sie sich über laufende und vergangene Bestellungen informieren können.
  • E-Mails: für verschiedene Aktionen gibt es unterschiedliche E-Mail Templates (Bestellbestätigung, Storno, ..).
  • API: für Entwickler ganz wichtig! Die WooCommerce-API ermöglicht den Zugriff und die Verarbeitung aller Funktionen über REST.

Natürlich sind das nun nicht alle Features, es sind die wichtigsten (die mir einfallen während ich diesen Artikel schreibe).

WooCommerce und WPML

Mit WPML können Sie Ihren WooCommerce-Shop für mehrere Sprachen anpassen. Sie können Produkte analog zu normalen Seiten oder Beiträgen, Produkte und die dazugehörigen Attribute und Taxonomien übersetzen. Dazu wird idealerweise das Plugin WooCommerce Multilingual installiert und aktiviert.

Unterschiedliche Lagermengen pro Sprache

Hat man allerdings pro Sprache unterschiedliche Lagermengen hat man zunächst ein Problem.

Die Menge lässt sich nur zentral steuern über das Produkt in der Standardsprache. Das bedeutet, dass das übersetzte Produkt die gleiche Menge hat wie das aus der Standardsprache.

Eine Option besteht darin, das Produkt als variables Produkt anzulegen und Sprachvarianten zu erstellen (bei variablen Produkten kann die Lagermenge pro Variante festgelegt werden). Ganz so einfach ist es dann auch nicht: von WooCommerce mitgelieferte Widgets wie zum Beispiel die bestbewerteten Produkte können mit den Varianten nicht umgehen; sie nutzen die Lagermenge der als Standard definierten Variante, um den Add to cart Link anzuzeigen oder nur zum Produkt zu verlinken.

Außerdem möchte man wahrscheinlich (wir wollten es) dass die Sprachvariante der aktuellen Sprache vorausgewählt ist. Das lässt auch nicht über die Option Standard Attribut setzen, da diese Option dann für alle Sprachen gilt.

Das Ergebnis können Sie hier auf der Shop-Seite sehen: www.textilbox.de, www.textilbox.es und www.textilbox.fr.

Die unten angezeigten Filter sind alle einer init-Action zugeordnet und sind in der functions.php zu definieren:

add_action('init', function() {

 add_filter('function-name', function($args){
  .. Code ...
 },1,1);

}

Damit es wie in dem Code unten angegeben funktioniert, müssen Sie die Sprachvarianten mit den selben ISO Codes benennen wie es WPML macht. Wir haben 3 Sprachvarianten: Deutsch, Französisch und Spanisch und haben sie jeweils de, fr und es genannt.

Außerdem haben wir die Eigenschaft Language erstellt, die genutzt wird um die Varianten zu erstellen.

Setzen der Add to cart URL auf der Shop-Seite

add_filter('woocommerce_product_add_to_cart_url', function($url, $product){
  if (is_a($product, 'WC_Product_Variable')) {
    $variations = $product->get_available_variations();
    $default_var = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE;
    if ($default_var) {
      foreach ($variations as $variation) {
        if (
          count($variation['attributes']) == 1 && 
          isset($variation['attributes']['attribute_pa_language']) && 
          $variation['attributes']['attribute_pa_language'] == $default_var && 
          $variation['variation_is_active'] &&
          $variation['variation_is_visible'] &&
          $variation['is_purchasable'] ) {
          $url = remove_query_arg( 'added-to-cart', add_query_arg( array( 'variation_id' => $variation['variation_id'], 'add-to-cart' => $product->get_id() ), $product->get_permalink() ) );
          return $url;
        }
      }
    }
  }
  return $url;
}, 99, 2);

Dieser Wert $default_var = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE; wird gesetzt, damit beim Klick auf Add to cart die Sprachvariante der aktuellen Sprache ausgewählt wird. Sollte ein Käufer eine andere Sprachvariante wünschen, muss er zuerst das Produkt anwählen und dort die gewünschte Variante auswählen.

Alternativ zur Konstante ICL_LANGUAGE_CODE, lässt sich auch diese Funktion nutzen:
global $sitepress;
$my_current_lang = $sitepress->get_current_language();

Setzen des Add to cart Textes auf der Shop-Seite

add_filter('woocommerce_product_add_to_cart_text', function($text, $product){
  if (is_a($product, 'WC_Product_Variable')) {
    $text = $product->is_purchasable() && $product->is_in_stock() ? __( 'Add to cart', 'woocommerce' ) : __( 'Read more', 'woocommerce' );
  }
  return $text;
}, 99, 2);

Setzen der Standard-Sprachvariante in der aktuellen Sprache auf der Produktseite

add_filter( 'woocommerce_dropdown_variation_attribute_options_args', function($args){
  $attribute = $args['attribute'];
  if (empty($args['selected']) && $attribute == 'pa_language') {
    $args['selected'] = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE;
  }
  return $args;
}, 10, 1 );

Was passiert mit dem Warenkorb wenn der Kunde die Sprache wechselt?

Das ist eine interessante Frage. Es gibt verschiedene Möglichkeiten:

  • Wenn Sie die Sprachen so eingerichtet haben, dass Ihre Website diese so unterteilt website.tld/de, website.tld/fr, dann ist es am einfachsten. Der Warenkorb wird einfach übersetzt (das Produkt bleibt gleich).
  • Wenn Sie pro Sprache eine eigene Domain (website.de, website.fr) eingerichtet haben, dann wird es etwas komplizierter. Denn Session und Cookies immer an einer Domain gebunden sind; wechselt die Domain wird eine neue Session und ein neuer Cookie gesetzt. Daher muss in WPML eingestellt werden, dass die notwendigen Informationen entweder per GET oder POST übertragen werden (die Daten werden verschlüsselt).

Hier gibt es erweiterte Dokumentation zu dem Thema: https://wpml.org/documentation/getting-started-guide/language-setup/passing-session-data-between-languages-in-domains/

WooCommerce Germanized

In Deutschland wird man schnell abgemahnt, wenn man die Regeln nicht befolgt - das ist bekannt. Jedoch sollte man nicht nur aus Angst vor Strafe sich an bestimmte Regeln halten, manche sind durchaus sinnvoll, beispielsweise die Angabe eines Preises pro Einheitsmenge. So lässt sich bei Produkten, die in verschiedenen Größen angeboten werden schnell erkennen ob und wie sich ein möglicher Rabatt verhält.

Die Features von WooCommerce Germanized im Überblick

Das Plugin wird als Freemium-Erweiterung angeboten: es gibt eine kostenlose Variante, die einiges kann und eine kostenpflichtige Pro Version, die mehr Features anbietet. Wir interessieren uns in diesem Artikel lediglich um die kostenlose Version.

Die Features:

  • Matching von rechtlich relevanten Seiten wie Impressum, Datenschutz oder Widerrufsrecht
  • Widerrufsformular als Shortcode mit Bestätigung per E-Mail
  • Aktivierung der Anzeige eines Grundpreises, insbesondere wichtig für variable Produkte
  • Anzeige zu MwSt und Versandkosten zum Preis auf der Übersichtsseite und der Produkteinzelseite
  • Aktivierung der Kleinunternehmerregelung
  • Lieferzeitenangabe
  • Aktivierung einer Checkbox im Bestellprozess für Kunden um der Erstellung eines Kundenlogins zuzustimmen
  • Double Opt-in Verfahren für die Erstellung des Kundenlogins

Auch hier werden nicht alle Features aufgezählt, es sind zu viele 😉

Einen Shop mit WooCommerce Germanized können Sie hier besuchen: www.oelmanufaktur-bender.de.

Tausende Erweiterungen und immer professioneller

Mit der WordPress + WooCommerce Kombination profitieren Sie von einer Auswahl aus tausenden Erweiterungen. Außerdem lassen sich zahlreiche Anpassungen machen, ohne den Code des CMS oder von WooCommerce direkt anzufassen, sodass die Upgrade-Fähigkeit des Systems gewährleistet wird. In den oben genannten Beispielen werden die Anpassungen über Hooks, Actions und Filter gemacht, WooCommerce an sich wurde nicht verändert.

Professionelle Anbieter, die sich bislang auf die traditionellen Shoplösungen konzentrierten wie Magento, OXID oder Prestashop, erweitern zunehmend ihre Lösungen für WooCommerce.

Ein weiterer Aspekt, den niemand außer Acht lassen sollte, sind die Entwicklungskosten. Je verbreiteter ein System ist, um so günstiger sind die Entwicklungskosten, da es viele Dienstleister gibt und sich gegenseitig Konkurrenz machen - das drückt die Preise. Allerdings hat Qualität bekanntlich nach wie vor seinen Preis...

WordPress: Multilinguale Websites mit WPML einfach gemacht

Nicht selten werden Websites in verschiedenen Sprachen angeboten. Das was simpel und selbstverständlich erscheint, ist tatsächlich komplizierter, vor allem, wenn man nicht die richtigen Werkzeuge nutzt.

Was gilt es denn in Bezug auf Mehrsprachigkeit zu beachten?

  • Möchte ich eine 1:1 Übersetzung haben, sprich jede einzelne Seite wird auch in einer anderen Sprache übersetzt?
  • Sollen die anderen Sprachen für äquivalente Inhalte eigene URLs haben? Sollen eventuell unterschiedliche Sprachen sogar eigene Domains nutzen?<(li>
  • Benötige ich einen Sprachumschalter? Leitet dieser auch direkt zu der entsprechenden andersprachigen Seite oder immer zur Startseite der ausgewählten Sprache? Gibt es eine automatische Sprachauswahl anhand der eingestellten Sprache im Browser des Besuchers?
  • Gibt es ein Suchfeld? Sollen nur Suchergebnisse der aktuellen Sprache ausgegeben werden?
  • Wird der Quelltext entsprechend der Sprache auch für Suchmaschinen markiert?
  • Sollen unterschiedliche Teams die verschiedenen Sprachen bearbeiten?

WordPress und Multilang

Zunächst sollte man wissen, dass WordPress nativ keine Mehrsprachigkeit beherrscht - zumindest nicht direkt.
Über den Umweg des Multisite Modes (Network), lassen sich mehr oder minder unabhängige Sub-Sites erstellen, die dazu genutzt werden können um Sprachvarianten abzubilden. Dazu aber später mehr.
WordPress wird erst durch Plugins zu einem Multilang-CMS: da gibt es um einige (bekannte) zu nennen: WPML (kostenpflichtig), Polylang (freemium) oder MultilingualPress (kostenpflichtig).

Multilang mit Hand und Fuß

Rein theoretisch ließe sich eine Multilinguale Website auch ohne Plugins realisieren - mit etwas Programmieraufwand: die Sprachvarianten werden als Hauptseiten angelegt, z. B. de und fr, darunter werden die jeweiligen Seiten der Sprachvarianten angelegt und der Content in der jeweiligen Sprache geschrieben. Damit aber bei der Auswahl /de ein deutsches Menü erscheint und bei /fr ein französisches, müssen die für die unterschiedlichen Seitenbäume andere Templates genutzt werden (bzw. eine Weiche einbauen reicht). Die unterschiedlichen Templates ermöglichen Quelltext mit HTML-Sprachindikatoren (wo man sonst mit WordPress-Mitteln nicht hinkommt) zu versetzen bzw. sprachspezifische Menüs anzuzeigen. Um Widget-Bereiche braucht man sich nicht im Template gesondert zu kümmern, diese lassen sich im Backend z. B. mit Plugins wie z. B. Content Aware Sidebars lösen. Etwas komplizierter wird es mit dem Sprachumschalter, bzw. der logischen Konnektierung von gleichen Seiten als Sprachvarianten. Und noch komplizierter wenn man einen Shop betreiben möchte, z. B. mit WooCommerce.
Lassen wir es mal mit diesem Beispiel, es ist unschwer zu erkennen, dass es aufwändig ist und zudem einschlägige Kenntnisse in der WordPress Theme-Programmierung erforderlich sind. Es geht viel einfacher.

Multilang mit WordPress Multisite

Wie schon beschrieben, kann man auch mit nativen WordPress Bordmitteln eine mehrsprachige Website erstellen. Zunächst muss man WordPress in der Multisite Variante installieren. Das ist nicht schwierig, aber die wenigsten 1-Clic Installer dürften dies ermöglichen, also ist Handarbeit angesagt.
Einmal eingerichtet geht es schon mit den Eigenarten dieser Betriebsart los: es gibt einen Super-Admin. Der Super-Admin darf als einziger weitere Sub-Sites anlegen sowie Themes und Plugins installieren. Die "normalen Admins" sind jeweils für ihre zugewiesene Sub-Site zuständig, sie können aber nicht wie im normalen WordPress-Modus Themes oder Plugins installieren. Sie können lediglich welche aus der vom Super-Admin installierten Auswahl aktivieren oder deaktivieren. Wichtig zu wissen an dieser Stelle ist, dass nicht alle Plugins Mutlisite kompatibel sind.
Der Super-Admin erstellt z. B. 2 Sub-Sites, einmal "de", einmal "fr" und definiert 2 Teams die er den 2 Sub-Sites zuweist. Es können die gleichen User sein, die auf beiden Sub-Sites zugreifen können, oder getrennte. Genau diese mögliche Trennung ist ein Feature, das bestimmte Website-Betreiber nicht missen möchten: getrennte Teams für getrennte Sprachvarianten. Klar ist, dass ein solches Feature eher für größere Unternehmen interessant ist bzw. für solche mit streng geregelten Workflows.
Diese Trennung der Sub-Sites hat den Vorteil komplett eigene Websites erstellen zu können, aber birgt gleichzeitig die Gefahr, dass sich zwei Sub-Sites (Sprachvarianten) mit der Zeit auch optisch voneinander trennen - was wohl die wenigsten möchten.
Um gleiche Seiten der verschiedenen Sub-Sites logisch miteinander zu verbinden gibt es (mal wieder) Plugins, wie z. B. Multisite Language Switcher.

Multilang mit WPML

So, nun kommen wir zu dem eigentlichen Thema des Artikels: WPML (WPML = WordPress MultiLingual). Ich werde nicht alle Features des Plugins erklären, nur die Wesentlichen. Anders als bei dem Multisite Mode, kann man mit WPML auch im Nachhinein der Website Mehrsprachigkeit einhauchen, die Vorkehrungen müssen also nicht lange im Voraus geplant werden (strenggenommen kann man auch im Nachhinein eine normale Website in Multisite umwandeln bzw. in eine Sub-Site importieren, das ist aber recht kompliziert und fehleranfällig).
WPML besteht aus mehreren Komponenten, von denen man nicht zwingend alle benötigt. Die zentrale Einheit ist das WPML Multilingual CMS, in den meisten Fällen werden die Komponenten "WPML String Translation", "WPML Translation Management", "WPML Sticky Links" und "WPML CMS Nav" mit installiert.

WPML Grundeinstellungen

Einmal installiert definiert man die zusätzlichen Sprachen die angelegt werden sollen und kann verschiedene Punkte einstellen wie:

  • Festlegung der Standardsprache
  • Sollen Sprachvarianten als Unterverzeichnissse angezeigt werden ("/de", "/fr") oder als URL-GET-Parameter ("?lang=de", "?lang=fr")
    Sprachumschalter Optionen, z. B. Umgang mit Inhalten, die es nur in einer Sprache gibt, Umschalter als Dropdown-Feld bzw. mit Flaggen oder ausgeschriebene Sprache, ...
  • Einrichtung eienr automatischen Sprachweiterleitung anhand der eingestellten Browsersprache der Besucher

Seiten mit WPML für Übersetzung duplizieren

Ist man mit den Grundeinstellungen fertig, kann es mit dem Übersetzen losgehen: die einzelnen Seiten und Blogartikel lassen sich in der Übersichtsliste jeweils per Mausklick in die gewünschte Sprache duplizieren (mit oder ohne den Inhalt zu kopieren). Ein interessantes Feature dabei ist die Übersetzung alleine zu bearbeiten oder am Original zu binden. Im letzteren Fall wird man bei Ansicht der Übersetzung auf Änderungen im Original aufmerksam gemacht.

Sprachabhängige Menüs

Nicht nur die Seiten müssen übersetzt werden. Die Menüs sollen auch automatisch der ausgewählten Sprache zugeordnet werden. Das geht mit WPML ganz einfach. Entweder man nutzt die Synchronisationsfunktion (Menüpunkt "Menüs synchronisieren") oder man erstellt eine neue Navigation, selektiert die Sprache und definiert wessen Sprachalternative es ist.

Viele weitere Features

Ich gehe dabei nicht in die Tiefe, aber WPML hat Module für eine optimierte Lokalisierung von:

  • Gravity Forms (ein kostenpflichtiges Plugin zum Erstellen von Formularen)
  • Verschiedene Page Builder: Page Builder sind Plugins, die den visuellen Editor von WordPress ersetzen; sie ermöglichen die einfache Einrichtung von komplexen Layouts im Content Bereich. Zu den bekannten Page Buildern gehören u. a. das kostenlose SiteOrigin Page Builder oder das kostenpflichtige Visual Composer.
  • WooCommerce - die eShop Erweiterung für WordPress

Mit SaaS Web Managed WordPress WPML kostenfrei nutzen

Schon lange bieten wir kostenfrei die Nutzung von verschiedenen lizenzpflichtigen Plugins mit den WordPress Hosting Tarifen an. Neben WPML sind es auch Gravity Forms, SearchWP - eine verbesserte Suchfunktion - und die Pro Version des Newsletter Plugins.

Hier finden Sie die Managed WordPress Hosting Angebote.