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.
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";
}
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);
}
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.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...