WooCommerce almacena las descripciones de los productos en dos campos: la descripción completa del producto y la descripción corta. Puede agregar o recuperar ambos a través del administrador de WordPress, con PHP usando $product->get_description(), o personalizando el diseño de su tienda con un creador de páginas como SeedProd.
En esta guía, le mostraré cómo obtener y mostrar descripciones de productos en WooCommerce, incluido cómo:
- Escribir y agregar descripciones de productos de WooCommerce de la manera correcta
- Usar la descripción corta de WooCommerce en su página de tienda
- Personalizar páginas de productos con SeedProd, sin necesidad de código
¿Por qué son importantes las descripciones de productos de WooCommerce?
Los compradores visitan su tienda en línea por varias razones:
- Investigar lo que tiene para ofrecer
- Buscar un producto específico
- Compararle con alternativas
- Mirar escaparates
Si a los visitantes les resulta difícil obtener la información que necesitan, se irán de su sitio antes de comprar. Sin embargo, si ofrece a los compradores descripciones de productos únicas y detalladas, pueden encontrar rápidamente lo que buscan.
Las descripciones de productos de WooCommerce también animan a los clientes potenciales a hacer clic y obtener más información sobre sus productos.
Por ejemplo, si los usuarios ven una descripción corta del producto en su página de tienda, pueden hacer clic para leer la descripción completa. Desde allí, pueden:
- Conocer el precio
- Ver imágenes del producto
- Explorar especificaciones del producto
- Leer reseñas y valoraciones
Esa información puede persuadir a los usuarios a comprar el producto allí mismo.
Su próxima pregunta probablemente sea: "¿cómo agrego descripciones de productos en WooCommerce?". Siga leyendo para descubrirlo.
Cómo obtener descripciones de productos de WooCommerce con PHP
WooCommerce proporciona dos métodos PHP para recuperar descripciones de productos mediante programación: get_description() para la descripción completa y get_short_description() para la descripción corta. Los usará en plantillas personalizadas, funciones de temas secundarios o ganchos.
Aquí tiene el código completo para recuperar ambas descripciones para cualquier producto:
// Get the WooCommerce product object
$product = wc_get_product( $product_id );
// Get the full product description
$description = $product->get_description();
// Get the short product description
$short_description = $product->get_short_description();Ambos métodos devuelven cadenas HTML.
Por ejemplo: <p>Su texto de descripción.</p>.
WooCommerce almacena las descripciones a través del editor de WordPress. Muéstrelas con echo $description directamente en las plantillas. No use esc_html() aquí, ya que imprimiría las etiquetas HTML literalmente en lugar de renderizarlas.
Si está trabajando dentro de un bucle o gancho donde ya tiene la variable global $product, puede llamar a estos métodos directamente sin wc_get_product(). El patrón anterior es para recuperar descripciones fuera del bucle por ID de producto.
Cómo agregar una descripción de producto de WooCommerce (paso a paso)
Para agregar descripciones de productos en WordPress con WooCommerce, vaya a WooCommerce » Productos desde su panel de WordPress.
A continuación, puedes añadir un producto nuevo o editar la entrada de un producto existente.
Puedes introducir una descripción del producto en el editor principal de WordPress. Esta se mostrará como la descripción completa del producto en tu tienda.
A continuación, desplázate hacia abajo e introduce los detalles de tu producto en la sección Datos del producto, incluyendo:
- Tipo de producto
- Precio normal y precio en oferta
- Inventario
- Envío
- Productos vinculados
- Atributos
- Avanzado
Debajo de esa sección está la Descripción corta del producto. Esta es una versión más corta de tu descripción completa del producto que puedes mostrar para tentar a los usuarios a hacer clic.
No olvides añadir la categoría del producto y subir imágenes para tus productos. Luego puedes hacer clic en Actualizar o Publicar para que tus cambios se hagan efectivos.
¿Existe un código corto para las descripciones de productos en WooCommerce?
WooCommerce incluye un código corto que te permite mostrar la descripción corta de un producto en cualquier lugar de tu sitio: [product_short_description id="TU_ID_DE_PRODUCTO"]. Reemplaza TU_ID_DE_PRODUCTO con el ID numérico del producto, que encontrarás en la URL al editar el producto en wp-admin.
Por ejemplo, para mostrar la descripción corta del producto con ID 42 dentro de una página o entrada: [product_short_description id="42"]. Esto genera el campo de descripción corta como HTML dondequiera que coloques el código corto.
Una cosa a tener en cuenta: WooCommerce no muestra descripciones cortas o completas en tu página de tienda, páginas de categorías de productos o páginas de archivo por defecto. El código corto soluciona esto para páginas individuales donde lo colocas manualmente. Para una solución que funcione en todo el diseño de tu tienda sin pegar códigos cortos en cada página, consulta las secciones siguientes.
Cómo obtener y mostrar descripciones de productos en WooCommerce con SeedProd
Añadir descripciones de productos personalizadas a WooCommerce es muy fácil con SeedProd.
SeedProd es el mejor constructor de sitios web y plugin de páginas de destino para WordPress. Te permite crear temas personalizados de WordPress, sitios de WooCommerce y diseños de sitios web flexibles sin código.
Es fácil empezar con más de 180 plantillas de páginas de destino y más de 25 temas de WordPress prediseñados. Puedes personalizar cada diseño en el constructor visual de páginas de arrastrar y soltar de SeedProd.
Personalizar tu tienda online no lleva tiempo con los bloques y secciones personalizables de SeedProd. Puedes mostrar productos de WooCommerce fácilmente con etiquetas de plantillas de WooCommerce y personalizarlos señalando y haciendo clic.
Incluso puedes usar SeedProd para crear sitios de comercio electrónico completos con páginas de productos únicas, carritos de compra, pago, archivos y páginas de tienda. El plugin es ultrarrápido y no tiene sobrecarga, lo que garantiza que tu sitio funcione rápidamente para los visitantes del sitio web.
Sigue los pasos a continuación para obtener descripciones de productos en WooCommerce y mostrarlas con SeedProd.
Paso 1. Instalar el constructor de sitios web SeedProd
Primero, descarga el archivo del plugin SeedProd a tu ordenador.
Nota: Existe una versión gratuita de SeedProd, pero usaremos el plan Elite de SeedProd para las funciones de WooCommerce.
A continuación, instala y activa SeedProd en tu sitio web de WordPress. Puedes seguir esta guía sobre cómo instalar un plugin de WordPress si necesitas ayuda.
Después de instalar SeedProd, ve a SeedProd » Ajustes e introduce tu clave de licencia.
Puedes encontrar tu clave de licencia iniciando sesión en tu cuenta de SeedProd y haciendo clic en la pestaña Descargas.
Ahora, introduce tu clave en el campo de texto y haz clic en el botón Verificar clave.
Paso 2. Crea un tema personalizado de WooCommerce
Para usar las funciones de WooCommerce de SeedProd, necesitarás crear un nuevo tema de WordPress con SeedProd. Esto reemplazará tu tema actual con un diseño personalizado, y es fácil de hacer, incluso para principiantes.
Para ello, ve a SeedProd » Theme Builder y haz clic en el botón Temas.
A continuación, verás la biblioteca de SeedProd de plantillas de sitios web pre-diseñadas. Cuando encuentres una plantilla que te guste, pasa el ratón por encima y haz clic en el icono de la marca de verificación.
Después de importar tu tema, SeedProd creará todas las partes de la demostración del tema.
Nota: Nos referimos a las partes individuales de un tema como "plantillas".
Al hacer clic en cada plantilla, se abrirá en el editor de arrastrar y soltar de SeedProd, donde puedes personalizar el contenido y el diseño.
La primera plantilla que editaremos en este tutorial es la Página de Producto. Cuando los visitantes hagan clic en un producto de tu tienda, verán la página del producto con los detalles de ese artículo.
Paso 3. Edita la plantilla de la página de producto
Para personalizar tu página de producto, pasa el ratón sobre la plantilla de Página de Producto y haz clic en el enlace Editar diseño.
La plantilla se abrirá en el editor visual de arrastrar y soltar de SeedProd, donde puedes hacer clic para cambiar el diseño y la disposición.
Primero, veamos cómo añadir una descripción corta del producto a tu página.
En el lado izquierdo de tu pantalla, busca la sección Etiquetas de plantilla de WooCommerce y arrastra el bloque Descripción corta a tu diseño.
La salida de WooCommerce para este bloque usa por defecto la etiqueta de descripción corta, pero puedes personalizarla para adaptarla a las necesidades de tu tienda. También puedes personalizar el aspecto de la descripción en la configuración del bloque.
Por ejemplo, puedes cambiar la alineación de la descripción, el tamaño de la fuente e insertar texto dinámico.
En la pestaña Avanzado, puedes personalizar los estilos del bloque, incluidos los colores, las fuentes, el espaciado, etc.
Puedes seguir pasos similares para añadir descripciones largas a las páginas de producto. Simplemente arrastra el bloque Contenido del producto desde el panel izquierdo y suéltalo en su lugar.
Como antes, puedes personalizar el contenido, el estilo y los colores con unos pocos clics.
Nota: No verás una vista previa del bloque Contenido del producto en el editor en vivo.
Paso 4. Personaliza el resto de tu sitio de WooCommerce
Despu ilde{s} de a tilde{a}dir descripciones de productos a tu p ilde{a}gina, puedes seguir personalizando el resto de tu tienda. Simplemente haz clic en el enlace Editar dise ilde{n}o en cualquier plantilla para cambiar el contenido que muestra y su apariencia.
Por ejemplo, puedes:
- Personalizar p ilde{a}ginas de categor ilde{i}a de productos
- Mostrar productos destacados
- A tilde{a}dir una barra lateral personalizada de WordPress
Tendr ilde{a}s una tienda WooCommerce completamente personalizada, lista para convertir compradores en clientes cuando hayas terminado.
Paso 5. Publica tu sitio web de WooCommerce
Cuando est ilde{e}s contento con tu nuevo dise ilde{n}o, es hora de hacerlo p ilde{u}blico.
Para ello, dir ilde{i}gete a la p ilde{a}gina SeedProd » Theme Builder y, en la esquina superior derecha, haz clic en el interruptor Activar tema de SeedProd hasta que est ilde{e} en la posici ilde{o}n "activado".
Ahora puedes previsualizar cualquier producto en tu sitio y ver las descripciones cortas y largas en acci ilde{o}n.
As ilde{i} es como se ver ilde{a} tu descripci ilde{o}n corta:
Y as ilde{i} es como se ver ilde{a} la descripci ilde{o}n larga dependiendo de tu dise tilde{o}:
C ilde{o}mo mostrar descripciones de productos en la p ilde{a}gina de la tienda de WooCommerce
WooCommerce no muestra descripciones cortas ni completas en la p ilde{a}gina de la tienda, las p ilde{a}ginas de categor ilde{i}a o las p ilde{a}ginas de archivo de forma predeterminada. Para mostrar descripciones en esas p ilde{a}ginas, tienes tres opciones.
Opci ilde{o}n 1: SeedProd (sin c ilde{o}digo)
Las plantillas de p ilde{a}ginas de archivo de productos de SeedProd te permiten personalizar tus p ilde{a}ginas de tienda y categor ilde{i}a en el editor visual.
A tilde{a}de el bloque Descripci ilde{o}n corta a tu plantilla de p ilde{a}gina de tienda y se mostrar ilde{a} debajo de cada producto en la cuadr ilde{i}cula, sin necesidad de c ilde{o}digo.
Este es el mismo enfoque que se cubre en la secci ilde{o}n de SeedProd anterior, aplicado a las plantillas de p ilde{a}ginas de archivo en lugar de a las p ilde{a}ginas de productos individuales.
Opci ilde{o}n 2: Complemento de descripci ilde{o}n de producto de WooCommerce en la p ilde{a}gina de la tienda
El complemento WooCommerce Product Description on Shop Page es un complemento gratuito de WordPress que a tilde{a}de opciones de visualizaci ilde{o}n de descripciones a la configuraci ilde{o}n de tu p ilde{a}gina de tienda. Inst ilde{a}lalo, act ilde{i}valo y configura qu ilde{e} tipo de descripci ilde{o}n aparece en la cuadr ilde{i}cula de productos.
Opci ilde{o}n 3: Hook de PHP (enfoque de desarrollador)
Si prefieres una soluci ilde{o}n basada en c ilde{o}digo, el siguiente fragmento a
tilde{a}de la descripci ilde{o}n corta debajo de cada t ilde{i}tulo de producto en la p ilde{a}gina de la tienda. Familiar ilde{i}zate con c ilde{o}mo a
tilde{a}dir fragmentos de c ilde{o}digo a WordPress antes de usar este enfoque, o utiliza un complemento de fragmentos de c ilde{o}digo para a
tilde{a}dirlo de forma segura.
/**
* SeedProd - Add short description to products listing on shop page (only)
*/
add_action( 'woocommerce_after_shop_loop_item_title', 'sp_wc_add_short_description' );
function sp_wc_add_short_description() {
if( is_shop() ){
global $product;
?>
<div class="woocommerce-loop-product-description">
<?php echo apply_filters( 'woocommerce_short_description', $product->get_short_description() ) ?>
</div>
<?php
}
}Al previsualizar tu p ilde{a}gina de tienda de WooCommerce, ver ilde{a}s las descripciones de los productos encima del bot ilde{o}n "a tilde{a}dir al carrito".
Soluci ilde{o}n de problemas: La descripci ilde{o}n del producto no se muestra en WooCommerce
Si la descripci ilde{o}n de tu producto no se muestra donde esperas, las causas m ilde{a}s comunes son:
- Usar el tipo de descripci ilde{o}n incorrecto (la descripci ilde{o}n completa frente a la descripci ilde{o}n corta se muestran en diferentes ubicaciones)
- Un tema que anula los archivos de plantilla predeterminados de WooCommerce,
- El comportamiento predeterminado de WooCommerce (las descripciones cortas solo aparecen en las p ilde{a}ginas de productos individuales, no en las p ilde{a}ginas de tienda o categor ilde{i}a de forma predeterminada).
Comprueba qu ilde{e} descripci ilde{o}n has rellenado en el editor de productos y comp ilde{a}rala con el lugar donde esperas verla.
Si estás utilizando un tema personalizado, comprueba si incluye el hook de acción woocommerce_short_description o el contenedor .woocommerce-product-details__short-description en la plantilla del producto individual.
Más Formas de Personalizar WooCommerce
Hay muchas otras formas de personalizar cómo WooCommerce muestra tus productos. Para más personalizaciones de WooCommerce, consulta las siguientes guías:
- Cómo Personalizar la Pestaña de Información Adicional de WooCommerce
- Cómo Añadir el Botón Ver Carrito en WooCommerce
- Cómo Cambiar el Título de la Página de Tienda en WooCommerce
- Cómo Crear una Impresionante Galería de Imágenes de Producto en WooCommerce
- Cómo añadir valoraciones de estrellas a las páginas de productos de WooCommerce
- Cómo mostrar productos relacionados en WooCommerce
- Cómo mostrar categorías y etiquetas de productos en WooCommerce
- Cómo solucionar que la vista del carrito de WooCommerce no funcione
- Cómo ocultar productos sin stock en WooCommerce
Preguntas frecuentes sobre la descripción de productos de WooCommerce
¿Cuál es la diferencia entre la descripción de un producto de WooCommerce y una descripción corta?
WooCommerce tiene dos campos de descripción. La descripción completa del producto aparece en la pestaña principal del editor debajo del título del producto y se muestra en una pestaña o sección dedicada en la página del producto individual. La descripción corta es un resumen breve introducido en el campo Descripción corta del producto. Aparece debajo del título del producto y encima del botón Añadir al carrito por defecto. Ninguna de las dos se muestra en las páginas de tienda o de categoría a menos que las añadas con un plugin, código o un constructor de páginas como SeedProd.
¿Cómo muestro la descripción del producto en la página de la tienda de WooCommerce?
WooCommerce no muestra descripciones en la página de la tienda por defecto. Tienes tres opciones: usar las plantillas de archivo de productos de SeedProd para añadir un bloque de Descripción corta a tu diseño de página de tienda sin código, instalar el plugin WooCommerce Product Description on Shop Page, o añadir un hook de PHP usando la acción woocommerce_after_shop_loop_item_title con $product->get_short_description().
¿Por qué no se muestra la descripción de mi producto de WooCommerce?
Las razones más comunes son: has rellenado el campo de descripción incorrecto (las descripciones completas vs. cortas aparecen en lugares diferentes), tu tema anula las plantillas predeterminadas de WooCommerce, o esperas que una descripción aparezca en una página donde WooCommerce no la muestra por defecto. Comprueba qué campo has rellenado, confirma dónde se supone que debe mostrarse ese campo y verifica que tu tema no esté suprimiendo la salida.
¡Ahí lo tienes!
Esperamos que este artículo te haya ayudado a aprender cómo obtener descripciones de productos en WooCommerce y mostrarlas a tus clientes.
SeedProd incluye todo lo que necesitas para personalizar cualquier parte de tu sitio web WordPress y tu tienda WooCommerce. Incluso puedes usar SeedProd para lanzar sitios web de clientes como hizo Mustard Seed en este estudio de caso.
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
