DecodeCMS

Tu WordPress a otro Nivel ...

Inicio / Tutoriales / Plugins / Modificar elementos en página de producto de WooCommerce

Modificar elementos en página de producto de WooCommerce

Modificar elementos en página de producto de WooCommerce

[ ] [ Actualizado: ]
[ Autor: ][ Plugins - Intermedio] [ ]

¿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

Algunos de estos elementos son grupos, por ejemplo Añadir al carrito incluye las variaciones
Elementos de la página de detalle de producto

 

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.

En el código no se esta considerando la parte inferior en donde aparecen los Tabs

 

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 );
El código anterior lo puedes colocar en el archivo function.php de tu theme o child theme.

En la siguiente imagen se muestra el resultado después de aplicar el código.

Elementos cambiados en página de detalle de producto

 

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.

Elminar descripción corta detalle producto Woocommerce

Si no quieres que las máquinas de búsqueda aún sigan viendo este elemento, tendrías que removerlo igualmente de los datos estructurados.
Una opción alterna sería ocultar el elemento usando CSS.

 

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>";
}
Puedes usar cualquier función del loop de WordPress como parte del código de la función woocommerce_template_custom_content.

Luego de agregar el código veremos algo similar a la siguiente imagen:

Agregar elemento después del precio usando Hook

 

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.

Suscríbete a DecodeCMS:  

 

Artículos Relacionados

Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (12 votos, promedio: 4,75 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  2. Victoria

    excelente!

  3. Antonio

    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).

    • Jhon Marreros Guzmán

      Hola, mejor escríbeme a través del formulario de contacto con detalles adicionales. Saludos.

  4. Mer

    Holaa como podria poner el mismo encabezado que tengo en la index, en los productos? lo estoy editando con elementor, gracias un saludo.

  5. María Belén Pardo Molina

    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.

  6. Jose Cruz

    Muchas gracias por tu ayuda, conseguí hacer lo que estaba buscando. Saludos y muchos éxitos.

  7. Pepe

    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

  8. Valen

    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.

    • Jhon Marreros Guzmán

      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/

  9. Diegol

    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

  10. Mercedes

    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..

  11. Agustin

    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!!!

    • Jhon Marreros Guzmán

      Hola, entiendo que por defecto quieres dejar que sea 1 como cantidad por defecto, puedes evaluar ocultar esos controles con CSS.

  12. Daniel

    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.

    • Jhon Marreros Guzmán

      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.

  13. Carolina

    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

  14. willy

    increible post muchas gracias

  15. Rox

    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.

  16. Danais

    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.

    • Jhon Marreros Guzmán

      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.

  17. Fernanda

    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!

    • Jhon Marreros Guzmán

      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.

  18. Andrea

    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.

  19. Ricardo

    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.

    • Jhon Marreros Guzmán

      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.

  20. Ana

    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

  21. Cristian

    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?

    • Jhon Marreros Guzmán

      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.

  22. juan

    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”.

    • Jhon Marreros Guzmán

      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’

  23. ELBERTH

    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.

    • Jhon Marreros Guzmán

      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.

  24. BEATRIZ

    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.

    • Jhon Marreros Guzmán

      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.

  25. César

    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.

  26. yamerke

    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.

  27. Marcelo

    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

    • Jhon Marreros Guzmán

      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.

  28. Maried

    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.

  29. Luis

    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

    • Jhon Marreros Guzmán

      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ó.

      • Luis

        Si me dices el archivo donde pueden venir esos valores te los pongo aquí a ver que es lo que falla

        • Jhon Marreros Guzmán

          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.

  30. Jaime

    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

    • Jhon Marreros Guzmán

      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

      .woocommerce div.product form.cart{
    flex-direction:column;
}

      Saludos.

      • Jaime

        Gracias lo pruebo

        • Jaime

          Solucionado. Eres un crack

  31. gregorio

    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.

    • Jhon Marreros Guzmán

      Hola
      Esta funcionalidad debería dártela tu theme, sin embargo evaluaré hacer un artículo sobre esto que comentas que me parece interesante.

  32. Federico

    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

  33. Oscar Rios

    Hola Jhon!!!, muchas felicidades por tu trabajo, me ha servido muchisimo, tengo una duda y estoy atorado modificando una página de producto porque quiero ordenar la información que muestra en una tabla

    por ejemplo:

    Precio USD | Precio MXN | Cantidad

    pero no puedo poner dentro de la tabla la funcion add_action

    esto es lo que tengo

    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_custom_content', 32 );

function woocommerce_template_custom_content(){
echo "";
echo "";
echo "  Precio USD";
echo "  Precio MXN";
echo "  Cantidad";
echo "";
echo "";
echo ". add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 31); .";
echo " $ 0.00 MXN";
echo " Cantidad 1 ";
echo "";
echo ""; 
}

    Pero no se si se llama asi o que tengo que hacer. Ayudame porfa!!!! Muchas gracias.

  34. Gema

    Hola Jhon,

    Necesito introducir una imagen con los con los métodos de envío justo dejado del botón añadir al carrito. Sabrías decirme como hacerlo?

  35. emiliano

    hola Jhon como puedo quitar el boton de carrito en la lista de productos.
    saludos

    • Jhon Marreros Guzmán

      Hola, no me queda del todo claro a qué te refieres. Revisa por si tienes código que ya realiza esto o algo similar en caso haya conflicto.

  37. Eduardo

    Hola, Gracias por tu post. me ha servido mucho. Actualmente estoy desarrollando un carro de compras con woocommerce y necesito agregar un total, puede ser antes o después del botón de add to cart, que cambie según vaya aumentando o disminuyendo la cantidad de productos. Estuve buscando y hay un plugin que lo hace. Pero no funciona. Quería saber si puedo añadirlo con snippets ?

    • Jhon Marreros Guzmán

      Hola, si, claro, puedes usar la misma lógica para agregar elementos, sólo que en tu caso posiblemente tengas que usar la prioridad entre 30 y 40 que es la que esta cerca del carrito.

  38. pedro

    Hola gran articulo!! te queria comentar si es posible hacer lo siguiente:
    En mi theme el SKU y las categrias estan debajo del boton comprar, es posible colocarlos debajo del precio del producto?
    si es asi como se haria ya que segun tutorial no mencionas este problema
    muchas gracias

  39. Alejandro

    Hola Jhon, te hago una consulta, tengo mi tienda lista, con un theme que cree yo viendo tutoriales, y me pasa que al buscar un producto, los resultados de búsquedas no tienen nada que ver con el woocommerce, me aparecen los productos como si fueran post, como podría solucionarlo? Te dejo la pagina para que veas de que te hablo https://pedidosacasa.com/supermercado . Saludos y tu web es lo mas!

    • Jhon Marreros Guzmán

      Hola, actualmente veo que aparece correctamente, he probado con Shampoo

      • Alejandro

        Hola, claro…pero en lugar de decir “Agregar al carrito” dice “Leer mas”, es como que los resultados de la busqueda los hace wordpress y no woocommerce, el resultado aparecen como post y no productos, no se si me explico…Desde ya muchas gracias!

  40. pedro

    Como puedo poner el SKU en la pagina del Carrito en el de finalizar compra?
    he puesto este codigo al final del archivo functions.php de mi Theme
    ¿Tengo que ponerlo exactamente en algun lugar de ese archivo?

    function add_sku_in_cart( $title, $values, $cart_item_key ) {
    $sku = $values[‘data’]->get_sku();
    return $sku ? $title . sprintf(” (SKU: %s)”, $sku) : $title;
    }

  41. pedro

    Hola Jhon ya pude poner el SKU debajo del precio del producto, pero ahora me sigue saliendo tb debajo del boton de compra, es posible eliminar el que esta debajo del boton solamente? o tendrian que estar los dos

    puse este codigo en el funtions.php
    remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 30 );
    add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 15 );

    • Jhon Marreros Guzmán

      Hola
      Lo más práctico sería que ocultes por CSS el elemento que no quieres que se muestre.

  42. pedro

    Pero si oculto por CSS el template_single_meta no se me ocultara de ambos lados( el que estad ebajo del precio tambien) o se puede solo ocultar la meta que está debajo del boton de comprar?
    si es asi sabes comose oculta? y que comando hay que poner? te lo agradeceria muchisimo

    • Jhon Marreros Guzmán

      Hola, si, sólo podrías ocultar uno ayudándote de las clases adyacentes, envíame la url de tu sitio e indícame cual quieres ocultar. Saludos.

  43. Carlos Rico

    Buenos días!.

    Te escribo porque estoy terminando de configurar mi tienda y me estoy topando con un “error” al momento de darle al botón de Añadir al carrito.

    Resulta que mis productos tienen variables, es decir, cuando el cliente entra en la página del producto le saldrán todos los desplegables para que pueda seleccionar sus opciones.

    El problema viene que cuando el cliente selecciona todo y le da al botón de Añadir al carrito, no se “limpia” o borran esas selecciones en la página del producto, queda todo tal cual, pero si te añade el artículo al carrito…he estado pensando en mover el “botón” LIMPIAR a la parte superior, pero no encuentro el cómo, sé que es un apaño, pero no encuentro otra solución.

    Y otra cosa…ya puestos a pedir, pregunto por si conocer algún Plugin que me pueda ayudar…para temas de calidad necesitamos que nuestros productos, al ser manufacturados, en el mismo pedido me genere una referencia única para cada producto añadido al carrito, así sea la misma referencia/variación me debe generar ese código…ya me dices si conoces algo o la forma de poder hacerlo.

    Quedo a la espera de tu posible ayuda.

  44. Omar Mendoza

    Una consulta mi estimado, por ejemplo encontre un theme que me gusta para un proyecto, pero veo que los titulos de los productos si son demasiado largos, hacer que todo quede desiguar, quisiera saber como poder limitar por ejemplo en el grid que el titulo tenga por ejemplo solo 5 palabras y no 10 si es que las tuviera.

    Por ejemplo en vez de decir:

    PlayStation 5 Consola (con ranura de disco) – Preventa

    diga:

    PlayStation 5 Consola (con ranura de di…

    y asi hacer que todo quede mejor ordenado a la hora de mostrar los productos

  45. Samantha Mafla

    Hola, puede que esta pregunta no sea muy buena, pero quisiera saber como accedo al código o archivos si no tengo WordPress instalado, solo lo tengo online, gracias.

    • Jhon Marreros Guzmán

      Hola, deberías tener una herramienta como parte de tu servicio de alojamiento que te permita ver tus archivos, por ejemplo en Cpanel tienes el Administrador de Archivos, la otra opción sería acceder por FTP.

  46. Jonathan

    Hola Jhon, necesito saber si hay forma de mostrar un título variable (según cierto parámetro) en en header de la pagina de tienda / shop en woocomerce.

    Ej, si desde el inicio selecciono una marca x de productos, al enviarme a la tienda me muestre como título el nombre de esa marca seleccionada.

    Quedo atento a tu respuesta.
    Gracias de antemano.

      • Jonathan

        Estoy utilizando el plugin “ WOOF – WooCommerce Products Filter” para filtrar los productos, por lo que del menu principal si elijo por ejemplo: zapatillas (categoria) – nike (etiqueta) voy a la tienda con el sgt link: [[www.xxx.xx/tienda/?swoof=1&product_cat=zapatillas&product_tag=nike]], lo cual muestra todos los productos correspondientes pero el titulo de la pagina sigue siempre siendo “tienda”. Mi idea es que en este caso diga Zapatillas Nike, y así según los productos seleccionados desde el menu principal.

        Habrá alguna forma?

  47. Pedro

    Hola Jhon queria saber como puedo poner el SKU tambien en el carrito de woocomerce.Gracias como siempre por tu apoyo

    • pedro

      Hola Jhon sabes si es posible poner el sku en el carrito?

  48. Oscar Rios

    Hola Jhon Buen día, sabes quiero saber si se puede realizar el acomodo que en lugar de ser horizontal sea vertical, por ejemplo que aparezca el precio y la cantidad en la misma linea y el botón de añadir al carrito abajo de ellos, ya le busque y no le encuentro, espero me puedas ayudar!! muchas gracias!!!

    • Jhon Marreros Guzmán

      Hola, posiblemente puedas hacerlo con CSS, depende de los estilos que ya te genera tu theme.

  49. Esteban

    Hola Jhon.
    Estoy tratando de modificar el formato de letra del precio que aparece cuando seleccionas un tamaño particular en un producto con variaciones. Entiendo que se hace por CSS. Pero no logro identificar como se llama esa seccion de la plantilla. Supongo que esta dentro de woocommerce_template_single_add_to_cart. Ya que en tu ejemplo cuando modificas el orden de eso, tambien mueve el selector de variaciones. Espero puedas ayudarme. Gracias

  50. Ricardo Diaz

    Jhon, estupenda publicación, me ha ayudado bastante. He usado la subida masiva de productos a través de un archivo csv, pero ¿puedo usar woocommerce para mostrar el contenido de una base bibliográfica? Ejemplo:

    Autor
    Título
    Edición
    Lugar publicación
    Editorial
    Año publicación
    Volumen
    Numero
    Paginas
    Lugar geográfico
    Periodo histórico
    ISBN
    Resumen
    Numero clasificación
    Palabras claves

  51. jesus

    muchas gracias, justo lo que estaba necesitando implementar

  52. Ricardo Diaz

    Muchas gracias Jhon, es un buen acercamiento a la solución. Se agradece la pronta y oportuna orientación.

  53. Vicente

    Muy buen aporte!

    Gracias me resulto muy util. Agregue un boton para descargar un folleto despues del titulo y quedo, esto me ahorro hacerlo en cada pagina del producto.

    Consulta Nueva
    Como seria hora agregar el botón solo a una categoría, es decir que solo se agregue el botón a la pagina del producto en una categoría en especifico.

    Quedo a su amable respuesta

    Gracias

  54. sergio correa

    Hola cómo estas? pregunta, si quiero solo poner el sku debajo del nombre pero sin el resto de info que lleva que son categorias y tags. es que cuando muevo el woocommerce_template_single_meta se mueve con todo y se duplica, queda arriba y abajo. Me puedes orientar? gracias

    • Jhon Marreros Guzmán

      Hola, intenta sólo imprimir el SKU en un Hook, es decir no se trata de mover sino hacer una nueva función que haga referencia al Hook que deseas, luego puedes usar $product->get_sku();

  55. Lourdes

    Hola, super práctico como lo explicas, pero tengo un problema, cambio el precio del producto de ubicación, pero me deja el precio igualmente en la posición original, o sea que lo veo dos veces… Me podrías ayudar a arreglarlo? gracias!!

  56. Diego Delgado

    Hola, excelente tutorial, pero necesito poner descripcion y titulo encima de la galeria de imagenes que generalmente esta encima de todo , gracias

  57. Pablo

    hola jhon! gracias por el articulo! te quería preguntar, quiero que en la pagina donde salen todos los productos, si añado uno al carrito, me deje de aparecer, para que no pueda añadir mas de uno, gracias

  58. lucia

    hola me podrias ayudar con el codigo html para agregar una imagen que indique los metodos de pago? gracias

  59. ester puntito

    Hola Jhon. Son una pasada tus tutoriales.
    Tengo una duda y, aunque he buscado por todas partes no encuentro la forma de resolverla. Quizás se me ha pasado algo.
    Lo que quiero es ubicar la Descripción larga (la que aparece en TABS) justo debajo del añadir al carrito.
    He probado en la content-single-product.php
    moviendo el hook * @hooked woocommerce_output_product_data_tabs – 10
    y colocándolo entre los “hooks” de Sumary Product en Single. Entre single_meta y single_sharing. Pero no se aprecia ningún cambio. ¿Podrías ayudarme?
    Mil gracias

      • ester canto soler

        Gracias!!!!
        Finalmente he encontrado un código que lo hace directamente. Se pega en al final del achivo functions.php del tema hijo. Lo dejo aquí por si le sirve a alguien. Un saludo !

        /**
 * @snippet       Move product tabs beside the product image - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=393
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.5.2
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 60 );

  60. Ignacio

    Hola.
    Excelente tutorial.
    Me ha surgido un inconveniente en la última actualización de Woocommerce, tal vez me puedas ayudar.
    Tengo asignado un esquema de color a mi web pero desde la actualización, al entrar en “miweb/productos/categoría/producto”, la página de “producto” cambia el esquema de color.
    A qué puede deberse?.
    Gracias

    • Jhon Marreros Guzmán

      Hola, creo que lo que comentas depende más del theme o del constructor que estes usando, verifica si tienes actualizados también el tema y plugins que usas.

  61. Nestor

    Hola buen día Jhon

    Como puedo invertir la imagen del producto por el detalle y carrito de producto es decir que la imagen este a la derecha y lo demás a la izquierda

    • Jhon Marreros Guzmán

      Hola, podrías probar con el siguiente código CSS

      .single-product div.product .woocommerce-product-gallery{
  float: right;
}

  62. Dianelly

    ¿Tienes algún tutorial sobre cómo cambiar el color de fondo de los productos?

    • Jhon Marreros Guzmán

      Hola, serían cambios CSS, espero hacer algún curso sobre eso próximamente.

  63. Sergio

    Buenas tardes,
    ¿Como puedo hacer para añadir un hook para añadir el contenido que yo quiera debajo de la imagen de la sudadera ?

  64. daniel

    Hola estimado como estas un gran saludo, Sabes que he visto tu post y de verdad ha sido de gran ayuda excelente aporte. Sabes que estuve revisando lo que son los Tabs personalizados en WooCommerce. Pero que me sucede, que no se si seria posible sacar las Reseñas de producto y dejarlas abajo del contenido del single product.

    Ahora los grandes comercios utilizan las reseñas de forma mas visible, y los Tabs siento que cubren el contenido de las reseñas. Entiendo que puedo poner las reseñas de primero. Pero la descripcion del producto tambien es importante y al hacer esto no se veria la descripcion

    No te ajunto un enlace de ejemplo, porque no quiero que mi comentario salga en spam.

    Espero puedas ver este mensaje y ver si puedes ayudarme en algo, o si sabes alguna persona que lo haya echo, que no he conseguido como. Saludos y excelente Web Bro.

    • Jhon Marreros Guzmán

      Hola Daniel, lo que comentas me parece interesante, evaluaré hacer un artículo sobre eso. Saludos.

  65. jhonatan colorado

    hola, gracias por compratir el conocimiento, por favor como se puede modificar la seccion: descripcion pues quiero que me apresca la informacion organizada por titulos de caracteristicas de productos, es decir quiero cambiarlo de esta a imagen: https://prnt.sc/waDoXNfwuCFD a esta otra imagen: https://prnt.sc/7GMmTTCp8nDz
    gracias por tu ayuda

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*