• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
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

[ 9 agosto 2018 ] [ Actualizado: 4 mayo 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿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:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Modificar una plantilla de WoocommerceCómo modificar una plantilla de WooCommerce
  • Corregir error plugin ObsoletoCorregir error plugin desactualizado
  • Configurar AMP en WordPressConfigurar AMP en WordPress
  • Agregar Microdatos en campos de productos en WooCommerceAgregar Microdatos en campos de productos en WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (12 votos, promedio: 4,75 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jose Miguel Correa Anicama

    16 octubre, 2018

    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

    • Jhon Marreros Guzmán

      17 octubre, 2018

      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/

  2. Victoria

    15 noviembre, 2018

    excelente!

  3. Antonio

    24 noviembre, 2018

    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

      27 noviembre, 2018

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

  4. Mer

    6 diciembre, 2018

    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

    9 diciembre, 2018

    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

    19 febrero, 2019

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

  7. Pepe

    24 abril, 2019

    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

    • Jhon Marreros Guzmán

      29 abril, 2019

      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

  8. Valen

    3 mayo, 2019

    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

      4 mayo, 2019

      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

    24 mayo, 2019

    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

    • Jhon Marreros Guzmán

      26 mayo, 2019

      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/

  10. Mercedes

    27 mayo, 2019

    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

    12 agosto, 2019

    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

      13 agosto, 2019

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

  12. Daniel

    14 agosto, 2019

    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

      14 agosto, 2019

      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

    29 agosto, 2019

    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

    • Jhon Marreros Guzmán

      4 septiembre, 2019

      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/

  14. willy

    21 septiembre, 2019

    increible post muchas gracias

  15. Rox

    26 septiembre, 2019

    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.

    • Jhon Marreros Guzmán

      28 septiembre, 2019

      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/

  16. Danais

    1 octubre, 2019

    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

      1 octubre, 2019

      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

    12 octubre, 2019

    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

      13 octubre, 2019

      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

    15 octubre, 2019

    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

    7 noviembre, 2019

    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

      10 noviembre, 2019

      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

    20 noviembre, 2019

    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

    • Jhon Marreros Guzmán

      21 noviembre, 2019

      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.

  21. Cristian

    20 noviembre, 2019

    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

      21 noviembre, 2019

      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

    18 diciembre, 2019

    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

      18 diciembre, 2019

      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

    25 enero, 2020

    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

      25 enero, 2020

      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

    6 marzo, 2020

    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

      7 marzo, 2020

      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

    17 marzo, 2020

    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.

    • Jhon Marreros Guzmán

      18 marzo, 2020

      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.

  26. yamerke

    16 abril, 2020

    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.

    • Jhon Marreros Guzmán

      16 abril, 2020

      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

  27. Marcelo

    20 abril, 2020

    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

      20 abril, 2020

      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

    24 abril, 2020

    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.

    • Jhon Marreros Guzmán

      25 abril, 2020

      Hola mejor escríbeme a través del formulario de contacto: https://decodecms.com/contacto/
      Saludos.

  29. Luis

    29 abril, 2020

    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

      30 abril, 2020

      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

        1 mayo, 2020

        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

          1 mayo, 2020

          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

    2 mayo, 2020

    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

      2 mayo, 2020

      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

        3 mayo, 2020

        Gracias lo pruebo

        • Jaime

          3 mayo, 2020

          Solucionado. Eres un crack

  31. gregorio

    12 mayo, 2020

    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

      13 mayo, 2020

      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

    13 mayo, 2020

    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

    • Jhon Marreros Guzmán

      14 mayo, 2020

      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.

      • Federico

        14 mayo, 2020

        Hola Jhon, gracias por tu pronta respuesta, para pedirte presupuesto para ese trabajo te escribo en contacto? Saludos

        • Jhon Marreros Guzmán

          14 mayo, 2020

          Hola, si puedes escribir desde el formulario de contacto: https://decodecms.com/contacto/
          Saludos.

  33. Oscar Rios

    21 julio, 2020

    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.

    • Jhon Marreros Guzmán

      24 julio, 2020

      Hola
      Estas tratando de ejecutar la accion con add_action() como parte de la impresión de la tabla, esto es incorrecto. Si requieres construir una tabla personalizada con los precios tendrías que trabajar con el objeto de producto y obtener el precio, revisa: https://www.businessbloomer.com/woocommerce-easily-get-product-info-title-sku-desc-product-object/

  34. Gema

    22 julio, 2020

    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?

    • Jhon Marreros Guzmán

      24 julio, 2020

      Hola, prueba hacerlo como se comenta aqui: https://decodecms.com/modificar-elementos-en-pagina-de-producto-de-woocommerce/#Agregando_elementos_en_la_p%C3%A1gina_de_producto , sin embargo en tu caso en lugar del valor 12 tendrías que usar un valor mayor a 30

  35. emiliano

    9 agosto, 2020

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

    • Jhon Marreros Guzmán

      12 agosto, 2020

      Hola, lo más práctico sería ocultarlo por CSS, sin embargo también puedes hacerlo por código, revisa este enlace: https://stackoverflow.com/questions/26976296/hide-add-to-cart-button-only-on-woocommerce-shop-category-pages

  36. Alejandro

    10 agosto, 2020

    Hola, antes que nada muchas gracias por el post. Tengo un problema, el theme de mi tienda lo hice yo…y al querer que cambiar de lugar el titulo no me borra la posicion inicial, si no que me agrega el otro donde deseo…te dejo el ejemplo (https://pedidosacasa.com/supermercado/producto/prueba-oferta/) Saludos

    • Jhon Marreros Guzmán

      12 agosto, 2020

      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

    15 agosto, 2020

    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

      19 agosto, 2020

      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

    2 septiembre, 2020

    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

    • Jhon Marreros Guzmán

      2 septiembre, 2020

      Hola, si lo menciono, revisa el apartado: https://decodecms.com/modificar-elementos-en-pagina-de-producto-de-woocommerce/#Cambiando_el_orden_de_los_elementos_en_la_p%C3%A1gina_de_producto

  39. Alejandro

    9 septiembre, 2020

    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

      9 septiembre, 2020

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

      • Alejandro

        11 septiembre, 2020

        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

    9 septiembre, 2020

    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;
    }

    • Jhon Marreros Guzmán

      9 septiembre, 2020

      Hola, en lo que envías sólo hay una función, tiene que estar asociada a un Hook, si deseas mostrar esto en la página de finalizar compra, revisa: https://www.businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/

  41. pedro

    11 septiembre, 2020

    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

      11 septiembre, 2020

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

  42. pedro

    13 septiembre, 2020

    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

      18 septiembre, 2020

      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

    15 septiembre, 2020

    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.

    • Jhon Marreros Guzmán

      18 septiembre, 2020

      Hola Mejor para este tipo de consultas escribe a través del formulario de contacto: https://decodecms.com/contacto/

  44. Omar Mendoza

    18 septiembre, 2020

    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

    • Jhon Marreros Guzmán

      22 septiembre, 2020

      Hola, evalúa primero igualar las alturas, tal como se comenta: en https://decodecms.com/igualar-altura-de-elementos-de-un-grid/

  45. Samantha Mafla

    18 septiembre, 2020

    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

      22 septiembre, 2020

      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

    10 octubre, 2020

    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.

    • Jhon Marreros Guzmán

      10 octubre, 2020

      Hola, cómo estas ingresando actualmente la marca?, si es una categoría o etiqueta podrías personalizar la página del theme que muestra los productos relacionados con esa taxonomía, revisa: https://decodecms.com/jerarquia-de-archivos-de-plantilla-en-wordpress/

      • Jonathan

        10 octubre, 2020

        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

    15 octubre, 2020

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

    • pedro

      21 octubre, 2020

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

  48. Oscar Rios

    19 octubre, 2020

    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

      19 octubre, 2020

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

  49. Esteban

    6 febrero, 2021

    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

    • Jhon Marreros Guzmán

      8 febrero, 2021

      Hola, inspecciona el elemento que quieres cambiar con el inspector de código y luego añade el CSS, revisa este artículo de referencia: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/

  50. Ricardo Diaz

    8 febrero, 2021

    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

    • Jhon Marreros Guzmán

      8 febrero, 2021

      Hola, posiblemente tengas que ayudarte de un plugin para mostrar tus campos adicionales, revisa: https://decodecms.com/campos-personalizados-en-productos-de-woocommerce/ , evidentemente tendrías que consultar la documentación o con los desarrolladores para ver cómo importar esa info al plugin.

  51. jesus

    8 febrero, 2021

    muchas gracias, justo lo que estaba necesitando implementar

  52. Ricardo Diaz

    9 febrero, 2021

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

  53. Vicente

    17 febrero, 2021

    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

    • Jhon Marreros Guzmán

      18 febrero, 2021

      Hola, puedes probar recuperar las categorías de un producto a través de una función, es una lista de categorías ya que un producto puede estar en más de una categoría, revisa: https://woocommerce.github.io/code-reference/namespaces/default.html#function_wc_get_product_category_list

  54. sergio correa

    28 febrero, 2021

    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

      2 marzo, 2021

      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

    7 marzo, 2021

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

    • Jhon Marreros Guzmán

      8 marzo, 2021

      Prueba usar remove_action(), lo otro sería que lo ocultes por CSS

  56. Diego Delgado

    10 marzo, 2021

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

    • Jhon Marreros Guzmán

      16 marzo, 2021

      Hola, revisa esta guia de Hooks: https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

  57. Pablo

    25 marzo, 2021

    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

    • Jhon Marreros Guzmán

      30 marzo, 2021

      Hola, revisa el siguiente código de referencia que podría servirte: https://stackoverflow.com/questions/46007102/limit-the-number-of-cart-items-in-woocommerce

  58. lucia

    22 abril, 2021

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

    • Jhon Marreros Guzmán

      27 abril, 2021

      Hola, revisa en este enlace el video de Hooks en WooCommerce, allí lo explico. https://www.webempresa.com/university/curso-de-woocommerce-intermedio/ (el curso es gratis, sólo tienes que registrarte)

  59. ester puntito

    2 mayo, 2021

    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

    • Jhon Marreros Guzmán

      3 mayo, 2021

      Hola, podrías probar cambiando la prioridad de la carga de los hooks, algunos agrupan a varios elementos.
      Revisa este articulo de guia de hooks que te puede dar una idea de qué hooks usar: https://decodecms.com/guia-visual-de-hooks-para-storefront-y-woocommerce/

      • ester canto soler

        5 mayo, 2021

        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 );
        
        • Jhon Marreros Guzmán

          7 mayo, 2021

          Gracias por el aporte. Saludos.

  60. Ignacio

    18 septiembre, 2021

    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

      21 septiembre, 2021

      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

    20 septiembre, 2021

    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

      24 septiembre, 2021

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

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

    9 enero, 2022

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

    • Jhon Marreros Guzmán

      9 enero, 2022

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

  63. Sergio

    13 julio, 2022

    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 ?

    • Jhon Marreros Guzmán

      13 julio, 2022

      Hola, tendrías que modificar los archivos del core del plugin para añadir un Hook, en el caso de la ubicación que comentas, hay un hook pero que podría no funcionar, revisa: https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/ , podrías evaluar usar la técnica de overrides para modificar esa parte de tu sitio, revisa el punto 2 de: https://decodecms.com/como-modificar-una-plantilla-de-woocommerce/

  64. daniel

    26 agosto, 2022

    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

      30 agosto, 2022

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

  65. jhonatan colorado

    28 enero, 2023

    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

    • Jhon Marreros Guzmán

      29 enero, 2023

      Hola, revisa este artículo que explica cómo agregar tabs personalizados al detalle de producto en WooCommerce: https://decodecms.com/agregar-tabs-personalizados-en-woocommerce-sin-plugins/

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

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Insertar código fuente en WordPress usando Prism

Mover WordPress manualmente

Zona de widgets en el contenido de artículos en WordPress

Subir archivos en WordPress usando Ajax

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados