WooCommerce - Scripts & Styles In- / Uitschakelen

WooCommerce - Scripts & Styles In- / Uitschakelen

WooCommerce gebruikt erg veel scripts en style -bestanden welke op iedere pagina van de website actief zijn. Dat kan erg vertragend werken. Bij websites waar de webshop een onderdeel is en waar WooCommerce bijvoorbeeld niet op de home-pagina actief behoeft te zijn, zou het handig zijn als we die scripts en styles uit zouden kunnen schakelen en daarmee de snelheid van laden van de home-pagine bevorderden.

HTTP Requests

Het aantal zgn. “requests” wat uitgevoerd wordt om een website-pagina te laden bepaalt in grote mate de snelheid waarmee een pagina geladen wordt. Zo’n request is niets meer dan een communicatie-moment tussen de pagina en de webserver. Dus hoe minder communicatie er plaats vindt hoe sneller de pagina geladen wordt.

Die requests worden gedaan door o.a. JavaScripts. Die JavaScripts worden ingeladen door plugins om bepaalde functionaliteiten te bewerkstelligen. Echter zijn niet alle functionaliteiten noodzakelijk op bepaalde pagina’s doordat die desbetreffende plugin bijvoorbeeld op een pagina niet gebruikt wordt. Die scripts worden op de achtergrond, echter, wel geladen.

WooCommerce Scripts Uitschakelen

WooCommerce is zo’n plugin die op alle pagina’s actief is, dus ook op pagina’s waar geen webshop-activiteiten getoond worden. Die ongewenste activiteiten van WooCommerce kunnen we uitschakelen door het toevoegen van een eenvoudige code-snippet aan ons functions.php bestand.

Code Snippet

Een code-snippet is een klein stukje code wat we aan het functions.php bestand van het thema toevoegen om extra functionaliteit toe te voegen. Om overschrijvingen bij een update van het thema te voorkomen dient dat altijd te gebeuren in een Child-Thema.

Het gebruik en toevoegen van code-snippets hebben we in dit artikel beschreven: WordPress Code Snippets.

WooCommerce Scripts & CSS Uitschakelen behalve voor Webshop-pagina’s

Om het laden van de WooCommerce scripts en css uit te schakelen, behalve voor de ingestelde shop-pagina’s dienen we het volgende stukje code aan het functions.php bestand toe te voegen:

/** Uitschakelen van alle WooCommerce  Styles and Scripts behalve voor Shop Pagina */
add_action( 'wp_enqueue_scripts', 'no_woocommerce_styles_scripts', 99 );
function no_woocommerce_styles_scripts() {
if ( function_exists( 'is_woocommerce' ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
# Styles
wp_dequeue_style( 'woocommerce-general' );
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_dequeue_style( 'woocommerce_fancybox_styles' );
wp_dequeue_style( 'woocommerce_chosen_styles' );
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
# Scripts
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
}
}
}

Nu zullen alle scripts en css-styles van WooCommerce niet meer actief en geladen zijn, behalve voor de shop-pagina’s. Het verschil in het aantal http-requests is in ons geval bijna 40, wat een behoorlijk impact heeft op de laadsnelheid.

WooCommerce Cart Fragments

Maak je gebruik van een winkelwagen die altijd beschikbaar is (dus op iedere pagina aan te klikken is), dan is het mogelijk dat daar de styling en functionaliteit niet meer correct functioneert.

Voorbeeld WooCommerce Side Cart:

WooCommerce Floating Side cart

WooCommerce Floating Side cart

De functionaliteit van deze side-cart maakt gebruik van de styling en het script “Cart Fragments”. Die dienen we dus actief te laten. Dat kunnen we dan weer bewerkstelligen door die regel in voorgaande code uit te vinken:

# Scripts
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
/* wp_dequeue_script( 'wc-cart-fragments' ); */ 
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );

Door “/*” voor de regel en “*/” na de regel “wp_dequeue_script( ‘wc-cart-fragments’ );” te plaatsen is die regel dan uitgeschakeld, of te wel, dat stukje script is weer actief.

Plugin Maken

Om nu niet iedere keer het functions.php bestand aan te passen om deze regels in of uit te schakelen kunnen we daar ook een plugin van maken.

Het maken van een eigen plugin hadden we al beschreven in dit artikel: WordPress Code Snippet Plugin Maken.

De code voor zo’n plugin wordt dan:

<?php
/*
Plugin Name: WooCommerce Scripts & CSS Uitschakelen
Description: Deactiveer alle WooCommerce Scripts & Styles voor alle pagina's behalve de shop-pagina's.
Version: 1.0
Author: QWAIN
Author URI: https://qwain.nl
*/
add_action( 'wp_enqueue_scripts', 'no_woocommerce_styles_scripts', 99 );
function no_woocommerce_styles_scripts() {
if ( function_exists( 'is_woocommerce' ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
# Styles
wp_dequeue_style( 'woocommerce-general' );
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_dequeue_style( 'woocommerce_fancybox_styles' );
wp_dequeue_style( 'woocommerce_chosen_styles' );
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
# Scripts
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
}
}
}
/* Hierna niets meer toevoegen of wijzigen */
?>

Dit bestand slaan we dan op als disable-wooc-scripts-styles.php.

In de plugin-map van WordPress maken we dan een map aan, genaamd “disable-wooc-scripts-styles” en kopiëren dat bestandje dan via FTP in die map:

Plugin map maken

Map aanmaken en bestandje kopiëren

Gaan we dan naar de plugin-instellingen in het beheerderspaneel dienen we alleen de gemaakte plugin nog te activeren:

wordpress plugin activeren

Plugin Activeren

Nu kunnen we dus op ieder moment eenvoudig de scripts en styles in en uit schakelen.

Vragen & Info

Heb je vragen naar aanleiding van dit artikel, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

Overige Artikelen


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *