WooCommerce es el plugin más popular de eCommerce para WordPress, te permite crear (de forma gratuita) una tienda hecha a la medida de tu servicio o producto y, además, tiene cientos de plugins complementarios (tanto gratuitos como de pagos) que extienden aún más sus capacidades.
Ahora, hablando específicamente del tema que nos convoca, WooCommerce incluye ciertos archivos CSS (Woocommerce-Blocks) enfocados específicamente en darle forma y estilo a los bloques de Gutenberg, exáctamente en la siguiente carpeta: woocommerce/packages/woocommerce-blocks/build/style.css.
Estos bloques son cargados tanto en el front-end como en el back-end de todos los sitios que utilizan WooCommerce y, si bien pueden ser muy útiles, si no usas Gutenberg para diseñar y gestionar tu tienda, es un archivo que sobra y que, por ende, suma estilos y peso a la carga de tu página web.
Tabla de Contenidos
Por qué desactivar WooCommerce-Blocks
La principal razón para desactivarlo es optimizar el CSS de tu web y, por ende, la velocidad de carga y el rendimiento de la misma. Si eres como yo, y muy pocas veces utilizas Gutenberg para crear tus sitios en WordPress, no es necesario que incluyas los Woocommerce Blocks en tu sitio.
En pocas palabras, la razón principal para desactivarlos es evitar que tu tema cargue unos estilos CSS que no necesitas.
Cómo desactivar WooCommerce-Blocks
Te mostraré tres cosas que puedes hacer para desactivarlos en caso de que lo necesites, dos de ellas implican insertar un snippet de código en el archivo functions.php de tu sitio para evitar la carga y, la tercera, te permite hacer lo mismo pero utilizando un plugin para hacerlo más rápido y de forma intuitiva.
Desactivar los estilos CSS de Woocommerce-Blocks en el front-end
WooCommerce suele cargar estos estilos de bloques cada vez que algún cliente visita tu tienda web. La idea detrás de esto es que no necesites generar una estética para tus bloques, ya que están predefinidas por el plugin, pero si no es algo que necesites, puedes desactivarlo usando el siguiente snippet de código:
/**
* Desactivar estilos Woocommerce Blocks (front-end).
*/
function slug_disable_woocommerce_block_styles() {
wp_dequeue_style( 'wc-block-style' );
}
add_action( 'wp_enqueue_scripts', 'slug_disable_woocommerce_block_styles' );Desactivar los estilos CSS de Woocommerce-Blocks en el back-end
De la misma forma que WooCommerce carga sus estilos en la parte visible de tu web, también lo hace en el panel de administración o back-end de tu sitio. De esta forma, puedes usar los bloques si utilizas el editor de Gutenberg. Para desactivarlos (si es que no lo usas), puedes usar el siguiente snippet:
/**
* Desactivar estilos Woocommerce Blocks (back-end).
*/
function slug_disable_woocommerce_block_editor_styles() {
wp_deregister_style( 'wc-block-editor' );
wp_deregister_style( 'wc-block-style' );
}
add_action( 'enqueue_block_assets', 'slug_disable_woocommerce_block_editor_styles', 1, 1 );Ahora, la pregunta es ¿dónde y cómo agrego estos códigos?, no te preocupes, tengo la respuesta. El camino «difícil» es editar el archivo functions.php de tu tema hijo (child-theme) o tu tema principal (no recomendado) y agregarlos al final de dicho archivo.
Sin embargo, una forma más cómoda y menos compleja, es utilizando el plugin Code Snippets (gratuito) que te permitirá agregar cualquier código que necesites a tu sitio sin necesidad de modificar los archivos originales, muy simple, muy rápido.
Conclusión
Con eso ya estarás listo, tu sitio cargará un par de estilos menos cada vez que alguien lo visita y aumentarás su rendimiento. Si bien no es algo que vaya a hacer que tu sitio sea el más rápido del mundo, siempre es bueno saber qué archivos puedes desactivar (u optimizar) para darle un pequeño empujón de velocidad a tu web.
Si estás interesado en conocer otros tutoriales para optimizar tu instalación de WordPress, puedes revisar esta página y complementarla con algunas recomendaciones para el SEO WordPress también. Mientras más optimizada tengas tu web, mejor rendimiento tendrá en buscadores como Google.