Woocommerce – Multistep Checkout (How To)

Für den Rugby Onlineshop auf rugbygear.ch welchen ich momentan mit einem Kollegen am aufbauen bin, war ich schon seit einiger Zeit auf der Suche nach einem Plugin oder einer Anleitung wie man in Woocommerce auf einfache Art ein Multistep Checkout aktivieren oder einbauen kann.
Leider musste ich feststellen, dass dies momentan nicht im Woocommerce Core implementiert ist. Allerdings scheint das Bedürfnis nach einer Lösung dieses Problems vor allem im DACH-Raum relativ gross zu sein, da dies neuerdings auch in der Schweiz (und in Deutschland schon länger) gesetzlich verlangt wird (Mehr dazu auf startwerk.ch).

Nach einigem Suchaufwand stiess ich dabei auf eine interessante Diskussion im Issue Bereich von woocommerce auf github. Da bisher noch immer keine fertige Lösung existiert, habe ich mich daraufhin daran gemacht mir selbst eine „Quick & Dirty“ Lösung zu bauen.

Simples Multistep Checkout für Woocommerce

Vorwort

Als erstes möchte ich darauf hinweisen, dass ich keinerlei Garantie für Fehler in dieser Anleitung oder den darin präsentieren Code Snippets übernehme. Ausserdem ist dies wirklich eine sehr simple Implementation eines Multistep Checkouts und falls jemand eine bessere Lösung hat, würde ich mich mehr als nur ein bisschen freuen davon zu hören 🙂
Hier ein kurzer Überblick über die benötigten Schritte:

1. Woocommerce Template Files in Theme Ordner kopieren um diese Update-safe zu überschreiben
2. Template Files im Theme Ordner anpassen
3. CSS hinzufügen
4. Ergebnis überprüfen und gegebenfalls anpassen

Anleitung Step by Step

1. Erstelle einen neuen Ordner „woocommerce“ in deinem Theme Ordner (/wp-content/themes/*yourtheme*)
2. Kopiere folgende Dateien aus dem Woocommerce Template Ordner (/wp-content/plugins/woocommerce/templates/) in den soeben erstellten woocommerce Ordner:
  • cart/cart.php
  • checkout/form-checkout.php
  • checkout/thankyou.php

Euer woocommerce Ordner sollte nun die zwei Ordner cart und checkout, sowie die darin abgelegten Files enthalten.

3. Öffne die Dateien nacheinander in einem Editor und füge die entsprechenden Code-Snippets ein:
cart.php:


<!-- Order Process -->
<ul class="order-process">
<a href="cart->get_cart_url();?>">
<li class="active">1. Cart</li>
</a>
<a href="cart->get_checkout_url()?>">
<li>2. Checkout</li>
</a>
<li>'3. Acquisition</li>
</ul>

form-checkout.php:


<!-- Order Process -->
<ul class="order-process">
<a href="cart->get_cart_url();?>"><li>1. Cart</li></a>
<a href="cart->get_checkout_url()?>"><li class="active">2. Checkout</li></a>
<li>3. Acquisition</li>
</ul>

thankyou.php:


<!-- Order Process -->
<ul class="order-process">
<a href="cart->get_cart_url();?>"><li class="active">1. Cart</li></a>
<a href="cart->get_checkout_url()?>"><li>2. Checkout</li></a>
<li>'3. Acquisition</li>
</ul>

4. Füge folgendes CSS zu deinem Theme hinzu (Vorschlag: in style.css)


/* --------- Order Process ----------------- */

ul.order-process {
padding: 0;
list-style: none;
width: 100%;
background: none repeat scroll 0% 0% #363B3F;
}

ul.order-process li {
display: inline-block;
width: 30%;
padding: 10px 0;
color: #fff;
text-align: center;
}

ul.order-process li.active {
background: none repeat scroll 0% 0% #FF4646;
font-weight: bold;
}

Weiterführende Informationen

Leave a Reply