¿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.
Hola! Gracias por la info 🙂
Tengo una duda, si solo queremos añadir algo en un los productos de una categoría concreta ¿cómo sería?
Gracias de antemano
Hola Pepe, tendrías que poner una condicional, antes tendrías que obtener la categoría o categorías del producto que se esta mostrando en la página de producto, revisa el siguiente código de referencia: https://stackoverflow.com/questions/15303031/woocommerce-get-category-for-product-page
Hola Jhon, qué tal? Me parece muy claro tu artículo, pero tengo una duda. Al principio dices que algunos de estos elementos que puedes mover son grupos. Por ejemplo, el elmento «METAS» sería el SKU+ Categorias + Etiquetas. Es así?
Me gustaría poder mover estos elementos que están dentro de METAS individualmente, ya que ahora los tengo todos en la misma línea y confunde.
Me gustaría tener primero SKU, debajo Categorias, y debajo Etiquetas.
Como debo hacerlo?
PD. Seguro que ya lo debes haber comentado, pero he intentado buscar en tus articulos relacionados y no lo encuentro.
Muchas gracias por la respuesta.
Hola, según veo este hook woocommerce_template_single_meta hace referencia a este archivo:
woocommerce/templates/single-product/meta.php
Ubica esto dentro de la carpeta de wp-conten/plugins, copia ese archivo manteniendo la ruta inicial (desde woocommerce) en tu theme y realiza las modificaciones en tu archivo meta.php, si no tienes estas carpetas créalas en tu theme. Revisa el punto 2 del artículo: https://decodecms.com/como-modificar-una-plantilla-de-woocommerce/
Me quedó clarisimo Jhon!
Tan solo una pregunta sería posible tener dos plantillas y en cada una tener un orden? Es decir modificar una y dejar la que viene por defecto y dependiendo del producto usar una u otra. Creo que me he explicado bien, un saludo
Hola, si es posible, aunque tendrías que hacer una comprobación del producto que esta cargando, posiblemente te convenga poner el código en el archivo single-product.php del theme de WooCommerce, revisa el punto dos del artículo: https://decodecms.com/como-modificar-una-plantilla-de-woocommerce/
Hallo .. Tengo un problemita en la pagina principal de mi web, la estoy construyendo ahora y me sale en el pie de pagina «NO SE HAN ENCONTRADO PRODUCTOS QUE COINCIDAN CON SU SELECCION» , he tratado por todos los medios de quitarlo, pero cuando le doy «refresch»a la pagina vuelve y aparece. Como puedo quitar ese mensaje permanentenmente? haa olvide decir que cuando le doy un info me sale esto:
p.wocoommerce-info418.03×91..