Cómo editar las páginas de producto de Woo­Co­m­me­r­ce

A veces una página original e in­co­n­fu­n­di­ble de un producto es el factor decisivo para fomentar las ventas y el interés en tu tienda online. Ya que las funciones estándar de Woo­Co­m­me­r­ce dan poco margen para hacer destacar las páginas de productos ya definidas, los plugins como Sto­re­Cu­s­to­mi­zer, editores de página como Elementor y las funciones in­te­gra­das de WordPress son ne­ce­sa­rios para modificar los diseños y la co­n­fi­gu­ra­ción.

¿Por qué editar las páginas de producto de Woo­Co­m­me­r­ce?

El motivo por el que deberías editar las páginas de tus productos de Woo­Co­m­me­r­ce es claro: con un estilo in­di­vi­dual, una estética uniforme y un fu­n­cio­na­mie­n­to sencillo haces que tu tienda online sea fácil de reconocer y mejoras la pre­se­n­ta­ción de tus productos. Al igual que en los es­ca­pa­ra­tes de las tiendas físicas, cómo expongas los productos de tu web es casi tan im­po­r­ta­n­te como su calidad. Así los usuarios tomarán la decisión de comprar más rápido y con más seguridad.

Si sueles usar las páginas de producto de Woo­Co­m­me­r­ce, te habrás dado cuenta de que las opciones para ada­p­tar­las son limitadas, pero no tienes por qué ceñirte al estándar en la creación de tu tienda en línea. No obstante, como toquetear el código fuente para editar las páginas de productos es co­m­pli­ca­do y no está exento de riesgos, te re­co­me­n­da­mos mejor usar plugins gratuitos y funciones que ya están di­s­po­ni­bles en WordPress y Woo­Co­m­me­r­ce.

Resumen de métodos para editar las páginas de producto de Woo­Co­m­me­r­ce

Estas son las distintas formas que hay para editar las páginas de producto:

Con plugins (ejemplo con Sto­re­Cu­s­to­mi­zer)

La manera más sencilla de editar tu tienda online y páginas de productos es con plugins como SeedProd, Sto­re­Cu­s­to­mi­zer o Woo­Bui­l­der, que funcionan como editores de página. SeedProd es uno de los más populares, se actualiza re­gu­la­r­me­n­te y ya lo han instalado más de un millón de usuarios, aunque las funciones más im­po­r­ta­n­tes para la edición de páginas de producto solo están di­s­po­ni­bles en la versión Pro de pago. A co­n­ti­nua­ción, uti­li­za­mos Sto­re­Cu­s­to­mi­zer de ejemplo para que veas cómo editar tus páginas de producto de manera to­ta­l­me­n­te gratuita con un plugin de arrastrar y soltar. Ten en cuenta que con la tarifa gratuita de WordPress no puedes instalar ningún plugin.

Paso 1. Instala el plugin Sto­re­Cu­s­to­mi­zer desde la página oficial o di­re­c­ta­me­n­te desde la sección de descargas de plugins de WordPress. Una vez instalado, debes activar el plugin.

Paso 2. Ahora, en tu tienda de Woo­Co­m­me­r­ce ve a “Apa­rie­n­cia” y luego a “Editar” > “Sto­re­Cu­s­to­mi­zer” > “Página de tienda de Woo­Co­m­me­r­ce”. Hay varias funciones del plugin que pueden servirte para editar la página. Verás todas las funciones y co­n­fi­gu­ra­ción en la barra de menú a la izquierda; entre otros, el tamaño de fuente, los colores, el diseño de la página y su di­s­po­si­ción.

Paso 3. Una función im­po­r­ta­n­te que incluye Sto­re­Cu­s­to­mi­zer es la de borrar los elementos prei­n­s­ta­la­dos en Woo­Co­m­me­r­ce, como el nombre de tienda o la cla­si­fi­ca­ción de re­su­l­ta­dos. Para eliminar los elementos que quieras, solo has de marcarlos con un tic.

Paso 4. También puedes fijar el número de productos que quieres que se muestren por página o línea, y resaltar los productos nuevos con una “Nueva insignia para los productos añadidos re­cie­n­te­me­n­te”. Además puedes decidir cuánto tiempo se co­n­si­de­ran nuevos los artículos añadidos, y activar las es­ta­dí­s­ti­cas de venta de los productos en el frontend para destacar los más vendidos.

Paso 5. Usa las funciones del editor para modificar los botones de compra y la de­s­cri­p­ción de los productos o para cambiar los elementos de la página como los banners o los bordes de las páginas.

