So passen Sie die WooCommerce-Warenkorbseite auf einer WordPress-Website an

Eine Standard-E-Commerce-Website hat einige gängige Seiten. Es gibt Produktseiten, Shop-Seiten, die Produkte auflisten, und vergessen wir nicht die Seiten für das Benutzerkonto, den Checkout-Ablauf und den Warenkorb.

WooCommerce macht die Einrichtung auf einer WordPress-Website zu einer trivialen Aufgabe, da es Vorlagen dafür bereitstellt und die Seiten sofort erstellt. Das macht es einfach, Ihren Shop in wenigen Minuten zum Laufen zu bringen, indem Sie nur einige Produkte und Ihre Zahlungsabwicklungsdetails einrichten. WooCommerce ist in dieser Hinsicht sehr hilfreich.

Dies ist jedoch kein Beitrag, der die Vorzüge von WooCommerce preist. Stattdessen schauen wir uns an, wie wir Teile davon anpassen können. Insbesondere möchte ich mir den Warenkorb ansehen. WooCommerce ist äußerst erweiterbar, da es eine Fülle von Filtern und Aktionen bietet, in die man eingreifen kann, sowie eine Möglichkeit, die Vorlagen in einem WordPress-Theme zu überschreiben. Das Problem ist, dass dies mindestens einige fortgeschrittene Entwicklerkenntnisse erfordert, was für manche Leute nicht machbar ist. Und zumindest meiner Erfahrung nach ist die Warenkorbseite oft am schwierigsten zu verstehen und anzupassen.

Werfen wir einen Blick darauf, wie Sie die WooCommerce-Warenkorbseite ändern können, indem Sie ein anderes Layout implementieren. So sieht eine standardmäßige Warenkorbseite aus

Stattdessen entscheiden wir uns für etwas wie dieses

Hier sind die Unterschiede

• Wir übernehmen ein Zwei-Spalten-Layout anstelle des einzelnen Vollbild-Layouts der Standardvorlage. Dies ermöglicht es uns, das Element „Warenkorb-Summen“ nach oben zu bringen, damit es auf größeren Bildschirmen besser sichtbar ist.
• Wir fügen den Kunden durch die Anzeige von Vorteilen unter der Produktliste im Warenkorb Beruhigung hinzu. Dies erinnert den Kunden an den Wert, den er mit seinem Kauf erhält, wie z. B. kostenloser Versand, einfache Umtauschmöglichkeiten, Kundensupport und Sicherheit.
• Wir nehmen eine Liste häufig gestellter Fragen unter der Produktliste in einem Akkordeon-Format auf. Dies hilft dem Kunden, Antworten auf Fragen zu seinem Kauf zu erhalten, ohne den Support verlassen und kontaktieren zu müssen.

Dieses Tutorial setzt voraus, dass Sie Zugriff auf Ihre Theme-Dateien haben. Wenn Sie sich nicht wohl dabei fühlen, sich auf Ihrem Hosting-Server anzumelden und zum Dateimanager zu gehen, empfehle ich die Installation des Plugins WP File Manager. Alle hier beschriebenen Schritte können Sie auch mit der kostenlosen Version durchführen.

Zuerst erstellen wir unsere eigene Vorlage

Einer der vielen Vorteile von WooCommerce ist, dass es uns vorgefertigte und programmierte Vorlagen zur Verfügung stellt. Das Problem ist, dass sich diese Vorlagendateien im Plugin-Ordner befinden. Und wenn das Plugin in Zukunft aktualisiert wird (was es mit ziemlicher Sicherheit tun wird), gehen alle von uns vorgenommenen Änderungen an der Vorlage verloren. Da die direkte Bearbeitung von Plugin-Dateien in WordPress ein großes No-No ist, erlaubt WooCommerce uns, die Dateien zu ändern, indem wir Kopien davon in den Theme-Ordner legen. Das funktioniert, solange wir dies in unserer functions.php oder einem Funktionalitäts-Plugin irgendwo tun

add_theme_support('woocommerce');

Es ist ratsam, ein Child-Theme zu verwenden, wenn Sie solche Änderungen vornehmen, insbesondere wenn Sie ein Drittanbieter-Theme verwenden. Auf diese Weise gehen Änderungen am Theme-Ordner nicht verloren, wenn Theme-Updates veröffentlicht werden.

