¿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
(6 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..
Hola!! Quiero quitar el apartado del producto donde se pueden elegir la cantidad de productos a comprar. He probad varias cosas que recomiendan y no me funciona ninguna. Si pudieras darme una mano!!!
Hola, entiendo que por defecto quieres dejar que sea 1 como cantidad por defecto, puedes evaluar ocultar esos controles con CSS.
Hola, gracias por el tutorial, necesito hacerte una pregunta.
Veras, necesito poner los productos internos de mi tienda en nofollow «no los externos», para que Google no pierda tiempo rastreandolo, debido a que he puesto los productos en noindex para realizar un experimento.
Por lo general, cuando incluyes un producto se queda en follow, ¿habria alguna forma de poner estos enlaces en nofollow?.
De verdad, agradezco tu respuesta, llevo horas buscando la forma de hacerlo y hasta el momento no he dado con ella, quizas, a travez de este archivo pueda poner los productos en nofollow para que Google no siga los enlaces de los productos y no pierda tiempo rastreando algo que no quiero.
De nuevo, gracias por las respuestas.
Hola, ¿usas algún plugin de SEO?, por ejemplo SEO by Yoast te crea una sección en los CPT en donde puedes definir si quieres o no seguir enlaces.
hola buen dia, Excelente información muchas gracias por tu ayuda, quisiera saber si me puedes decir cual seria la forma correcta de agregar un icono al lado del texto, lo he intentado pero no logro hacerlo
Hola, tendrías que ver primero si tu theme ya carga alguna fuente de iconos, de esa manera sería sólo agregar código HTML adicional, revisa por ejemplo: https://decodecms.com/insertar-font-awesome-en-wordpress/
increible post muchas gracias
Hola Jhon
¿Sabes si es posible mover hacia abajo la tabla de productos agrupados y mostrarla en línea horizontal? Es decir, todos los productos agrupados bajo la imagen principal, NO en el sumario. Gracias.
Si quieres mover elementos de una posición a otra posiblemente puedas evaluar hacerlo por Javasript, revisa el siguiente artículo de referencia: https://decodecms.com/duplicar-widget-wordpress-javascript/
Hola muchas gracias por este artículo. Yo necesito que la página de detalle del producto no me salga, o sea tengo una lista de productos y quiero que al dar clic sobre uno me redirija directamente a amazon, porque tengo una web de afiliación, pero en lugar de eso me lleva a la página de descripción del producto de woocommerce. Llevo varios días y no he podido darle solución, le agradecería muchísimo si me pudiera ayudar.
Hola, tal como lo comentas en este caso creo que tendrías que modificar los archivos de tu theme, ya que la funcionalidad de WooCommerce es llevarte al detalle del producto. Tal vez en tu caso no sea necesario WooCommerce, sino simplemente entradas de WordPress que muestren el detalle de tu artículo y con un enlace o botón hacia amazon.
Buena noches,
Necesito modificar el tamaño y estilo de fuente de los títulos que se encuentran en la rejilla de productos. Estoy trabajando con Enfold Travel y si bien me permite desde allí cambiar todos los estilos de etiquetas, éstos son los únicos que no responden a las opciones que selecciono.
Agradecería que puedas ayudarme. Muchas gracias.
saludos!
Hola, tendrías que hacerlo por CSS, si sigues con problemas puedes comunicarte a través del formulario de contacto enviando la url exacta en donde se pueda ver lo que comentas.
Gracias Jhon por compartir los conocimientos a través de este artículo que me resolvió un problema que tenía días trabajando en ello.
Hola Jhon. Por algún motivo que desconozco el resumen de producto me sale siempre y por defecto debajo de la imagen de producto en lugar de a su lado, como debe ser.
Alguna idea de que puede estar pasando?
Mil gracias por tu ayuda.
Hola, para descartar si es algún problema de estructura, primero revisa en tu theme si como partes de los archivos de tu theme tienes una carpeta llamada woocommerce y prueba renombrarla, con esto tomará la estructura que viene por defecto con WooCommerce, si sigues con problemas entonces es un problema con CSS.
Hola Jhon
Excelente post, enhorabuena por tu trabajo. Me gustaria suprimir solo el título de la pestaña descripción de la ficha del producto, y que apareciera solo el contenido. Cómo puedo hacerlo? Muchas gracias.
Ana
Hola, entiendo que te refieres a los tabs, podrías revisar el siguiente artículo relacionado: https://decodecms.com/agregar-tabs-personalizados-en-woocommerce-sin-plugins/ , la idea sería que elimines el texto del tab de descripción. Sin embargo lo otro que puedes evaluar es ocultarlo simplemente con CSS, creo que esto último sería lo más práctico.
Hola John,
Estuve intentando hacer cambios en mi sitio pero para productos usando el puggin de composite product tambien de woocommerce. En base a el tutorial, hice los comandos:
remove_action(‘woocommerce_composite_component_selections_single’,wc_cp_component_options_sorting, 10)
Sin embargo, al cargarlo en function.php de mi child theme la pagina se cae y para recuperarla he tenido que volver al function.php original.
Que puedo estar fallando?
Hola, tal vez sea algún error de sintaxis, tendrías que ver qué tipo de error se genera cuando usas el código ya que es posible que sea incorrecto, puedes activar el modo debug de tu WordPress para tener más información.
Buenas, tenía una duda. A la hora de introducir el código para agregar un elemento nuevo e introducir html para crear un formulario, se me cae la página. he visto que podría ser un error de sintaxis pero no me toma el type=»radio».
Hola Juan, es posible que sea por las comillas, debes usar comillas simples (‘comillas simples’) dentro de las comillas dobles, en tu caso para definir el type=’radio’
Hola Jhon excelente aporte, [claro y simple]. No soy experto en wordpress sin embargo me apasiona. Si eres tan amable y nos indicas como podemos visualizar el resultado de estos códigos en un constructor como Elementor, que recursos podemos utilizar, por que cuando insertas el código en el functions.php, no se muestra automaticamente la acción esperada, así definas bien la posición del elemento donde quieres mostrar el resultado. Gracias y un saludo.
Hola, con Elementor ya tienes opción de hacerlo visualmente, revisa: https://elementor.com/blog/introducing-woocommerce-builder/ , este artículo es a nivel de theme, cuando no se usa constructores. Por otro lado no me queda del todo claro cuando indicas que no se muestra automáticamente, supongo que te refieres a cuando refresco el navegador, efectivamente, tengo que recargar la página para ver los cambios cuando se trabaja por código.
Saludos.
Hola, cuando me hicieron la web me pusieron al final de las paginas de cada producto unos iconos de gastos de envio, plazo de devolución y tiempo de envio, para que el cliente antes de hacer el pedido cliquee y se le redirige a ver los gastos o los tiempos de envio. El tema esta en que no consigo editarlo, porque dentro que la hoja de producto solo aparece [envios] y es como si tuviera algún link anexado. Alguien sabe de lo que estoy hablando?. Muchas gracias de antemano.
Hola, si aparece así como comentas, posiblemente sea un shortcode, revisa si hay algún plugin personalizado que te hayan creado, o tal vez el código del shortcode se encuentre en el archivo functions.php del tema. Saludos.
Muy buenas,
en mi página muestro los productos con unos campos personalizados, pero ahora quiero añadir otro tipo de productos con otra categoria en la que no quiero que se muestren esos campos y se vea plantilla por defecto. Como puedo conseguir eso? No lo consigo.
Hola, imagino que los campos personalizados estas mostrándolos a través de código, por ejemplo como se realiza en este artículo: https://decodecms.com/campos-personalizados-en-productos-de-woocommerce/ , tendrías que simplemente hacer una comprobación al producto usando el objeto producto.