Si quieres mejorar la velocidad tu tienda online, hoy vemos cómo cargar condicionalmente los archivos CSS y JS de WooCommerce.
Hace unas cuantas semanas, ya vimos las razones para elegir WooCommerce como motor para tu ecommerce. Y aunque WooCommerce es el método más sencillo para poner en marcha tu tienda online de forma lean, también tiene algún que otro inconveniente.
Y es que WooCommerce, cuando está cargado en tu instalación de WordPress, carga sus archivos CSS y JS en todas las páginas de tu web. Y claro, esto hace que tu web se vea penalizada en PageSpeed por esta carga de archivos CSS y JS en páginas que no tienen nada que ver con tu ecommerce.
Por ejemplo, si en la página de contacto no estás mostrando ningún producto… ¿para qué necesitas los archivos CSS y JS de WooCommerce? Para nada… ¿verdad?
Pues en este tutorial vamos a ver como puedes hacer que los archivos CSS y JS de WooCommerce sólo carguen en aquellas páginas de tu web que realmente los necesitan, y eliminándolos en todas aquellas páginas en las que no son necesarios.
¿Cómo cargar condicionalmente los archivos CSS y JS de WooCommerce?
Para cargar condicionalmente los archivos CSS y JS de WooCommerce sólo tienes que añadir el siguiente código en tu plugin de funciones:
// Elimina las pestañas de la ficha de producto de WooCommerce
add_filter( 'woocommerce_product_tabs', 'mk_remove_product_tabs', 10 );
function mk_remove_product_tabs( $tabs ) {
unset( $tabs['description'] ); // Elimina la pestaña de descripción
unset( $tabs['reviews'] ); // Elimina la pestaña de valoraciones
unset( $tabs['additional_information'] ); // Elimina la pestaña de información adicional
return $tabs;
}Solamente con incluir este snippet en tu plugin de funciones te estarás ahorrando la carga de 9 archivos por cada página (5 archivos de JS y 4 archivos de CSS).
Pero eso sí, debes tener la precaución de no haber puesto el carrito de WooCommerce en algún menú de navegación o en la barra lateral. Porque entonces, los archivos que estamos condicionando con el snippet sí serán necesarios en todas las páginas y el código, por tanto, no tendrá ningún efecto sobre tu sitio web.
Como ves, no es necesario instalar ningún plugin para personalizar las funcionalidades de tu tienda online construida con WooCommerce. Bastan unas pocas líneas de código en tu plugin de funciones para resolverlo de forma fácil y rápida. Además, haciéndolo así, cada vez aprenderás más sobre WooCommerce y la instalación de tu tienda online.
Si te ha gustado este tutorial, recuerda que si te suscribes, tendrás acceso a todo el contenido premium.
Y como siempre, si tienes cualquier problema, no dudes en contactar conmigo. Nos vemos en la próxima entrega, con un nuevo tutorial. 😉