Dazu müssen wir zunächst die Vorlage finden, die wir anpassen möchten. Das bedeutet, dass Sie in das Stammverzeichnis der Website wechseln (oder dorthin, wo Sie Ihre Website-Dateien speichern, wenn Sie lokal arbeiten, was eine großartige Idee ist) und den Ordner /wp-content öffnen, wo WordPress installiert ist. Dort gibt es mehrere Ordner, darunter /plugins. Öffnen Sie diesen und wechseln Sie dann zum Ordner /woocommerce. Das ist das Hauptverzeichnis für alles, was mit WooCommerce zu tun hat. Wir brauchen die Datei cart.php, die sich unter befindet

/wp-content/plugins/woocommerce/templates/cart/cart.php

Öffnen wir diese Datei in einem Code-Editor. Eines der ersten Dinge, die Ihnen auffallen werden, sind eine Reihe von Kommentaren oben in der Datei

/**
 * Cart Page
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/cart/cart.php. // highlight
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.8.0
 */

Die hervorgehobene Zeile ist genau das, wonach wir suchen – Anweisungen, wie die Datei überschrieben werden kann! Wie freundlich vom WooCommerce-Team, das gleich am Anfang zu notieren.

Machen wir eine Kopie dieser Datei und erstellen den Dateipfad, den sie im Theme vorschlagen

/wp-content/themes/[your-theme]/woocommerce/cart/cart.php

Legen Sie die kopierte Datei dort ab, und wir können mit der Bearbeitung beginnen.

Als Nächstes fügen wir unser eigenes Markup hinzu

Die ersten beiden Dinge, die wir angehen können, sind die Vorteile und häufig gestellten Fragen, die wir zuvor identifiziert haben. Wir wollen diese zur Vorlage hinzufügen.

Wo kommt unser Markup hin? Nun, um das Layout so aussehen zu lassen, wie wir es zu Beginn dieses Beitrags entworfen haben, können wir unterhalb der schließenden Tabellenmarkierung </table> des Warenkorbs beginnen, so:

</table>
<!-- Custom code here -->
<?php do_action( 'woocommerce_after_cart_table' ); ?>

Wir werden uns nicht mit dem spezifischen HTML befassen, das diese Elemente erzeugt. Wichtig ist zu wissen, *wo* dieses Markup hingehört.

Sobald wir das getan haben, sollten wir etwas Ähnliches erhalten

Nun haben wir alle gewünschten Elemente auf der Seite. Alles, was noch zu tun ist, ist das Styling, um das Zwei-Spalten-Layout zu erhalten.

Gut, jetzt können wir das CSS überschreiben

Wir hätten mehr Markup zur Vorlage hinzufügen können, um zwei separate Spalten zu erstellen. Aber das vorhandene Markup ist bereits schön strukturiert, sodass wir mit CSS erreichen können, was wir wollen… dank Flexbox!

Der erste Schritt besteht darin, das .woocommerce  Element zu einem Flex-Container zu machen. Es ist das Element, das alle unsere anderen Elemente enthält, daher ist es ein guter Elternteil. Um sicherzustellen, dass wir es nur auf der Warenkorbseite ändern und nicht auf anderen Seiten (da andere Vorlagen diese Klasse tatsächlich verwenden), sollten wir die Stile auf die Klassen der Warenkorbseite beschränken, die WooCommerce ebenfalls leicht verfügbar macht.

.woocommerce-cart .woocommerce {
  display: flex;
}

Diese Stile können direkt in die style.css-Datei Ihres Themes eingefügt werden. Das empfiehlt WooCommerce. Denken Sie jedoch daran, dass es viele Möglichkeiten gibt, Stile in WordPress anzupassen, einige sicherer und wartungsfreundlicher als andere.

Wir haben zwei Kindelemente im .woocommerce-Element, die perfekt für unser Zwei-Spalten-Layout sind: .woocommerce-cart-form und .cart-collaterals. Dies ist das CSS, das wir benötigen, um die Dinge zu trennen, und es sieht ungefähr so aus:

/* The table containing the list of products and our custom elements */
.woocommerce-cart .woocommerce-cart-form {
  flex: 1 0 70%; /* 100% at small screens; 70% on larger screens */
  margin-right: 30px;
}
/* The element that contains the cart totals */
.woocommerce-cart .cart-collaterals {
  flex: 1 0 30%; /* 100% at small screens; 30% on larger screens */
  margin-left: 30px;
}
/* Some minor tweak to make sure the cart totals fill the space */
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  padding: 0 20px 70px;
}

