Um WooCom­merce in unser Theme zu integrieren gibt es zwei Möglichkeiten.

Möglichkeit 1 - Standard Loop anpassen

Der einfa­chere Weg WooCom­merce in das Template zu integrieren. Dazu kopieren wir zunächst die page.php und löschen den WordPress Loop. An die Stelle des Loops fügen wir:

<?php woocommerce_content(); ?>

ein. Diese Datei speichen wir anschließend unter woocommerce.php ab. WooCom­merce erkennt das Template und stellt nun alle Shop Seiten in diesem Template dar. Diese Lösung hat den Nachteil, dass einzelne Unter­seiten nicht einzeln angepasst werden können.

Möglichkeit 2 - Hooks

Die sauberere Möglichkeit ist die Benutzung von Hooks.

Standard WooCom­merce Wrapper entfernen

Folgender Code in der functions.php entfernt die Standard WooCom­merce Wrapper, welche wir selbst definieren werden.

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

Definieren der Benut­zer­de­fi­nierten Wrapper

//WooCommerce add custom wrapper
    add_action('woocommerce_before_main_content', 'mo_theme_wrapper_start', 10);
    add_action('woocommerce_after_main_content', 'mo_theme_wrapper_end', 10);

    function mo_theme_wrapper_start() {
      echo '<main class="site-main"><article class="site-content">';
    }

    function mo_theme_wrapper_end() {
      echo '</article></main>';
    }

Theme Support für WooCom­merce erklären

Um Die Fehler­meldung im Backend bezüglich fehlenden Theme Supports zu deakti­vieren können wir folgenden Code in die functions.php einfügen.

//Theme Support for WooCommerce
    add_action( 'after_setup_theme', 'woocommerce_support' );
    function woocommerce_support() {
        add_theme_support( 'woocommerce' );
    }