Laden von WooCommerce-JS- und CSS-Dateien verhindern

Das Entfernen oder besser gesagt das Verhindern, dass WooCommerce unnötige JavaScript- und CSS-Dateien auf jeder einzelnen Seite deiner Website lädt, sondern nur auf den Seiten, auf denen WooCommerce aktiv ist, kann die Ladezeiten erheblich verbessern – und damit auch das Nutzererlebnis.

Einige Dinge solltest du beachten:

1. Abhängigkeiten: Gibt es Elemente auf deiner Website, die von diesen WooCommerce-Skripten abhängen? Dazu könnten beispielsweise das Warenkorbsymbol im Header oder Widgets in der Seitenleiste gehören.
2. Entwicklungsumgebung: Es wird dringend empfohlen, Änderungen zunächst lokal (auf deinem eigenen Computer) oder in einer Entwicklungsumgebung zu testen.
3. Fachkenntnisse: Du solltest wissen, was du tust, und dich im Code auskennen.
4. Backups: Sorge dafür, dass du ein vollständiges Backup deiner Website hast, bevor du Änderungen vornimmst.

Warum WooCommerce-Dateien entfernen?

WooCommerce lädt standardmäßig drei CSS-Dateien und fünf JavaScript-Dateien. Diese Dateien sorgen zwar für die korrekte Darstellung und Funktionalität des Shops, sind aber oft auf anderen Seiten deiner Website gar nicht notwendig.

Hier eine Übersicht der Dateien:

CSS-Dateien:

<link href='.../plugins/woocommerce/assets/css/woocommerce-layout.css' rel='stylesheet' type='text/css' />
<link href='.../plugins/woocommerce/assets/css/woocommerce-smallscreen.css' rel='stylesheet' type='text/css' />
<link href='.../plugins/woocommerce/assets/css/woocommerce.css' rel='stylesheet' type='text/css' />

JavaScript-Dateien:

<script src='.../plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/add-to-cart.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/woocommerce.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/cart-fragments.min.js'></script>

Es macht zum Beispiel keinen Sinn, dass das Skript für das Hinzufügen von Produkten zum Warenkorb (add-to-cart.min.js) auf deiner Kontaktseite geladen wird. Ebenso ist die CSS-Datei für das Shop-Layout (woocommerce-layout.css) auf deinen Blogseiten überflüssig.

Stattdessen solltest du diese Dateien nur auf relevanten WooCommerce-Seiten laden, wie z. B. auf Produktseiten, der Checkout-Seite oder der Warenkorbseite.

Code zum Entfernen unnötiger Dateien

Füge den folgenden Code in die functions.php-Datei deines Child-Themes ein oder nutze das Code Snippets Plugin, um unnötige WooCommerce-Dateien von allen Nicht-WooCommerce-Seiten zu entfernen:

<?phpfunction rk_remove_woocommerce_css_js() {
    // Prüfen, ob WooCommerce aktiv ist
    if (function_exists('is_woocommerce')) {
        // Prüfen, ob es sich um eine WooCommerce-Seite handelt
        if (!is_woocommerce() && !is_cart() && !is_checkout()) {
            // WooCommerce-CSS-Dateien entfernen
            wp_dequeue_style('woocommerce-layout');
            wp_dequeue_style('woocommerce-general');
            wp_dequeue_style('woocommerce-smallscreen');

            // WooCommerce-JS-Dateien entfernen
            wp_dequeue_script('wc-cart-fragments');
            wp_dequeue_script('woocommerce');
            wp_dequeue_script('wc-add-to-cart');

            wp_deregister_script('jquery-blockui');
            wp_dequeue_script('jquery-blockui');

            wp_deregister_script('js-cookie');
            wp_dequeue_script('js-cookie');
        }
    }
}
add_action('wp_enqueue_scripts', 'rk_remove_woocommerce_css_js');
?>

Wichtige Hinweise

• In Zeile 6 des Codes findest du die Bedingung für WooCommerce-Seiten. Wenn du die Skripte auf weiteren Seiten (außer WooCommerce-Seiten) laden möchtest, kannst du die Bedingungen entsprechend anpassen.
• Teste deine Änderungen sorgfältig, bevor du sie auf der Live-Seite aktivierst.

Zusätzliche Optionen für CSS-Dateien

Wenn du alle WooCommerce-CSS-Dateien komplett entfernen möchtest – auch auf WooCommerce-Seiten – kannst du folgenden Filter verwenden:

<?php// Alle WooCommerce-Stylesheets entfernen
add_filter('woocommerce_enqueue_styles', '__return_empty_array');
?>

Falls du nur bestimmte CSS-Dateien entfernen möchtest, nutze diesen Code:

<?phpfunction rk_dequeue_styles($enqueue_styles) {
    unset($enqueue_styles['woocommerce-general']);    // Entfernt allgemeine Styles
    unset($enqueue_styles['woocommerce-layout']);     // Entfernt das Layout-Stylesheet
    unset($enqueue_styles['woocommerce-smallscreen']);// Entfernt die Optimierung für kleine Bildschirme
    return $enqueue_styles;
}
add_filter('woocommerce_enqueue_styles', 'rk_dequeue_styles');
?>

Fazit

Mit diesem Ansatz kannst du die Ladezeit deiner Website optimieren und gleichzeitig sicherstellen, dass WooCommerce nur dort Ressourcen lädt, wo sie tatsächlich gebraucht werden.