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 carrito WooCommerce desde WordPress
Si deseas cambiar el icono del carrito en WooCommerce, puedes hacerlo fácilmente siguiendo unos sencillos pasos. En primer lugar, debes acceder al panel de administración de WordPress y navegar hasta la sección de Apariencia > Personalizar.
A continuación, busca la opción de «Temas» en el menú lateral y haz clic en ella. Aquí encontrarás varias opciones de personalización para tu tema, incluyendo la posibilidad de cambiar el icono del carrito.
Una vez que hayas seleccionado la opción de «Temas», busca la sección de «Iconos del menú» o algo similar. Aquí podrás ver una lista de todas las opciones de iconos disponibles para el menú de WooCommerce.
Para cambiar el icono del carrito, simplemente selecciona la opción que más te guste de la lista. Puedes elegir entre diferentes estilos de iconos, como carritos de compras, bolsas, cajas, etc. También puedes subir tu propio icono si lo prefieres.
Una vez que hayas seleccionado el nuevo icono del carrito, asegúrate de guardar los cambios y actualiza tu sitio web. Ahora podrás ver el nuevo icono del carrito en el menú de WooCommerce, personalizado según tus preferencias.
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.
Si en lugar de usar SVG utilizas imágenes PNG o similar, puede que te interese como optimizarlo y añadirles el atributo Lazyload a las imágenes del menú para mejorar la velocidad de tu WordPress con este truco.
De esta forma no afectamos al rendimiento de carga de página y eliminamos lo innecesario.
