Ferien-Karlsruhe.de: ein umfangreiches Reisebuchungsportal mit WooCommerce

Karlsruher Ferienportal ferien-karlsruhe.de

Das Ferienportal ferien-karslruhe.de bietet hauptsächlich Freizeiten in und um Karlsruhe sowie Sprach-, Spaß- und Entdeckungsreisen ins europäische Ausland. Das Angebot richtet sich an Kinder im Alter von 6 bis 16 Jahren und hat einen großen Fokus auf Inklusion - die Teamer sind geschulte Betreuer, die entsprechend individuell auf Bedürfnisse der Kinder eingehen können. Außerdem können Familien mit geringem Einkommen mit der Unterstützung durch verschiedene Förderprogramme rechnen, sodass die Kinder nicht auf wohltuenden Urlaub verzichten müssen.

Vom einfachen Reservierungssystem zum vollwertigen Buchungssystem

Schnell wurde erkannt, dass WooCommerce den benötigten Workflow nicht abbilden kann: denn anders als bei handfesten Produkten, die im Internet verkauft werden, und bei denen jede Bestellung sofort bezahlt wird und die verfügbare Menge im Lager heruntergezählt wird, werden bei ferien-karlsruhe.de Reservierungen kostenlos entgegengenommen und in einem zweiten Schritt eine Anzahlung zur verbindlichen Bestätigung der Reservierung gefordert. Erst kurz vor Antritt der Reise wird der Restbetrag beglichen und eine Teilnehmerkarte gedruckt.

Features, Features, Features

Eine Menge Features wurde speziell für das Ferienportal entwickelt. Hier solche aus der Kundensicht:

  • Warenkorb Zeitlimitierung: damit Überbuchungen vermieden werden, wird die Verfügbarkeit eines Angebots beim Klick in den Warenkorb heruntergezählt. Jedoch muss der Warenkorb innerhalb einer bestimmten Zeit eingelöst werden, sonst wird das Angebot zurückgesetzt.
  • Warteliste: wenn ein Angebot ausgebucht ist, kann ein Interessent sein Kind in die Warteliste eintragen. So kann das Kind eventuell dennoch teilnehmen, wenn eine andere Reservierung storniert wird.
  • Erweiterte Angaben im Checkout: anders als in den meisten Onlineshops gibt es einen Besteller und das Kind, für das das Angebot reserviert wird. Es können mehrere Angebote und mehrere Kinder in beliebiger Kombination reserviert werden. Zu jedem Kind werden Informationen wie Name, Geburtsdatum und etwaige Besonderheiten (z. B. ADS/ADHS, Behinderung, ...) angegeben.

Aus der Betreibersicht:

  • Angebotsstatus: ein neu erstelltes Angebot durchläuft verschiedene Stati: Entwurf, Freigegeben, Buchbar, Ausgebucht, Abgeschlossen um die wichtigsten zu nennen.
  • Kunden- und Reservierungsstatus: Besteller werden zu Bezugspersonen (es müssen nicht immer die Eltern sein), Kinder werden zu Teilnehmer, und Reservierungen zu Buchungen.
  • Zuschüsse: es lassen sich verschiedene Zuschüsse zu Angeboten eintragen.
  • Druckfunktion für Teilnehmerkarten: ist die Reise bezahlt, kann zu gegebenen Zeitpunkt die Teilnehmerkarte gedruckt werden. Hierzu wird der Druckauftrag mit dem netzinternen IIS Server übermittelt an dem die Drucker angebunden sind. Die Software (.NET) wurde hierfür von SaaS Web programmiert.
  • Kundenkommunikation: anders als im Standard, können die Mailtemplates bei jedem manuellen Aufruf angepasst werden. Auch beinhalten sie individuell erstellte PDF-Anhänge. Die gesamte Kundenkommunikation wird darüber hinaus archiviert.
  • Buchungsexport für Buchhaltungssoftware: der STJA arbeitet mit einer kommerziellen Buchhaltungssoftware zu der alle Geld Ein- und Ausgänge übermittelt werden müssen.
  • Kassen: in der Geschäftsstelle befinden sich Geldkassen, deren Inhalt buchhalterisch festgehalten werden muss.

WordPress und WooCommerce kompatibel

Besonders wichtig war bei der Entwicklung (immerhin ca. 400 Stunden Arbeit), dass das Ergebnis die Update-Fähigkeit von WordPress nicht beeinträchigt, was auch gelungen ist. Die im neuen Modul erstellten Angebote generieren (und überschreibt bereits existierende) WooCommerce Produkte, die auch über das entsprechende Menü gelistet und durchforstet werden können.

Professionelle WordPress Entwicklung von SaaS Web

Sie suchen einen kompetenten und erfahrenen WordPress-Entwickler für ein eigenes Projekt? Kontaktieren Sie das SaaS Web Team.

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...