Es inevitable: a veces nos sobran cosas. No todas las tiendas tienen necesidades estándar, ni todas funcionan igual, así que es normal que muchas veces necesitemos eliminar «cosas que sobran». Es un caso muy habitual necesitar quitar partes de la página de producto en WooCommerce, como el texto de oferta, el SKU, las categorías, etiquetas, el precio…
WooCommerce no incluye opciones para esto, sin embargo es muy fácil hacerlo; de más de una manera, además. Así que vamos a repasar cómo ocultar elementos de la ficha de producto en WooCommerce.
Tabla de contenidos
- Diferentes formas de eliminar u ocultar elementos en la página de producto
- Ocultar la imagen de producto
- Ocultar el texto Oferta en la ficha de los productos rebajados
- Eliminar el precio de la página de producto
- Eliminar el botón Añadir al carrito
- Ocultar la información meta del producto: SKU, categorías y etiquetas
- Ocultar otros elementos de la página de producto de WooCommerce
Diferentes formas de eliminar u ocultar elementos en la página de producto
Hay varias formas de hacer algo así, unas más recomendables que otras en función de lo que necesites hacer y del nivel de confianza que tengas con el código. Descartando formas menos ortodoxas y limitándonos a lo más aconsejable, se me ocurren al menos tres:
- Mediante un plugin
- Creando un custom template
- Mediante código (con remove_action)
- Mediante CSS (con display:none)
En este artículo vamos a repasar las dos últimas, que son las sencillas y que están al alcance de cualquiera, aunque no haya escrito una línea de código en su vida.
Las dos primeras son muy específicas, y es mejor utilizarlas sólo si lo que necesitamos es crear una ficha de producto totalmente personalizada, al cien por cien. Y si podemos evitarlo, mejor.
No voy a explicar aquí cómo crear un custom template para la ficha de producto, para ello es necesario saber código (PHP y funciones específicas de WordPress y de WooCommerce) y no está al alcance de cualquiera; quizá lo deje para un tutorial más avanzado.
En cuanto a plugins, hay muchos para crear una ficha de producto personalizada. Por ejemplo WooCommerce shortcodes & Custom Product page with Elementor, que te permite crear una página de producto a medida utilizando el maquetador visual de moda, Elementor.
Ocultar elementos mediante código
Este sistema se basa en utilizar los hooks de WooCommerce para evitar que el elemento que queramos ocultar (el SKU, la información meta, el botón añadir al carrito…) se añada al código.
Es, para mí, el modo más limpio y recomendable, y el que uso siempre que puedo. Normalmente basta con una sola línea de código (utilizando la función remove_action) para eliminar un elemento concreto de la página de producto de WooCommerce.
En cuanto a dónde añadir ese código, ya he hablado de ello varias veces. Si no lo tienes muy claro, echa un vistazo a estos artículos:
Ocultar elementos mediante CSS
Si lo tuyo es fobia al código, la alternativa es usar CSS. El resultado práctico es el mismo: el elemento que quieras ocultar no se verá en la web.
Sin embargo hay una diferencia importante: mientras que con el sistema anterior eliminábamos esta información, con CSS sólo la ocultamos. Es decir, la información sigue ahí (de hecho si alguien mira el código fuente podrá verlo) pero no se muestra en la web.
Si lo que quieres es usar CSS, lo tienes muy fácil: sólo tendrás que añadir los estilos necesarios en la sección que WordPress ya incluye para ello, en Apariencia > Personalizar > CSS adicional.
Ocultar la imagen de producto
Comenzamos con lo más delicado. Y digo delicado porque, aunque en principio ocultarla es tan sencillo como con cualquier otro elemento de la página de producto, esto ocasiona efectos inesperados que habrá que resolver.
Basta con un poco de CSS para que la imagen de producto (con la galería) desaparezca:
.woocommerce-product-gallery {display:none}
o bien, si lo que quieres es que desaparezca sólo la galería:
.flex-control-thumbs {display:none}
También, como decía al principio, se puede hacer con un poco de código. Para ocultar la imagen de producto y la galería:
remove_action ('woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20);
Y si lo que queremos eliminar es sólo la galería:
remove_action ('woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20);
Pero ¿qué ocurre? Que efectivamente eliminamos (u ocultamos) la imagen de producto, pero el resultado es algo así:
¡Horror! Efectivamente la imagen no está, pero su hueco sigue ahí. Bueno, que no cunda el pánico: esto se puede solucionar con un poco de CSS adicional. Bastará con agregar a nuestros estilos:
.single-product .summary {width:100%!important}
y arreglado. Todos tan amigos de nuevo.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
Ocultar el texto Oferta en la ficha de los productos rebajados
Otro típico: querer quitar u ocultar el cartelito ¡Oferta! (Sale!) que aparece en la página de producto cuando éste está rebajado.
Ante todo decir que, bien utilizado, este texto puede ser una potente herramienta de marketing. Porque lo de Oferta dice poco pero, ¿y si dijera Ahorra X euros? La cosa ya es diferente, ¿verdad?
Esto lo puedes conseguir utilizando este plugin que te permite personalizar el texto de oferta tanto en la página de producto como en las páginas de archivo (tienda, categorías, resultados de búsqueda…) incluso pudiendo añadir la cantidad ahorrada:
Pero vamos a lo que vamos: pongamos por caso que quieres eliminarlo del todo, sin dejar rastro. Pues aquí van los códigos. Primero el CSS:
.onsale {display:none}
si quieres eliminarlo en toda la web. Si sólo quieres eliminarlo en la ficha de producto sería:
.single-product .onsale {display:none}
Y si prefieres hacerlo con PHP:
remove_action ('woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10);
para la página de producto y, si quieres eliminarlo también de las páginas de archivo tendrás que añadir:
remove_action ('woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10);
Eliminar el precio de la página de producto
Vamos ahora con el precio, que también tiene un par de detalles que explicar, porque podemos hacer algunas cosas chulas con esto. Si lo que queremos es simplemente que no esté, lo mejor es tirar de PHP:
remove_action ('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
Y listo. Pero en este caso CSS nos otorga un poco más de flexibilidad, pero a cambio de renunciar a seguridad; recuerda lo que decía al principio: con remove_action el dato simplemente no está, no hay forma de verlo, pero con CSS se puede ver si se mira el código fuente (ctrl+F con Windows, Cmd+F con Mac), así que cuidado si lo que quieres es que no se pueda conocer.
Aún así, ahí va el CSS para que no se muestre sea quien sea el visitante:
.single-product .price {display:none}
Pero aún podemos hacer más cosas. Si es un artículo rebajado pero no quieres que se muestre el precio anterior (el que aparece tachado) te bastará con usar:
.single-product .price del {display:none}
De esta forma sólo se mostrará el precio actual, igual que si no estuviera rebajado. Por otro lado, si lo que quieres es que sólo los clientes registrados e identificados se les muestre el código, puedes aprovechar la clase logged-in de WordPress usando:
.single-product .price {display:none} .logged-in.single-product .price {display:inherit!important}
Pero repito por enésima vez: así el precio puede verse si alguien mira el código fuente. Es mejor hacer las cosas bien, y usar para esto PHP:
if (!is_user_logged_in()) remove_action ('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
Eliminar el botón Añadir al carrito
Esto es muy típico al convertir WooCommerce en un catálogo: ocultar el precio pero, también, el botón de Añadir al carrito (o incluso sustituirlo por un botón Añadir a mi presupuesto o similar).
Esto con CSS es bastante sencillo con un:
form.cart {display:none}
Sin embargo en este caso PHP nos da muchísima más flexibilidad, porque nos permite distinguir entre tipos de producto a la hora de hacerlo. En orden simple, agrupado, variable y externo sería:
remove_action ('woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30); remove_action ('woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30); remove_action ('woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30); remove_action ('woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30);
Ocultar la información meta del producto: SKU, categorías y etiquetas
En este caso CSS nos da más flexibilidad que PHP, porque toda esta información es mostrada con el mismo hook, lo que significa que si hacemos:
remove_action ('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
ocultaremos el bloque completo: SKU, categorías y etiquetas. El mismo efecto conseguimos con CSS haciendo:
.product_meta {display:none}
Sin embargo CSS nos da también otras posibilidades, como por ejemplo ocultar sólo el SKU:
.sku_wrapper {display:none!important}
sólo las categorías del producto:
.posted_in {display:none!important}
o sólo las etiquetas del producto:
.tagged_as {display:none!important}
Y, por supuesto, cualquier combinación de ellas que queramos (no es necesario duplicar las directivas). Por ejemplo, si queremos mostrar el SKU pero ocultar las categorías y etiquetas del producto:
.posted_in, .tagged_as {display:none!important}
Ocultar otros elementos de la página de producto de WooCommerce
Como el editor de WordPress me dice que ya van 1.350 palabras y lo que queda es más sencillo, voy a ir abreviando directo a cada cosa:
Ocultar las valoraciones (estrellas)
Con PHP:
remove_action ('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
Con CSS:
.woocommerce-product-rating {display:none}
Ocultar la descripción corta
Con PHP:
remove_action ('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
Y con CSS:
.woocommerce-product-details__short-description {display:none}
Ocultar las pestañas de producto
Y ojo porque, recuérdalo, la descripción del producto está en una de estas pestañas. Con PHP:
remove_action ('woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10);
Y con CSS:
.woocommerce-tabs {display:none}
Ocular los productos relacionados
En este caso merece mucho la pena hacerlo con PHP, ya que ahorras recursos del servidor:
remove_action ('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
Si aún así prefieres utilizar CSS:
.related.products {display:none}
Y, en fin, me dejo algunas cosas secundarias. Si lo que buscas no está, ¡simplemente pregunta en los comentarios!
Javier dice
Hola Enrique
¿serías tan amable de indicarme cuál sería el CSS para ocultar el peso en la ficha de los productos?
Enrique J. Ros dice
Hola Javier
Haciendo click derecho e inspeccionar elemento podrás ver qué clases se aplican al elemento en cuestión, después puedes hacer uso de la directiva display para ocultarlo.
Un saludo.
María dice
He probado todas tus directivas y no me funciona ninguna… Las clases se quedan en rojo… ¿Tienes otro método?
Pablo dice
Hola buenas, he probado a ocultar «clear selection» y no ocurre nada.
Con Loco Transalte tampoco deja traducirlo.
Olatz dice
Buenas tardes de nuevo, problema con el ordenar por solucionado 🙂 ahora me gustaría saber si tienen un css para eliminar el «mostrando 1-10 de 20 resultados» que aparece arriva del todo en la tienda. Un saludo y gracias!
Miriam Pérez dice
¡Muchas gracias por tu blog!
Acabo de abrir mi tienda online y todos los post son superinteresantes!
Haces que todo sea más fácil para todos los que es nuestra primera incursión en wordpress
Enrique J. Ros dice
Gracias por tu comentario, Miriam, me alegra que mis contenidos te resulten útiles 🙂
Un saludo
Antonio dice
Hola Enrique.
Quiero ocultar determinadas categorias que son importadas directamente de un csv pero que para mi no son necesarias.
Consigo eliminar la categoria deseada de la pagina de la tienda pero cuando accedo a alguna otra categoria continua apareciendo y con ella los procuctos que la componen y que no quiero que aparezcan.
Existe alguna manera de solventar esto?.
Este es el codigo que he utilizado.
/**
* Remove Categories from WooCommerce Product Category Widget
*
* @author Ren Ventura
*/
//* Used when the widget is displayed as a dropdown
add_filter( ‘woocommerce_product_categories_widget_dropdown_args’, ‘rv_exclude_wc_widget_categories’ );
//* Used when the widget is displayed as a list
add_filter( ‘woocommerce_product_categories_widget_args’, ‘rv_exclude_wc_widget_categories’ );
function rv_exclude_wc_widget_categories( $cat_args ) {
$cat_args[‘exclude’] = array(’55’,’68’); // Insert the product category IDs you wish to exclude
return $cat_args;
}
Gracias de antemano.
Fernando dice
He puesto en la sidebar derecha un widget para que aparezcan los productos nuevos. Con el shortcode me aparecen pero no quiero que aparezcan las imágenes de cada producto. He hecho alguna prueba pero no lo consigo, me puedes ayudar. Ahora no aparece porque he desactivado la pestaña de imagen en productos. Por lo que no aparece en ningún lugar.Muchas gracias
Enrique J. Ros dice
Hola Fernando
Esas imágenes pueden ocultarse con CSS, aunque el código a utilizar depende de la plantilla.
Un saludo.
belen dice
suuuuuuuper útil!!
Muchísimas gracias! 🙂
lory herrera dice
Buen día, he leído muchos tutoriales acerca de woocommerce, y storefront pero no he encontrado en ninguno de ellos la opción efectiva para quitar el icono del carrito de compras y el valor ($0.00)en la cabecera de la pagina web, en la misma linea con el menú principal. Actualmente uso la pagina web como blog y en un futuro quizás agregue artículos, por esta razón uso este tema. gracias
Enrique J. Ros dice
Hola Loly
Puede hacerse con un poco de CSS:
#site-header-cart{display:none}
Un saludo.
Angel dice
Buen día, yo tengo un problema en especifico en la parte entre los botones de – y + para elegir la cantidad, me aparece la etiqueta de «Cantidad» lo cual hace que quede disparejo esa parte porque no lo pone antes del botón -, sino que lo pone después del botón -, intente con el display;none; dentro del Style y si lo resuelve pero termina ocultándome todas la etiquetas que tiene el Woocommerce, yo solo requiero que se oculte de la parte donde se muestra el producto y en la parte de «ver carrito de compras» ya que allá también aparece de esa manera.
Enrique J. Ros dice
Hola Ángel
Tendrás que establecer las etiquetas a las que aplicar ese estilo de forma más restrictiva.
Un saludo.
Karel lamoru dice
Por si le sirve a alguien, envió un codigo css con el que logré ocultar la descripción corta del producto cuando se muestra un listado. Pasé varias horas en google buscando una solución y no vi nada, revisando el inspector de elementos lo hice, gracias enrique por este articulo que me dio mucha luz para resolver el problema que tenia.
.woocommerce ul.products li.product .excerpt, .woocommerce-page ul.products li.product .excerpt {
margin-top: 15px;
display: none !important;
}
Ma Jesús dice
Muchas gracias, me ha sido muy útil
Ma Jesús dice
Tengo una duda de principiante. Si oculto en la ficha de producto las etiquetas y categorías porque encuentro que estéticamente quedan feas pero quiero que los motores de búsqueda de Google rastreen esa información para mejorar mi SEO. Esa «trampilla» me terminará prejudicando ?! ya que he leído por ahí que Google penaliza los display:none .
Muchísimas gracias
Enrique J. Ros dice
Hola Ma Jesús
No, Google no penaliza los display none: penaliza las malas prácticas que pretenden hacer que el buscador vea un contenido diferente al que ve el usuario, como ocultar textos con palabras clave, anuncios, etcétera.
Un saludo
Julio dice
Hola Enrique:
¿Cómo puedo ocultar la palabra ‘descripción’ que aparece dos veces en el producto? No sé si puedo hacerlo con añadiendo código CSS. ¡Gracias!
Enrique J. Ros dice
Hola Julio
Sí, se puede hacer con CSS
.woocommerce-Tabs-panel–description h2 {display: none;}
Un saludo
Carlos dice
Tu post me ha servido para Ocultar la información meta del producto: SKU, categorías y etiquetas, pero no se ocultan las pestañas de producto (en ambos casos usé CSS. En cualquier caso, gracias por el post y todos los conocimientos que compartes.
Enrique J. Ros dice
Hola Carlos
Puede que tu plantilla esté forzando la visibilidad con alguna directiva. Prueba a añadir !important después del display:none
Un saludo
Martín dice
Hola Enrique,
Muchas gracias por tus post, me han ayudado muchísimo.
Estoy intentando ocultar los precios tachados de las ofertas para que muestre el precio como si no tuviera descuento u oferta. He usado el código CSS que indicas .single-product .price del {display:none} pero no consigo ningún resultado.
Tengo que hacerlo por PHP?
Enrique J. Ros dice
Hola Martín
Seguramente tu plantilla ya incluye estilos para ese elemento, prueba a utilizar el !important para forzar los tuyos.
Un saludo
JOSE RAMOS dice
Hola, he estado intentando ocultar la informacion adicional referente al peso y dimensiones del producto, hasta el momento solo he podido ocultar los valores con el codigo td.product_weight {display:none} y td.product_dimensions {display:none} pero los titulos de «Peso» y «Dimensiones» se quedan en la fila de la tabla (aparecen como «th»).
Intentando oculta las filas solo pude hacerlo con la primera con el codigo
.woocommerce-tabs .shop_attributes tr:first-of-type td, .woocommerce-tabs .shop_attributes tr:first-of-type th {display: none;}
Que tengo que hacer para ocultar la seguna fila o el segundo titulo de fila?
Enrique J. Ros dice
Hola Jose
Utiliza el selector nth-child()
Un saludo
Sergio dice
Buenas tardes,
Me paree un post genial¡ Gracias por los consejos. Me surge una duda. ¿ Sería posible que la página inicial de la tienda no tuviera categorías ni productos ? Y no necesitar generar una pagina inicio a parte para ello.
Un Saludo y Gracias por el trabajo
Enrique J. Ros dice
Hola Sergio
No entiendo muy bien lo que planteas: es posible establecer cualquier página como página inicial.
Un saludo
Sergio dice
Trato de explicarme. En una página de woocomerce, si la página de inicio es Tienda, por defecto te muestra o todos los productos con su paginación, o todas las catgorias, o un mix. Quisiera inhibir esa carga, manteniendo los filtros. de la izquierda.
He estado buceando por las tripas de wp y no encuentro la función para ello. Es algo que me parecería fascinante poder hacer.
Un Cordial Saludo y Gracias por tan pronta respuesta.
Enrique J. Ros dice
Para eso tendrías que modificar la query, puedes usar por ejemplo pre_get_posts. Si lo que quieres es que estén ocultos por defecto y mostrar según los filtros que se apliquen, eso ya depende entonces de la configuración del plugin que estés usando para filtrarlos.
Un saludo.
Jose dice
Hola!
¿Es posible ocultar el selector de cantidad de un producto? Por ejemplo, si se vende cursos online no tiene sentido vender más de 1 (de hecho tengo activada la limitación en el carrito) pero sigue apareciendo el selector de cantidad, que no pinta na.
Gracias
Enrique J. Ros dice
Hola Jose
En los datos del producto hay una opción para eso. Echa de todos modos un vistazo a este plugin, puede serte de utilidad.
Un saludo
Calamuchita Portátil dice
Hola, no está funcionando para WooCommerce 7.2.0.
María dice
Hola! ¿Se puede quitar la ruta que aparece encima de los productos utilizando CCS? Me refiero a por ejemplo:
Inicio/Mujer/Camisetas mujer…
Enrique J. Ros dice
Hola María
Sí, sin duda, basta usar un display:none a la clase CSS que le corresponda a las migas de pan.
Un saludo,
Alberto dice
Hola, lo primero felicitarte por tu gran post. Es de gran ayuda. Pero tengo una duda. A mi me gustaría ocultar el precio rebajado sólo a ciertas categorías de la web, por ejemplo, todos los productos de nueva colección quiero que salgan con el precio rebajado pero sin el original tachado, y en todas las demás categorías que salgan de forma normal. ¿Esto se puede hacer?
Por otro lado también quiero eliminar la bagde de descuento únicamente en la categoría nueva colección, pero que en las demás si aparezca. ¿Cómo puedo hacerlo?
Gracias por tiempo. Saludos
Enrique J. Ros dice
Hola Alberto
Sí, es posible hacerlo, pero requiere de CSS personalizado o programación a medida.
Un saludo
OMAR dice
Hola Enrique! Gracias por tu post, Me es de gran ayuda… Tengo una pregunta. Quiero agregar un boton de comprar «rapida» en la pagina donde se muestran todos los productos por categoria y asi saltarme la ficha y el carrito, o sea enviarlo directo a la pagina de pago.
tengo este codigo pero hay algo que no me funciona.
/*Con el siguiente codigo pude agregar el boton de «Añadir al carrito» a la pagina de productos por categoria. pero ademas abajo de ese boton quiero agregar un boton de comprar y enviarlo directo a la pagina de pago.
function dac_add_cart_button () {
add_action( ‘woocommerce_after_shop_loop_item_title’, ‘woocommerce_template_loop_add_to_cart’, 10 );
}
add_action( ‘after_setup_theme’, ‘dac_add_cart_button’ );
Si alguien me puede ayudar. Gracias
Enrique J. Ros dice
Tendrías que usar el hook woocommerce_after_shop_loop_item_title (o cualquier otro adyacente) para crear ahí tu propio botón, añadiendo el producto al carrito y enviándolo al checkout con un enlace como los que explico aquí, aunque para eso tendrías que saber programar
Un saludo
Guillermo dice
Buenas Enrique,
Lo primero felicitarte y darte las gracias por este post. Yo quería preguntarte si sería posible editar el texto que hay en la sección de «Información adicional». Para que te hagas a la idea de mi objetivo, vendo un producto que está sujeto a condiciones, y me gustaría explicar bien las condiciones debajo de producto. También se me ocurre el crear una sección propia, pero no se si esto sería más sencillo que editar el contenido de la que ya tiene woocommerce.
Gracias de antemano y un saludo,
Guillermo
Enrique J. Ros dice
Hola Guillermo
Lo puedes editar con Loco Translate, aunque para eso lo mejor es que uses algún plugin para campos personalizados
Un saludo
Emilio Valdes dice
Hola, gracias por el tutorial.
Seria posible ocultar solo la palabra categoria y que se muestre el resto:
Por ejemplo
De: Categoria: Pantalones
A: Pantalones
Enrique J. Ros dice
Hola Emilio
Sí, se puede hacer de tres formas: por CSS, editando la traducción (con Loco Translate por ejemplo) o estableciendo un template personalizado.
Un saludo
Ignacio dice
Hola Enrique.
Como puedo ocultar los precios del listado de productos en mi Checkout, y solo mostrar el Sub total. Para luego sea añadido el envío y salga el total final.
Como digo solo no quiero que aparezca los valores de los precios listados en el checkout.
Enrique J. Ros dice
Hola Ignacio
Aunque se puede hacer con código, es mucho más sencillo hacerlo por CSS.
Un saludo
Eduardo TH dice
Hola Enrique,
Tengo un detalle, cuando abro un producto desde el celular me aparece la descripción corta, seguida de un botón de «Ver detalles», que puedo hacer para que los detalles no se compriman y se muestren por completo, como quien dice, no quiero que aparezca lo de ver detalles, si no que se muestren todos desde un principio.
Enrique J. Ros dice
Hola Eduardo
Eso depende de la plantilla. Consulta con el desarrollador de tu tema si es posible.
Un saludo
Nuria dice
Hola Enrique,
Ante todo, enhorabuena por tu artículo porque es buenísimo.
Tengo una consulta, a ver si me puedes ayudar.
Tengo un ecommmerce en el que tengo muchísimos productos en el que figuran un % de descuento. Es decir, asi:
4̶.̶5̶0̶0̶,̶0̶€̶ > 3.200,0€ incluido 29% dto.
̶5̶2̶5̶,̶0̶€̶ > 472,0€ Incluido 10% dto.
¿Qué código podría poner en css para que me aparecieran los primeros precios? Es decir, sin los descuentos aplicados, es decir:
4.500€
525€
Muchas gracias de antemano.
Saludos
IVAN dice
Hola, una pregunta, widget del carrito, cuando tengo un producto con varios atributos me los pone todos en el carrito y yo no quiero que salgan todos sino solo algunos, habria alguna manera de hacerlo? Lo he conseguido hacer mediante php en el archivo del carrito de archivo de woocommerce, pero claro cuando te vas a la pagina del carrito no salen, yo solo quiero ocultarlo del widget del carrito, y si es posible en css, gracias
Enrique J. Ros dice
Hola Ivan
El CSS vale para dar estilos, no para eso. Incluye en tu código un filtro para que no se ejecute en el carrito.
Un saludo
Ivan dice
Gracias por contestar, no sabria como hacerlo ese filtro. He hecho lo siguiente pero quiero ponerlo en su ubicación correcta.
He conseguido hacerlo, hay un archivo que se llama cart-item-data.php, en el le da un clases a los atributos, el primer atributo que es el que quiero que siempre se muestre ya que es su numero se serie, y nombre del atributo (no el valor) siempre es el mismo, mediante un if con ese valor le doy una clase, y a los otros que no quiero que se muestre otra clase, y asi luego las oculto con css. Es lo único que se me ha ocurrido.
La cuestion seria como ponerlo en el functions.php de mi child para cuando se actualice no se borre y no tenga que estar cambiandolo en cada actualizacion
Sabrias como hacer llamada a esa función en function.php en vez de cart-item-data.php?
Saludos, gracias por la respuesta.
Alberto dice
Hola, excelente artículo, me preguntaba si hay alguna forma a traves de CSS de ocultar el precio a un producto específico? gracias, y felicdades por su trabajo.
Enrique J. Ros dice
Hola Alberto
Sí, puesto que cada página de producto tiene una clase específica que usa el ID de producto, echa un vistazo con el inspector del navegador.
Un saludo
Anna dice
Hola Enrique.
Muy útil, pude solventar el «problemilla».
Necesito ocultar sólo en una página donde muestra la selección de una categoría de producto el botón añadir al carrito. Pero después si que se tiene que ver en la ficha de producto ¿Puedo hacerlo mediante CSS?
Enrique J. Ros dice
Hola Anna
Sí, claro que se puede hacer con CSS, mira con el inspector del navegador qué clases aplican.
Un saludo
Miguel dice
Hola Enrique,
Genial tu artículo, muchas gracias. Una pregunta (que he buscado pero me ha parecido que no has cubierto), ¿cómo se podrían eliminar los tags? Y el código, ¿habría que ponerlo en cada una de las páginas o habría forma de que incluyéndolo una vez ya se hiciera efectivo para todos los productos?
¡Gracias!
Enrique J. Ros dice
Hola Miguel
Está explicado en esta misma entrada
Un saludo
Dina López de Sagredo dice
Hola amigo, muchísimas gracias por este post, ha sido de gran utilidad para mí, quisiera preguntar si hay alguna manera a través de CCS de quitar el mensaje que dice: el producto se ha añadido al carrito: ver carrito.
Ese mensaje, por alguna razón me aparece arriba de la foto principal del producto y de su título, por esa razón lo quisiera eliminar.
Enrique J. Ros dice
Hola Dina
Sí, por supuesto, puedes usar un display:none para ocultarlo.
Un saludo
Jesus dice
Hola amigo gracias, como podria ocultar el cuadro de cantidad que sale en el carrito de compras? gracias
Jesus dice
lo oculte con css .product-quantity {display:none} pero en la versión móvil me sigue apareciendo, que puedo hacer? gracias
Ana dice
Hola Enrique, gracias por tanta información en el post!
Yo tengo una duda y es que quiero seguir mostrando el producto agotado pero que no me aparezca el cuadro negro «sin stock» en el centro de la foto del producto. ¿Sería posible eliminarlo?
Mil gracias de antemano.
Enrique J. Ros dice
Hola Ana
Se puede ocultar con CSS.
Un saludo
anomalias dice
como saco del carrito y finalizar compra el precio total y subtotal??
leo buitrago dice
hola que tengo un problema con una categoria de producto la cual me esta apareciendo el contenido en la cabecera, agregue un codigo para pasarlo abajo de los productos pero me aparece en las dos partes. como puedo hacer la para quitarlo de la cabecera estoy usando el theme hestia.
Muchas gracias
Pedro dice
Hola enrique muy buen articulo, te queria preguntar si se puede hacer esto:
Estoy haciendo una tienda y quiero poner el SKU debajo del Precio de los productos, para ello que codigo tengo que poner y donde?
y tambien me gustaria cambiar SKU por REF. (mas español jeje)
(Ahora el SKU me sale debajo del boto del carrito en pequeño, seguido de la categoria y etiqueta)
Un saludo y espero tu respuesta
jesus castillo dice
Hola Enrique gracias por los aportes muy buenos, tengo un problema estaba desarrollando mi pagina y ahora no aparece el titulo del producto en la pagina de producto, mi tema es astra,gracias
Marta dice
Buenos días! Me ha encantado descubrir esta entrada. Andaba buscando como eliminar el nombre del producto en la ficha. Veo que has puesto todas las opciones menos esta. ¿Podrías ayudarme? Muchísimas gracias.
luis peña dice
Hola Enrique, excelente tus guías para nosotros los principiantes, una pregunta acabo de realizar un sitio de ejemplo en wordpress con storefront como tema, me aparecen las respectivas paginas pero cuando empiezo a navegarlas ya en tiempo de ejecución me aparece en la parte superior abajo del menú superior un icono de una casita y enseguida apunta a la pagina la cual abrí, si abro otra pagina del sitio sigue apareciendo el icono de home y apunta ahora a la nueva pagina que entre y aparece su respectivo nombre igual como aparece en el menú, mi pregunta es ¿hay forma de que no aparezca este icono junto con el nombre de la pagina en la cual me encuentro y sólo se quede visible el menú superior? de antemano agradezco tu tiempo. saludos
Enrique J. Ros dice
Hola Luis
Son las breadcrumbs o «migas de pan» de Storefront. Se pueden quitar usando este plugin gratuito.
Un saludo
Tomas Hernandez dice
Hola buenas noches.
Tengo una duda con referencia al tema de precios en woocommerce, estoy desarrollando una tienda y el cliente me solicita que no aparezca precio y en su lugar aparezca «A cotizar» pero no veo la manera de hacerlo por codigo inclui un add_filter en functions.php pero no se elimina del todo ya que en la pagina del carrito y el checkout lo sigue mostrando y quisiera que apareciera la palabra anteriormente mencionada aparezca en cada una de las secciones donde se muestra el precio.
Igualmente al añadir un shortcode para el producto individual para mostrar el botón de añadir al carrito me aparece un recuadro gris que no quisiera que aparezca. cualquier ayuda estaria agradecido.
Saludos cordiales
Enrique J. Ros dice
Hola Tomas
Lo que quieres hacer requiere bastante más que un simple add_filter. Hay plugins ya desarrollados para ello, echa un vistazo por ejemplo a éste.
Un saludo,
Emiliano dice
Hola, si lo que quiero es que no se vea el stock de un producto pero que esté disponible a la venta como es el código?
Ezequiel dice
Buenas tardes, estoy intentando ocultar el precio segun pais por ip o geolocalizacion..
Como podria hacerlo ?
Desde ya muchas gracias
Enrique J. Ros dice
Hola Ezequiel
Se puede hacer con este plugin
Un saludo
Salvador dice
Buenos dias Enrique
¿Hay forma de eliminar el precio de la pagina del producto , solo en el caso de que hayan variaciones?
Gracias.
Cesar dice
Hola buenas tardes. Muy buenos tus consejos. Pero me planteo lo siguiente.
Yo no quiero que la imagen de la galería de la tienda aparezca en la galería del producto. No se si me explico.
Pero temo que si oculto la imagen de la tienda en la galería del producto esta también se va eliminar como imagen principal del producto.
No se si me logro explicar. Lastima no puedo dejar una imagen aqui.
Ezequiel Munlz dice
Hola buenas, muchas gracias de antemano, tengo unprobñema y es que no quiero mostrar el stockaje a usuarios no registrados, podrias darme unas nociones o si no es mucho curro decirme como?
Saludos!?
Enrique J. Ros dice
Hola Ezequiel
Echa un vistazo a esto, puede serte útil para ello.
Un saludo
Alejandro dice
Hola, gracias por tus artículos, son de mucha ayuda… Quería preguntarte cómo eliminar de las paginas de archivos de productos (tienda, categorías, etc.) las variaciones de los productos ? Quiero que se vea el título, valoraciones, precio y botón de seleccionar opción pero NO las variaciones. O sea que las variaciones solo se vean en la pagina de producto. Muchas gracias!
Enrique J. Ros dice
Hola Alejandro
Eso puedes hacerlo mediante CSS personalizado.
Un saludo,
Calamuchita Portátil dice
Gracias por responder. Encontré como hacerlo con PHP, comparto el código:
// Ocultar peso y dimensiones de la página del producto
add_filter( ‘wc_product_enable_weight_display’, ‘__return_false’ );
add_filter( ‘wc_product_enable_dimensions_display’, ‘__return_false’ );
Saludos
Diana dice
Genial post! Muchas gracias!