¿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
(7 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.
Hola Jhon quiero agradecerte primero por esa excelente información que nos brindas, por otra parte quisiera saber si es posible agregar el peso de mi producto ya que en el inicio de mi web tengo la pagina de tienda muestra la imagen de mi producto con el precio pero el peso no, gracias por tu ayuda quedo atento.
Hola, prueba con el siguiente código que se detalla en el sitio web de WooCommerce: https://docs.woocommerce.com/document/display-product-weight-archive-pages/
Saludos
Excelente articulo Jhon, muy claro y practico.
Queria consultarte si sabes como puedo cambiar los titulos en el woocommerce,
por ej a Productos, cambiarlo por Socios.
Te agradezco tu gentileza,
sds!
Marcelo
Hola, ¿en donde te aparece el texto productos?, si el texto forma parte del theme podrías instalar el plugin Loco Translate para cambiar textos.
Hola Jhon excelente aporte, no se mucho sobre el tema, pero estoy haciendo mi página y tengo varias dudas: 1) quiero mostrar en la ficha de producto un desplegable o algo asi como las plantillas de Elementor para los FAQ donde al clicar se despliega y se vea la información de envíos y otras cosas 2) quiero que al entrar a la ficha se muestre la fecha estimada de envío pero el pluging que he encontrado muestra una linea que no me gusta su aspecto, hay forma de que aparezca como parte de la tabla tipo FAQ que te menciono?, 3) también no se como agregar la imagen de Paypal para dar seguridad al comprador esas que dicen Secure Payment o algo así, 4) cambiar el nombre de la pestaña de descripción, podrías ayudarme, creo que eres mi salvador, espero poder hacerlo con un shortcode pero no encuentro precisamente lo que necesito. Mil gracias de antemano.
Hola mejor escríbeme a través del formulario de contacto: https://decodecms.com/contacto/
Saludos.
Hola Jhon
Necesito hacerte una consulta
Estoy intentando cambiar el precio del producto para que aparezca debajo de la descripción y no al principio como aparece por defecto
uso esto
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 25 );
y efectivamente me añade el precio debajo de la descripción, pero no me lo elimina de encima de la descripción
Podrias indicarme?
Gracias
Hola, por lo que comentas el remove_action no esta funcionando, prueba con otros valores en lugar de 10 ya que tu theme puede haber cambiado esto, para descartar podrías cambiar temporalmente de theme. También podrías buscar un código similar en los archivos de tu theme y verificar qué valor se usó.
Si me dices el archivo donde pueden venir esos valores te los pongo aquí a ver que es lo que falla
Hola, cada theme es diferente, la idea sería buscar un código similar en todos los archivos con algun editor de código, aunque si tu theme tiene soporte lo mejor es consultar con los desarrolladores.
Hola. excelente aporte.
He seguido tus pasos y perfecto, pero no encuentro donde cambiar los aparatados que corresponden a los productos con variaciones, me salen todo apelotonados, sin embargo en los productos sin variaciones me sale decente. https://dissenypc.es/producto/21xl22xl/#tab-reviews
Hola, veo que es un problema con el CSS de tu theme, prueba agregando el siguiente código CSS al final de tu archivo style.css de tu child-theme
Saludos.
Gracias lo pruebo
Solucionado. Eres un crack
hola jhon te felicito por tu trabajo y soporte que brindas… en esta ocacion queria hacerte una consulta, ya que estoy diseñando mi pagina y tienda con woocommerce y queria saber como puedo cambiar el icono donde va la cantidad de productos que quiero añadir a mi carrito, es decir que en vez de que aparezcan la flechas de superior e inferior, poder colocar el icono de mas y menos (+ y -).
de verdad te sabria agradecer si me puedes ayudar con ello.
Hola
Esta funcionalidad debería dártela tu theme, sin embargo evaluaré hacer un artículo sobre esto que comentas que me parece interesante.
Hola,Jhon, excelente las explicaciones, te escribo por qué me estoy iniciando en esto de las web y quiero que en la página de productos debajo de “productos relacionados “ pueda agregar otro slider de mi listings, es decir 2, el que trae por defecto y otro personalizado, tengo que modificar código o usar algún plugin, muchas gracias por tu tiempo, saludos
Hola, posiblemente necesites agregar una nueva zona de widgets a nivel de tu theme, revisa:
https://decodecms.com/anadir-una-nueva-zona-de-widgets-a-un-theme-wordpress/
Si sólo quieres que esta zona se vea sólo en los productos tendrías que poner algunas condicionales para mostrar la zona.
Hola Jhon, gracias por tu pronta respuesta, para pedirte presupuesto para ese trabajo te escribo en contacto? Saludos
Hola, si puedes escribir desde el formulario de contacto: https://decodecms.com/contacto/
Saludos.