Paso 6. Sto­re­Cu­s­to­mi­zer permite pe­r­so­na­li­zar todos los elementos de una página de producto, también las pestañas del producto, el botón de cesta, el precio del producto, la foto, la cantidad de productos comprados, la de­s­cri­p­ción y la vi­sua­li­za­ción de productos similares o va­lo­ra­cio­nes de productos.

Sin plugins (con el Editor, Pe­r­so­na­li­zar y coding CSS)

Si no quieres instalar plugins in­ne­ce­sa­rios, puedes recurrir a tres funciones in­te­gra­das en WordPress. Las verás en el menú del panel en el lateral izquierdo: Editor, Pe­r­so­na­li­zar y CSS adicional.

Editor de WordPress

Con el editor integrado de página completa del editor de bloques de WordPress, puedes hacer cambios en las páginas de la tienda. Está en versión beta y sigue el principio de arrastrar y soltar. Los elementos de la página (secciones, imágenes o vídeos) pueden añadirse y editarse como bloques.

Paso 1. Haz clic en “Apa­rie­n­cia” y luego en “Editor” en la barra de menú que hay a la izquierda.

Paso 2. Para añadir un nuevo bloque de contenido, haz clic en el símbolo de más del editor.

Paso 3. Ahora verás una lista de bloques con di­fe­re­n­tes opciones de elementos de la página. Si quieres añadir un elemento nuevo a la página, haz clic en él y arrá­s­tra­lo al bloque co­rre­s­po­n­die­n­te. Puedes añadir texto, como párrafos, listas, tablas o citas.

Paso 4. Asimismo, puedes añadir contenido mu­l­ti­me­dia, distintas opciones de diseño y di­s­po­si­ción y widgets.

Pe­r­so­na­li­zar

La función “Pe­r­so­na­li­zar” te permite hacer cambios en la di­s­po­si­ción, el diseño y los elementos de tus páginas.

Entre los cambios que puedes hacer con “Pe­r­so­na­li­zar” están las distintas opciones de colores, fuentes y CSS pe­r­so­na­li­za­do.

CSS adicional

Con la opción “CSS adicional”, si sabes de coding, puedes hacer cambios ma­nua­l­me­n­te mediante CSS. Para ello deberías al menos aprender lo fu­n­da­me­n­tal de pro­gra­ma­ción o ya tener co­no­ci­mie­n­tos básicos. Para acceder a “CSS adicional” necesitas tener la tarifa Pro de pago de WordPress.com.

Con he­rra­mie­n­tas de edición de páginas

Si ya tienes un page builder de WordPress como Elementor o Divi, puedes apro­ve­char­los para co­n­fi­gu­rar las páginas de tus productos, pero primero debes ase­gu­rar­te de que tu page builder cuenta con funciones de bloques es­pe­cí­fi­cas para Woo­Co­m­me­r­ce. Por ejemplo, Elementor incluye pla­n­ti­llas prei­n­s­ta­la­das para Woo­Co­m­me­r­ce con las que puedes poner a punto la pre­se­n­ta­ción de tus productos en menos de lo que canta un gallo. Los page builders de calidad suelen ser de pago o solo ofrecer funciones para Woo­Co­m­me­r­ce en sus tarifas de pago.

Te re­co­me­n­da­mos algunos page builders potentes:

• Elementor
• Visual Composer
• WPBakery
• Oxygen
• Beaver Builder
• Divi

Ex­te­n­sio­nes y plugins de Woo­Co­m­me­r­ce útiles para páginas de productos

Woo­Co­m­me­r­ce cuenta con una multitud de ex­te­n­sio­nes y plugins para ampliar las funciones de tus páginas de productos. Te re­co­me­n­da­mos es­pe­cia­l­me­n­te los si­guie­n­tes:

• Add-ons para productos: con ac­ce­so­rios como Product Add-Ons puedes ofrecer otros servicios como envolver para regalo, mensajes pe­r­so­na­li­za­dos, grabados o donativos, entre otros. Quien visite tu página solo tendrá que poner un tic en el add on que quiera para añadir el servicio.
• Imágenes de producto al­te­r­na­ti­vas: si ofreces un producto en distintas versiones (ya sea colores, im­pre­sio­nes, tamaños o formas), es re­co­me­n­da­ble que integres imágenes al­te­r­na­ti­vas y galerías de imágenes. Puedes hacerlo con el plugin Ad­di­tio­nal Variation Images.
• Va­lo­ra­cio­nes y re­co­me­n­da­cio­nes: con una extensión como Re­co­m­me­n­da­tion Engine puedes incluir extras como reseñas, re­co­me­n­da­cio­nes de productos similares o artículos que suelen comprarse juntos.
• Vídeos de productos: por defecto solo puedes incluir fotos de productos, pero con he­rra­mie­n­tas como Product Video puedes añadir también vídeos de YouTube, Facebook o Vimeo donde demostrar cómo se usa un producto o cuál es su diseño.
• Insignias y etiquetas: si sueles lanzar ofertas y de­s­cue­n­tos re­gu­la­r­me­n­te, puedes re­sa­l­tar­las con insignias o etiquetas de un diseño concreto. Aquí merece la pena recurrir a un plugin como Product Badges.