Das ergibt ein ziemlich sauberes Layout

Es sieht eher aus wie die Warenkorbseite von Amazon und anderen beliebten E-Commerce-Shops, was überhaupt nichts Schlechtes ist.

Best Practice: Wichtigste Elemente hervorheben

Eines der Probleme, die ich mit den Standarddesigns von WooCommerce habe, ist, dass alle Schaltflächen gleich gestaltet sind. Sie haben alle die gleiche Größe und die gleiche Hintergrundfarbe.

Es gibt keine visuelle Hierarchie bei den Aktionen, die Benutzer ausführen sollten, und es ist daher schwierig zu unterscheiden, wie z. B. der Warenkorb aktualisiert wird, vom Fortfahren zur Kasse. Als Nächstes sollten wir diesen Unterschied klarer herausarbeiten, indem wir die Hintergrundfarben der Schaltflächen ändern. Dafür schreiben wir das folgende CSS

/* The "Apply Coupon" button */
.button[name="apply_coupon"] {
  background-color: transparent;
  color: #13aff0;
}
/* Fill the "Apply Coupon" button background color and underline it on hover */
.button[name="apply_coupon"]:hover {
  background-color: transparent;
  text-decoration: underline;
}


/* The "Update Cart" button */
.button[name="update_cart"] {
  background-color: #e2e2e2;
  color: #13aff0;
}
/* Brighten up the button on hover */
.button[name="update_cart"]:hover {
  filter: brightness(115%);
}

Auf diese Weise schaffen wir die folgende Hierarchie: 

1. Die Schaltfläche „Zur Kasse gehen“ bleibt im Wesentlichen unverändert, mit der Standard-Hintergrundfarbe Blau, um sie hervorzuheben, da sie die wichtigste Aktion im Warenkorb ist.
2. Die Schaltfläche „Warenkorb aktualisieren“ erhält einen grauen Hintergrund, der sich in den weißen Hintergrund der Seite einfügt. Dies de-priorisiert sie.
3. Das „Gutschein anwenden“ ist weniger eine Schaltfläche als vielmehr ein Textlink, was es zur am wenigsten wichtigen Aktion von allen macht.

Das vollständige CSS, das Sie hinzufügen müssen, um dieses Design zu erstellen, finden Sie hier

@media(min-width: 1100px) {
  .woocommerce-cart .woocommerce {
    display: flex;
  }
  .woocommerce-cart .woocommerce-cart-form {
    flex: 1 0 70%;
    margin-right: 30px;
  }    
  .woocommerce-cart .cart-collaterals {
    flex: 1 0 30%;
    margin-left: 30px;
  }
}


.button[name="apply_coupon"] {
  background-color: transparent;
  color: #13aff0;
}


.button[name="apply_coupon"]:hover {
  text-decoration: underline;
  background-color: transparent;
  color: #13aff0;
}


.button[name="update_cart"] {
  background-color: #e2e2e2;
  color: #13aff0;
}


.button[name="update_cart"]:hover {
  background-color: #e2e2e2;
  color: #13aff0;
  filter: brightness(115%);
}

Das ist ein Abschluss!

Nicht schlecht, oder? Es ist schön, dass WooCommerce sich so erweiterbar macht, aber ohne allgemeine Anleitung ist es vielleicht schwierig zu wissen, wie viel Spielraum Sie zum Anpassen haben. In diesem Fall haben wir gesehen, wie wir die Warenkorbvorlage des Plugins in einem Theme-Verzeichnis überschreiben können, um sie zukunftssicher gegen zukünftige Updates zu machen, und wie wir Stile in unserem eigenen Stylesheet überschreiben können. Wir hätten auch WooCommerce-Hooks, die WooCommerce-Hooks, die WooCommerce-API oder sogar WooCommerce-Bedingungen verwenden können, um Anpassungen zu optimieren, aber vielleicht sind diese für einen anderen Beitrag zu einer anderen Zeit gut.

In der Zwischenzeit viel Spaß beim Anpassen des E-Commerce-Erlebnisses auf Ihrer WordPress-Website und nehmen Sie sich gerne etwas Zeit für die WooCommerce-Dokumentation – dort gibt es viele Goodies, einschließlich vorgefertigter Snippets für alle möglichen Dinge.