¿Te gustaría modificar la página de detalle de producto que tiene Woocommerce?, ¿Ocultando o cambiando el orden de sus elementos?, para hacer esto tienes que tener en cuenta la estructura de Hooks que te ofrece Woocommerce por defecto.
Generalidades
En la siguiente imagen se puede ver alguno de los elementos que tiene la página de producto de Woocommerce por defecto, básicamente tenemos los siguiente elementos:
- Titulo
- Precio
- Descripción corta
- Añadir al carrito
- Metadatos
Revisando la estructura de la página de Producto
Si revisamos los archivos de template que tiene Woocommerce veremos que para mostrar el detalle del producto usa el archivo:
/wp-content/plugins/woocommerce/templates/content-single-product.php
En este archivo podrás encontrar un código similar al siguiente:
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
Como ves hay un Hook llamado woocommerce_single_product_summary que es usado para mostrar cada parte del detalle de la página de producto y de acuerdo a un orden de prioridad.
Por ejemplo para mostrar el título utilizamos el hook woocommerce_single_product_summary y el nombre de la función woocommerce_template_single_title, el título tiene prioridad 5 por lo que se mostrará antes del rating.
Cambiando el orden de los elementos en la página de producto
Para cambiar el orden de los elementos tenemos que eliminar la acción y luego agregarla nuevamente cambiando la prioridad.
Por ejemplo si queremos que la opción de agregar al carrito salga antes del resumen, entonces tenemos que cambiar la prioridad de 30 a una prioridad menor que 20
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );
En la siguiente imagen se muestra el resultado después de aplicar el código.
Eliminando elementos en la página de producto
Si quieres eliminar algún elemento, simplemente usarías la función remove_action, por ejemplo para eliminar la descripción corta usarías:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
Luego de aplicar el código anterior se vería algo similar a la siguiente imagen en donde no aparece la descripción corta.
Agregando elementos en la página de producto
Puedes agregar algún elemento a la página de productos usando el hook woocommerce_single_product_summary, tal como lo hace Woocommerce con las funciones que habíamos visto anteriormente.
Por ejemplo para añadir un elemento después del precio podemos usar una prioridad mayor a 10
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_custom_content', 12 );
function woocommerce_template_custom_content(){
echo "<p>Mi contenido personalizado</p>";
}
Luego de agregar el código veremos algo similar a la siguiente imagen:
Conclusión
Puedes hacer modificaciones a los elementos de la página de detalle de Producto de Woocommerce a través de los Hooks, específicamente del Hook woocommerce_single_product_summary y la prioridad, cambiando el orden de los elementos, eliminándolos o agregando nuevos elementos.
¿Aún con dudas?, en el siguiente video se detalla los puntos tratados anteriormente.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando…
Hola consulta si quiero modificar el orden de las tabs y reemplazarlo en el lugar de la descripción corta como tendría que hacerlo?
Ejemplo http://prntscr.com/l6quqp
Hola, te sugiero revisar el siguiente artículo que explica como añadir tabs, pero si revisas el código el array de tabs también podrías modificarlo: https://decodecms.com/agregar-tabs-personalizados-en-woocommerce-sin-plugins/
excelente!
Hola!
En primer lugar muchas gracias por tu artículo y enhorabuena por tu trabajo. Te escribo porque llevo varios días intentando aplicar cambios en los elementos de mi página de producto (woocommerce), en concreto, retirada de las “categorías” y cambio en el orden de los elementos (poner el precio y el botón de “Añadir al carrito de la compra” después del resumen de producto y no antes).
Hola, mejor escríbeme a través del formulario de contacto con detalles adicionales. Saludos.
Holaa como podria poner el mismo encabezado que tengo en la index, en los productos? lo estoy editando con elementor, gracias un saludo.
Hola quisiera modificar el orden no de la página del producto si no de la página de tienda donde se ven todos los productos. Necesito cambiar el orden porque se ven primero las categorías y después el título y necesito que primero se vea el título y después las categorías. Gracias.
Muchas gracias por tu ayuda, conseguí hacer lo que estaba buscando. Saludos y muchos éxitos.