Guía de Ganchos en la Ficha de Producto de Woocommerce

Uno de los grandes beneficios de Woocommerce es que dispone de Ganchos o Hooks para poder a√Īadir contenido a sus p√°ginas. Si no sab√©is lo que es un gancho no es m√°s que una zona en la que se puede a√Īadir contenido de forma automatizada o bien remplazar esa zona por otra. Es parecido a lo que solemos hacer con los Snippets de Woocommerce.

He hecho este post ya que, muchas de las tiendas online que suelo realizar, hago personalizaciones en la ficha de producto para mostrar lo que suelo decir en estos artículos para aumentar la conversión. Muchas veces me comentan cómo se esas zonas o cómo las pueden poner ellos en sus tiendas online. En este artículo veremos todas las zonas editables, cómo hacerlo mediante código o un plugin y estrategias que suelo usar.

Guía de Hooks en la página de producto de Woocommerce

woocommerce_before_single_product
add_action( 'woocommerce_before_single_product', 'wc_print_notices', 10 );
woocommerce_before_single_product_summary
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 ); 
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
hooks ficha de producto woocommerce
woocommerce_single_product_summary
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

Título del producto

Precio(‚ā¨)

Descripción corta

woocommerce_before_add_to_cart_form

woocommerce_before_variations_form

Sección de elegir variación si el producto fuese variable

woocommerce_before_add_to_cart_button
woocommerce_before_single_variation
woocommerce_single_variation
hooks visual guide en espanŐÉol
woocommerce_after_single_variation
woocommerce_after_add_to_cart_button
woocommerce_after_variations_form

woocommerce_after_add_to_cart_form

woocommerce_product_meta_start

SKU: 000000001

Categorías: Guías, Woocommerce

woocommerce_product_meta_end

woocommerce_share

woocommerce_after_single_product_summary

guia de action hooks woocommerce

woocommerce_after_single_product

Ejemplo de a√Īadir c√≥digo

El primero ser√≠a a√Īadir un texto de ventajas competitivas despu√©s del bot√≥n de a√Īadir al carrito. Lo primero que tendr√≠amos que hacer es buscar el Hook con esa ubicaci√≥n, en este caso woocommerce_after_add_to_cart_button.

Una vez esto a√Īadimos una acci√≥n add_action(), entre los par√©ntesis primero ponemos la ubicaci√≥n y despu√©s la funci√≥n que vayamos a crear(woocommerce_anadir_despues_boton_a√Īadir_carrito). Cerramos poniendo la prioridad(30). M√°s tarde creamos la funci√≥n, en este caso es poner un texto como pod√©is ver aqu√≠:

add_action( 'woocommerce_after_add_to_cart_button', 'woocommerce_anadir_despues_boton_a√Īadir_carrito', 30 );

function woocommerce_anadir_despues_boton_a√Īadir_carrito() {
echo '<div class="wccc-content-block wccc-content-block-6630">
			<div class="font80"><i class="fa fa-truck"></i> Envío Gratuíto<i></i></div>
<div class="font80"><i class="fa fa-lock" aria-hidden="true"></i> Pago 100% Seguro</div>
<div class="font80"><i class="fa fa-refresh" aria-hidden="true"></i> Devoluciones en 15 días</div>
<div class="font80"><i class="fa fa-share-square-o" aria-hidden="true"></i> Producto de exportación</div>
	</div>'; // Cambia las ventajas como quieras entre los <div>
}

A√Īades esto a tu plugin de funcionalidades o bien al functions.php de tu tema y ya lo tenemos:

ejemplo de anŐÉadir hooks woocommerce

Sería igual con todas las ubicaciones, en algunos de los hooks he dejado contraído ejemplos de add action.

Tambi√©n puedes ver todos estos campos desde el plugin de Woo Visual Hook Guide que se encuentra en el repositorio de WordPress. Aunque est√© 3 a√Īos sin actualizarse funciona perfectamente, ya que es un plugin que no necesita actualizaciones.

Recuerda que si quieres tener una tienda online totalmente personalizada te dejo mi servicio de desarrollo de tiendas online ¬ŅTe gustar√≠a que pusiese otro ejemplo con alguna funci√≥n que necesites? D√©jamela en comentarios!

¬°Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)

Especialista en Comercio electr√≥nico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en funci√≥n de tu sector y p√ļblico objetivo. Puedes encontrarme en Diegol.top

¬ŅNecesitas ayuda con este tutorial?

M√°ndame un correo y te resuelvo todas las dudas!


Ver servicios Contactar

Interacciones del lector

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *