Guía visual de Hooks para StoreFront y WooCommerce

[ 30 marzo 2021 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

Si estas trabajando con el tema StoreFront y quieres hacer cambios en el diseño del theme o en las secciones de WooCommerce, muchas veces necesitas conocer los Hooks que tienes disponible para hacer estos cambios a través de código.

Generalidades

El plugin que usaremos para identificar los Hooks disponibles tanto para el tema Storefront como para WooCommerce es Storefront Visual Hook Guide.

Ten en cuenta que es un plugin para desarrollo, por lo que debes eliminarlo de tu sitio web final.

El plugin sólo funciona con el tema Storefront.

Opciones del plugin

Tras instalar y activar el plugin, veremos en el front-end del sitio, en la barra superior una nueva opción de menú que nos crea el plugin.

Podemos mostrar los hooks de acción y filtro para el tema Storefront y los hooks de acción para Woocommerce

Mostrando Hooks para el tema Storefront

Cuando activamos la opción de mostrar Ganchos (Hooks) para Storefront, veremos que aparecen secciones destacadas con un color celeste que nos indican los diferentes Hooks usados en el tema y los cuales a través de código podemos modificar.

Ten en cuenta que en cada una de estas secciones de Hooks es posible que ya tengan asignadas algunas funciones, es por eso que aparece el símbolo más para desplegar el detalle de cada sección.

Por ejemplo si queremos agregar algún contenido como parte del Hook storefront_footer, podemos usar un código similar a:

add_action('storefront_footer', 'dcms_after_credits', 30);
function dcms_after_credits(){
	echo "Esto aparecerá después de los créditos del footer";
}

Para agregar esa línea hemos usado la prioridad de 30 que es la misma con la que se registró la función after_credits

Esta guía también nos sirve para eliminar las funciones asignadas a algún Hook, por ejemplo para remover la sección de categorías:

add_action('wp_head', 'remove_categories');
function remove_categories(){
	remove_action( 'homepage', 'storefront_product_categories', 20);
}

Para eliminar, asegúrate de usar la misma prioridad que indica la guía visual, en nuestro ejemplo la prioridad con la que se registró la función storefront_product_categories en el Hook homepage es 20

Mostrando los Hooks de WooCommerce

De la misma forma que se muestran los Hooks del tema Storefront, es posible mostrar los Hooks de WooCommerce para esto vasta sólo con visitar alguna página de WooCommerce y luego activar la opción de Mostrar Ganchos para WooCommerce, por ejemplo para la página de producto:

Veremos que se destaca algunas secciones con el color morado, característico de WooCommerce, algunas secciones igualmente puede ser que tengan asignados ya algunas funciones, puedes ver el detalle usando el botón de más.

Por ejemplo para mostrar una imagen con las tarjetas de crédito en la parte inferior, podemos usar el siguiente código en donde usamos el Hook woocommerce_share

add_action('woocommerce_share', 'dcms_add_image_cards', 10);
function dcms_add_image_cards(){
	$ruta = get_stylesheet_directory_uri()."/tarjetas_credito.jpg";
	echo "<img src='".$ruta."'  width=100 />";
}

Siempre que usamos un Hook, podemos ver que aparecerá la función a la que se hace referencia como parte del detalle de la sección.

Conclusión

Tener una guía visual de las posiciones y nombres de los Hooks es muy útil si estas creando o modificando secciones de tu sitio a través de código. El plugin Storefront Visual Hook Guide nos ayuda con esto, si bien es cierto que sólo funciona con el tema Storefront, podemos usarlo también para ver los Hooks que podemos usar en WooCommerce.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.