In­fo­r­ma­ción para cualquier página de producto

Para crear una tienda online exitosa con WordPress, has de saber ciertas cosas sobre las páginas de productos. Los si­guie­n­tes puntos son im­po­r­ta­n­tes para la pre­se­n­ta­ción de un producto:

• Foto del producto: pon fotos propias pro­fe­sio­na­les de tus productos que coincidan con el estilo de tu tienda o que aporten un valor de re­co­no­ci­mie­n­to estético. Esto refuerza la confianza en tus productos. También es ideal mostrar tu producto desde distintas pe­r­s­pe­c­ti­vas, si es posible desde todos los lados.
• Título del producto: debe contener todos los datos im­po­r­ta­n­tes, que no­r­ma­l­me­n­te se mostrará en las SERP de los motores de búsqueda, así que ten en cuenta que debe parecer tentador.
• Precio, ofertas, costes de envío: el precio con IVA debe poder verse cla­ra­me­n­te. También deben estar a la vista los avisos de ofertas, de­s­cue­n­tos y costes de envío.
• De­s­cri­p­ción del producto: Aporta una de­s­cri­p­ción del producto que sea clara, detallada e incluya todos los datos im­po­r­ta­n­tes para que los clientes se convenzan de estar tomando la decisión adecuada.
• Otros datos sobre el producto o el envío: según el producto que sea, para hacer una compra informada será im­po­r­ta­n­te mencionar otros datos como peso, medidas, material u origen. Hay plugins que permiten calcular o mostrar las distintas opciones de envío o los costes de envío según el peso.
• Métodos de pago/checkout: ofrece a los usuarios de tu página la opción de pagar en Woo­Co­m­me­r­ce con los métodos de pago más usados para no perder una compra por falta de opciones de pago.
• Posición, color y tamaño del botón de compra: el botón de compra o botón de la cesta puede inclinar la balanza a tu favor. Idea­l­me­n­te debes colocarlo cerca del título y la imagen del producto y encima de la de­s­cri­p­ción. En ningún caso debe estar en la parte inferior de la página de manera que solo se pueda llegar a él bajando. Darle un color llamativo y un diseño plástico suele favorecer las ventas.
• Productos similares/cross sells: destinar una sección de la página a productos similares puede hacer que los clientes se decidan a comprar más al dar con al­te­r­na­ti­vas mejores. Además, esto permite mostrar más productos por página sin saturarla. Las cross sells, es decir los productos re­co­me­n­da­dos que se suman al producto mostrado, también pueden aumentar las ventas.
• Reviews/va­lo­ra­cio­nes: las eva­lua­cio­nes de otros clientes también suelen ser factores decisivos de compra. Sobre todo cuando un producto recibe una buena va­lo­ra­ción, no mostrarla en la página del producto (con estrellas o citas) es perder la opo­r­tu­ni­dad de vender más. Puedes integrar las reviews con los plugins de opiniones de WordPress, que servirán para animar a los co­m­pra­do­res a publicar sus propias va­lo­ra­cio­nes o a evaluar productos.

Co­n­clu­sión: Que tus páginas de productos sean in­co­n­fu­n­di­bles

WordPress y el plugin Woo­Co­m­me­r­ce son ambas potentes he­rra­mie­n­tas, pero no basta con usar los temas de WordPress, tener un diseño web con buenos colores o una gran selección de productos para que tu tienda online tenga éxito. Piensa en la pre­se­n­ta­ción de tus productos y crea páginas de producto modernas y claras con funciones ne­ce­sa­rias.

Usa plugins como Sto­re­Cu­s­to­mi­zer o SeedProd para editar tus páginas de productos en Woo­Co­m­me­r­ce y echa mano de potentes page builders como Elementor. Las funciones in­te­gra­das de WordPress como Editor, Pe­r­so­na­li­zar o CSS adicional también sirven para hacer cambios rápidos y efi­cie­n­tes. Y sobre todo, no olvides que una página de producto atractiva tiene que entrar a tus clientes por los ojos y co­n­ve­n­ce­r­les para llevar a un aumento de ventas.