Cómo personalizar los iconos del menú en bloques de WooCommerce
Escrito por Luis Ruiz Actualizado el
Al desarrollar un tema FSE para WooCommerce tendrás que crear una plantilla «header» y añadir un logo, menú, mi cuenta y carrito.
En este artículo vamos a ver como modificar el icono de los bloques de WooCommerce: Mi Cuenta y Mini Carrito.
Crear plantilla header para Woocommerce
En el menú puedes poner simples links como Mi cuenta, pero en esta ocasión vamos a exprimir al máximo las posibilidades que ofrece WordPress a la hora de crear un tema Full Site Edition
Utilizaremos los bloques: logos del sitio, navegación, cuenta de cliente y mini carrito.
Separaremos del menú de navegación el bloque «mini carrito» y «mi cuenta» para que en la versión móvil esté siempre visible. Crearemos al siguiente estructura de bloques.
Quedaría el menú de la siguiente manera en la web. No queda mal, pero para darle nuestro toque, y mejorar la calidad de tema creado, cambiaremos los iconos de «mi cuenta» y el «mini carrito».
Cambiar icono del bloque Cuenta de cliente
Nuestra intención es quitar el texto y poner otro icono. El texto es fácil porque el bloque nos lo permite, pero el icono sólo nos ofrece dos posibilidades.
Podríamos añadir un nuevo estilo de visualización como vimos en «Cómo añadir estilos de un bloque de Gutenberg», pero no es lo óptimo porque tendríamos que ocultar el SVG por CSS y luego añadir el nuevo por CSS. Si lo ponemos con una URL en el CSS retrasaría la carga del CSS hasta descargar el SVG. En conclusión, no es buena idea si quieres una web rápida. Puedes ver más recomendaciones en «Trucos para mejorar la velocidad de tu WordPress»
Así que vamos a por la mejor opción con un poquito de código.
Cómo saber el nombre del bloque a modificar
Para saber el nombre del bloque nos iremos al HTML que genera la página, y buscamos el bloque.
WooCommerce nos facilita el nombre en el atributo «data-block-name». Gracias al atributo lo identificamos de una forma sencilla.
Código para realizar el cambio del icono del bloque de Gutenberg
Una vez identificado el nombre del bloque «woocommerce/customer-account», utilizaremos el filtro «render_block» para sustituir el SVG a la hora de generar el bloque con el siguiente código.
function bk_render_block_core (string $block_content, array $block)
{
if (
'woocommerce/customer-account' === $block['blockName']
&& !is_admin()
&& !wp_is_json_request()
) {
$svg = '<svg> ... </svg>';
$block_content = preg_replace('/<svg.*<\/svg>/s', $svg, $block_content);
return $block_content;
}
return $block_content;
}
add_filter('render_block', 'bk_render_block_core', null, 2);Con la función «preg_replace» remplazaremos la etiqueta SVG, y su contenido, por todo lo que pongamos en la variable «$svg».
Cambiar el icono del carrito, y coger los estilos insertados desde la admin
En el caso anterior hemos sustituido el SVG sin más, pero si añadimos clases adicionales a través del panel avanzado, no se insertarán puesto que hemos sustituido la etiqueta SVG por completo.
Cómo añadir clases adicionales a nuestro bloque
Localizaremos el bloque del mini carrito como hemos hecho antes. En este caso se llama «woocommerce/mini-cart».
La función «render_block» recibe dos parámetros:
- $block_content: que es el código que va a mostrar en el cual sustituiremos el SVG.
- $block: Donde nos devolverá la información del bloque en cuestión en forma de array
Podemos sacar la información de la variable «$block» por ejemplo con la función «var_dump» para ver que contiene y sacar la información del estilo.
Vemos que en el array se encuentran los estilos que les hemos asignado a través del panel Avanzado, y Clases CSS adicionales.
Código para cambiar el icono del mini carrito
Por último, lo que nos queda, es añadir el estilo al SVG del bloque con el siguiente código.
function bk_render_block_minicart (string $block_content, array $block)
{
if (
'woocommerce/mini-cart' === $block['blockName']
&& !is_admin()
&& !wp_is_json_request()
) {
$style = $block['attrs']['iconClass'];
$svg = '<svg class="'. esc_html($style) .'"> ... </svg>';
$block_content = preg_replace('/<svg.*<\/svg>/s', $svg, $block_content);
return $block_content;
}
return $block_content;
}
add_filter('render_block', 'bk_render_block_minicart', null, 2);Conclusión
Gracias al filtro «render_block» eliminamos el SVG que trae por defecto el bloque de WooCommerce, y añadimos uno nuevo que se adapte el estilo del tema que estemos desarrollando.
De esta forma no afectamos al rendimiento de carga de página y eliminamos lo innecesario.
