¿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
(12 votos, promedio: 4,75 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.
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
Pero no se si se llama asi o que tengo que hacer. Ayudame porfa!!!! Muchas gracias.
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/
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?
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
hola Jhon como puedo quitar el boton de carrito en la lista de productos.
saludos
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
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
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.
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 ?
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.
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
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
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!
Hola, actualmente veo que aparece correctamente, he probado con Shampoo
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!
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;
}
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/
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 );
Hola
Lo más práctico sería que ocultes por CSS el elemento que no quieres que se muestre.
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
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.
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.
Hola Mejor para este tipo de consultas escribe a través del formulario de contacto: https://decodecms.com/contacto/
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
Hola, evalúa primero igualar las alturas, tal como se comenta: en https://decodecms.com/igualar-altura-de-elementos-de-un-grid/
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.
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.
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.
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/
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?
Hola Jhon queria saber como puedo poner el SKU tambien en el carrito de woocomerce.Gracias como siempre por tu apoyo
Hola Jhon sabes si es posible poner el sku en el carrito?
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!!!
Hola, posiblemente puedas hacerlo con CSS, depende de los estilos que ya te genera tu theme.
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
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/
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
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.
muchas gracias, justo lo que estaba necesitando implementar
Muchas gracias Jhon, es un buen acercamiento a la solución. Se agradece la pronta y oportuna orientación.
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
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
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
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();
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!!
Prueba usar remove_action(), lo otro sería que lo ocultes por CSS
Hola, excelente tutorial, pero necesito poner descripcion y titulo encima de la galeria de imagenes que generalmente esta encima de todo , gracias
Hola, revisa esta guia de Hooks: https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/
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
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
hola me podrias ayudar con el codigo html para agregar una imagen que indique los metodos de pago? gracias
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)
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
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/
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 !
Gracias por el aporte. Saludos.
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
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.
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
Hola, podrías probar con el siguiente código CSS
¿Tienes algún tutorial sobre cómo cambiar el color de fondo de los productos?
Hola, serían cambios CSS, espero hacer algún curso sobre eso próximamente.
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 ?
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/
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.
Hola Daniel, lo que comentas me parece interesante, evaluaré hacer un artículo sobre eso. Saludos.
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
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/