Mejorar Woocommerce PDF

MEJORANDO
APRENDE CÓMO MEJORAR AÚN MÁS

EL MEJOR PLUGIN DE ECOMMERCE
PARA WORDPRESS
ENRIQUE J. ROS
Índice de contenidos
Agradecimiento 3
Servicio de mantenimiento web y soporte profesional WP 4
1. Mejorando la ficha de producto 5
Mejorar las imágenes de producto 6
Mejorar el selector de variaciones 12
Pestaña personalizada con formulario de consulta 18
2. Potenciando las ventas 26
Añadir una lista de deseos 27
Productos vinculados: up-sells y cross-sells 34
Destacar productos en WooCommerce 38
Mejorar los productos relacionados 43
Mejorar las búsquedas 49
Copyright © 2016 Enrique J. Ros

Todos los derechos reservados
Queda expresamente prohibida la reproducción total o parcial de este libro o sus contenidos
(texto e imágenes) por cualquier medio electrónico o mecánico, sin la autorización por escrito
del autor.
Agradecimiento
Permíteme, antes de empezar, dedicar unas pocas palabras a darte las

gracias por descargarte este ebook. Espero no defraudarte y que te guste
y, sobre todo, que te resulte de mucha utilidad.
Tanto si es así como si no, te animo también a darme tu opinión. Todas

son bienvenidas y me ayudan a mejorar. Puedes contactarme mediante
email a enrique@enriquejros.com o a través de este formulario de con-
tacto.
También puedes contactar conmigo a través de las redes sociales:
@enriquejros
+EnriqueJRos
/enriquejros
De nuevo, gracias
Enrique J. Ros
SERVICIO DE MANTENIMIENTO WEB Y
SOPORTE PROFESIONAL WORDPRESS
¿Tienes a quien acudir cuando necesitas ayuda, asesoramiento técnico y

soporte para tu web?
Tu web es la imagen de tu marca ante tus clientes, quizá tu medio de ingre-

sos, y no puede fallar. Enfócate sólo en lo que realmente es productivo para
ti y deja tu web en manos profesionales. El Servicio de Mantenimiento Web
Profesional y Soporte WordPress incluye:
MANTENIMIENTO Y SOPORTE TÉCNICO RESOLUCIÓN DE EMERGENCIAS WORDPRESS
Actualizaciones de core, plugins y plantillas Error No disponible por mantenimiento

Integración y mantenimiento con Google programado
Webmaster Tools Recuperación desde copia de seguridad
Monitorización de errores 404 Recuperación y limpieza de web hackeada
Monitorización de enlaces rotos Errores 404 en todas las páginas
Comprobación de las alertas de seguridad Error estableciendo una conexión con la
Copias de seguridad periódicas base de datos
Corrección de errores de programación Error Fatal error: Allowed memory size
Mantenimiento y limpieza de base de dato Error 500 Internal Server Error
Alerta inmediata ante caídas del servidor Error 503 Service Temporarily Unavailable
Soporte y asesoramiento técnico Error ¿Seguro que quieres hacer esto?
Informe y control mensual del servicio Pérdida del acceso al panel de control
TU WEB EN MANOS EXPERTAS POR MUY POCO AL MES
¿Suena bien? Contáctame y hablamos.

1. MEJORANDO LA
FICHA DE PRODUCTO
MEJORAR LAS IMÁGENES DE PRODUCTO
Si estás leyendo este capítulo debe ser porque te has dado cuenta que el
modo en que WooCommerce muestra las imágenes por defecto no es el más
adecuado, y quieres mejorar las imágenes de producto. ¡Bien por ti! Eso te
ayudará a subir las ventas en tu ecommerce.
Por defecto cuando pinchas en la imagen de producto ésta se abre en una

lightbox, tapando la pantalla y oscureciendo el resto del contenido. Esto tam-
bién ocurrirá con el resto de imágenes asociadas al producto.
Esto no es, desde luego, lo más deseable, ya que está tapando el contenido,
sin contar con que, si la imagen es aún más grande que la pantalla, al am-
pliarla más se saldrá de sus límites.
Además la navegación a través del carrusel de imágenes del producto se

realiza mediante flechas, que aparte de suspender en usabilidad es de lo más
incómodo en dispositivos móviles, cada vez más utilizados y que ya superan
en navegación (al menos en España) a los ordenadores.
Por eso vamos a comenzar a mejorar nuestro WooCommerce por este as-
pecto, y lo vamos a hacer con el plugin YITH WooCommerce Zoom Magni-
fier, que nos permitirá mejorar ese aspecto de una forma fácil, rápida y eficaz.
Mejorando WooCommerce 6 www.enriquejros.com

YITH WooCommerce Zoom Magnifier
Nada más activarlo ya observamos que la forma en que se aumentan las

imágenes cambia radicalmente. Si ahora pasamos el puntero (incluso sin pin-
char) sobre la imagen del producto veremos algo así:
Bueno, la cosa ha mejorado algo, pero no demasiado. Ya no se oscurece la

pantalla, y la zona alrededor del puntero se muestra ampliada, y podemos
moverla en la dirección que queramos para ver en zoom distintas zonas del
producto.
Sin embargo el área ampliada se muestra a la derecha, y eso no es lo más

ideal, ya que está tapando información muy importante: el nombre del pro-
ducto, las variaciones (si se trata de un producto variable, como en el ejem-
plo), la descripción corta y el precio. ¡Queremos que nuestro cliente tenga
esa información a la vista en todo momento!
Afortunadamente, esto tiene fácil solución. Basta con ir a YITH Plugins →

Zoom Magnifier → Magnifier settings y, en la opciones Zoom Box Position y
Zoom Box Position for mobile devices cambiar la opción a Inside. El resultado
cambia ahora radicalmente:

Ahora el zoom de la imagen del producto se muestra encima de la propia
imagen. Mucho mejor, ¿verdad?
No sólo ha mejorado eso, sino que ahora si tenemos varias imágenes para
el producto, al pinchar sobre una de las imágenes en el carrusel ocupará el
lugar de la principal, pudiendo hacer zoom sobre cualquiera de ellas.
YITH WooCommerce Zoom Magnifier tiene bastantes más opciones, algunas

muy interesantes. Vamos a ver las más importantes.
Opciones generales
Bien, en este primer apartado de opciones generales encontramos tres op-

ciones de configuración:

La primera de ellas solamente sirve para activar o desactivar el efecto del plu-
gin sin llegar a desactivar el plugin propiamente dicho. Normalmente la ten-
drás que dejar activada, a no ser que queramos probar puntualmente alguna
cosa con las imágenes sin desactivar el plugin.
En la segunda opción podemos elegir si queremos que los efectos de zoom

y de carrusel se muestren también en dispositivos móviles. Esto va al gusto,
aunque lo ideal es dejarlo también activado: el lightbox que WooCommerce
tiene por defecto no es muy cómodo en móviles.
La tercera es para gestionar el modo en que el plugin controla el tamaño de

las imágenes: si lo desactivas, tú eres el responsable de decirle qué tamaño
debe aplicar. Lo recomendable es dejarlo activado, a no ser que sepas lo que
haces (y por qué lo haces).
Configuración de la lupa
En el siguiente apartado nos encontramos las opciones para configurar la

lupa.
En estas opciones podemos definir, lo primero de todo, el tamaño de la caja

de aumento (ancho y alto). Lo mejor es dejar ambas opciones en auto, de

forma que se encaje en el espacio asignado por nuestra plantilla a la imagen.
La siguiente opción es para establecer el tamaño que tendrá la imagen dentro

de la caja de aumento. Por defecto viene marcado un tamaño de 600×600,
que es el recomendable. De todos modos si quieres cambiarlo (no te reco-
miendo subirlo mucho más y ni mucho menos bajarlo) recuerda que deberás
desactivar la última opción del primer apartado.
A continuación vienen las opciones para elegir, tal como hemos visto en el
vídeo, la posición de la caja de zoom: a la derecha de la imagen principal o
“dentro” de ella. Primero para ordenadores de escritorio y portátiles y después
para dispositivos móviles.
Tras elegir el texto que se mostrará mientras se carga la imagen, podemos

escoger la opacidad de la lente y si le aplicamos un efecto de emborrona-
miento al lugar por donde estamos pasando el ratón. Estas dos opciones sólo
tendrán efecto, evidentemente, si hemos elegido que la caja de aumento esté
a la derecha de la imagen de producto. Si la tenemos “dentro” de ella, el efecto
quedará oculto por el propio aumento y no se mostrará.
Configuración del carrusel
Y por último tenemos las opciones de configuración para el carrusel, es decir,

cómo se comportará la galería de imágenes del producto:
La primera opción activa o desactiva el carrusel (si lo desactivamos queda

como lo muestra WooCommerce por defecto), mientras que la segunda op-
ción “encaja” dinámicamente el carrusel en su sitio. Sólo tendrás que desacti-

varla si quieres personalizar la posición o el modo en que se muestra dentro
de tu plantilla (márgenes, etcétera).
A continuación podemos elegir el número de imágenes que se mostrarán en

la galería. Podemos tener todas las imágenes del producto que queramos,
pero mostrar sólo tres (o cuatro, o dos, o las que quieras) y que el resto vayan
apareciendo según avance el carrusel.
Las dos últimas opciones nos permiten elegir si queremos que el carrusel sea
circular (tras la última imagen vuelve a aparecer la primera) o infinito. Fíjate
que un carrusel circular siempre será infinito (por su propia naturaleza), pero
se puede elegir un carrusel no circular pero infinito, es decir, que cuando
llegue a la última imagen automáticamente “rebobine” de nuevo hasta la pri-
mera. Es un efecto curioso.
Por último, te recuerdo que WordPress, por defecto, reduce en un 18% la ca-
lidad de las imágenes subidas a la biblioteca de medios. Si quieres que tus
imágenes de producto queden perfectas (algo absolutamente necesario para
vender) puedes configurar ese valor mediante código o con un plugin según
explico en este artículo.

MEJORAR EL SELECTOR DE VARIACIONES
Como veíamos en el capítulo anterior, en una tienda online es muy impor-
tante tener las fichas de producto muy optimizadas, ya que es lo que el visi-
tante está viendo mientras decide si realiza o no la compra.
Ya hemos visto en ese capítulo cómo mejorar las imágenes de producto en

WooCommerce, y en éste vamos a realizar otra mejora en la ficha de produc-
to: el selector de variaciones.
El selector de variaciones en los productos variables
En los productos variables el usuario puede seleccionar una variación u otra

mediante un menú desplegable… bastante feo y poco usable:
Como ves, este menú permite elegir una u otra variación y la imagen del pro-
ducto se actualiza. También cambia el producto activo, y en cada momento
el botón Añadir al carrito permitirá comprar la variedad seleccionada.
Sin embargo, en primer lugar, no permite al usuario ver las variaciones dis-
ponibles hasta que no ha desplegado el menú. Además, para cambiar de una
a otra, tendrá que volver a desplegarlo cada vez. Demasiado trabajo para al-

guien que está pensando si comprar o no…
Dos formas de crear variaciones
Si trabajas habitualmente con productos variables ya sabrás que las variacio-

nes se pueden añadir en la misma pantalla de edición del producto.
Pero si las variaciones son comunes en muchos productos de la tienda es

una forma poco eficiente. Por ejemplo, si la tienda es una zapatería la mayo-
ría de los artículos tendrán como variaciones las tallas de los zapatos, o si es
una tienda de ropa muchas prendas variarán en talla (S, M , L) y/o en color.
Cuando sucede esto es más eficiente añadir las variaciones en el menú Pro-
ductos → Atributos. Ahí podemos añadir atributos que estarán disponibles a
partir de ese momento para cualquier producto que creemos o editemos en
la tienda.
Una vez creado el atributo, la rueda dentada que aparece a la derecha (como
puedes ver en la imagen superior) permite acceder a la pantalla que te per-
mitirá añadir las variaciones:

A partir de ahora estas variaciones estarán disponibles para cualquier produc-
to variable que crees en la tienda. De esta forma a cada uno de los productos
puedes añadirle algunas (o todas, o ninguna) de las variaciones creadas con
un sólo click, sin tener que ir creándolas en cada uno de ellos.
Cambiar el selector de variaciones
Como decía más arriba, el selector que pone WooCommerce para eso es un
menú desplegable bastante feo y poco usable: para cambiar la selección el
usuario tiene que desplegar el menú y buscar la variación deseada. Dos pasos
son demasiados, ya sabes que siempre hay que minimizar las acciones que
tiene que hacer un usuario para realizar una compra.
Aquí es donde entra en juego el plugin Color and Image Swatches for Varia-
ble Product Attributes. Este plugin permite cambiar ese selector de variacio-
nes por otro como éste:

Vaya diferencia, ¿verdad? De esta forma el usuario puede ver de un sólo vis-
tazo todas las variedades disponibles (sin necesidad de desplegar el menú) y
puede seleccionar una u otra simplemente pinchando en el cuadro corres-
pondiente. De un sólo click.
Vamos a ver cómo podemos conseguir esto.
Selector de color
Es bastante sencillo conseguirlo. Al activar el plugin se añade una nueva op-

ción en la pantalla en la que se añaden las variaciones a los atributos gene-
rales, en Productos → Atributos → Configurar términos (la rueda dentada al
lado de cada atributo).
Se trata de un desplegable que te permitirá elegir el tipo de selector (Swatch

Type). Aunque en realidad sólo tiene dos opciones: Ninguno (None) o Color.
Al elegir color se abre un selector de colores. Si pinchas en él podrás elegir el

color en el cuadro de degradado, poniendo directamente el código hexade-
cimal (HTML) del color o bien eligiendo uno de los ocho colores básicos. Muy
sencillo.

El color que elijas se mostrará entonces como miniatura (Thumbnail) del atri-
buto, y es la que se mostrará en el selector en la pantalla de producto en la
tienda. Como ves, más sencillo no puede ser.
Selector de talla
Como hemos visto más arriba, este plugin admite dos tipos de selector: color
y “ninguno”. Y es que efectivamente en el resto de atributos que no sean color
lo que mostrará será una pequeña caja de texto:

Como ves sigue manteniendo el buen aspecto y las ventajas del selector de
color, con la ventaja adicional de que este modo de selector vale para cual-
quier atributo que quieras poner.
Productos variables con más de un atributo
Ya rizando el rizo, tenemos los productos variables con más de un atributo. En

este caso seleccionar las variaciones según viene por defecto en WooCom-
merce puede ser un auténtico martirio para los clientes, puesto que ahora
cuentan con múltiples menús desplegables. Una auténtica aberración:
Sin embargo con este plugin la ficha de producto se transforma, como por
arte de magia, en esto otro:
Como ves, mucho más intuitivo y visual. Justo lo que hace falta para mejorar
el proceso de venta y, por tanto, aumentar conversiones.

PESTAÑA PERSONALIZADA
CON FORMULARIO DE CONSULTA
Ya hemos visto cómo ir mejorando poco a poco la ficha de producto en
WooCommerce añadiendo un selector de variaciones en los productos va-
riables o mejorando la forma en que se muestran las imágenes. Ahora vamos
a seguir mejorándola aprendiendo a añadir pestañas personalizadas en la
ficha de producto.
Además, vamos a realizar paso a paso un ejemplo práctico añadiendo una

pestaña que contenga un formulario de contacto para que, desde la propia
ficha, el cliente pueda directamente consultarnos cualquier duda que tenga
respecto al producto.
Añadir pestañas personalizadas en la ficha de producto
Como ya sabes, por defecto WooCommerce incluye dos pestañas en la ficha

de producto: la de descripción y la de valoraciones. Sin embargo muchas ve-
ces necesitaríamos añadir otras, como una que especifique, por ejemplo, los
materiales o las características técnicas del producto (en lugar de mezclarlo
con la descripción), los accesorios disponibles, etc.
Esto lo podemos conseguir fácilmente gracias al plugin gratuito WooCom-

merce Product Tabs. En estos momentos lleva sin actualizar más de un año,
pero yo lo utilizo habitualmente y funciona a la perfección, incluso con la
versión más reciente de WordPress (en estos momentos la 4.5.2).
Su uso es realmente sencillo pero a la vez muy potente. Una vez instalado y
activado te aparecerá en el menú la opción WooCommerce → Product Tabs.
En él verás una pantalla similar a la de las entradas o los productos, titulada
Tabs, pero con algunas diferencias.
Cada “entrada” (en realidad su nombre correcto es custom post types o CPT
(tipos de entrada personalizadas) que añadas aquí será una nueva pestaña en
la ficha de producto, y la interfaz es muy similar a la que ya conoces de, como
digo, entradas o productos.

Configuración de la pestaña
Los campos principales ya los conoces de sobra: título y contenido. El título

que le pongas será el que se muestre como nombre de la pestaña. En cuanto
al contenido, si lo dejas vacío la pestaña no se mostrará en la ficha de produc-
to, algo sin duda muy inteligente.
Lo que sí encontramos son algunas opciones nuevas en esta interfaz, especí-

ficas de este CPT. Vamos a repasarlas porque nos permitirán configurar todos
los aspectos de nuestra pestaña.
Categorías
Bajo la ventana de descripción encontrarás otra titulada Conditions. Lo que

puedes elegir en ella son las categorías de productos que mostrarán esta pes-
taña.
Es decir, puedes crear distintas pestañas para categorías distintas de produc-

tos, lo cual es todo un acierto, ya que no todos los tipos de producto nece-
sitan el mismo contenido en la ficha. Estoy seguro de que ya tienes en la
cabeza una forma útil de aplicar esta característica en tu propio comercio
electrónico en función de las categorías que tienes.

Visibilidad
A la derecha encontramos un widget titulado Tab: Settings, con dos opcio-

nes. La primera (Check to display default content in all products) es un cuadro
que deberemos marcar si lo que queremos es que, por defecto, la pestaña
aparezca en todos los productos de la tienda. Así nos ahorramos de ir selec-
cionando todas las categorías.
Y, bajo esta opción, encontrarás un selector numérico para elegir la prioridad

de la pestaña, que es lo que nos permitirá elegir el orden en que aparecerá la
pestaña en la ficha de producto:
∞ Las pestañas con prioridad 1 a 10 aparecerán antes (es decir, por delan-
te) de la pestaña Descripción
∞ Si estableces la prioridad entre 11 y 30 la pestaña aparecerá entre las de
Descripción y Comentarios
∞ Las pestañas con prioridad menor (es decir, 31 o más) aparecerán des-
pués de esas dos
Por supuesto, esto también te permite disponer las pestañas que tú crees en
el orden que quieras, jugando con prioridades. Una pista: no las numeres de
forma consecutiva, sino a saltos. Así si alguna vez decides incluir una pestaña
entre medias de dos ya existentes podrás utilizar el hueco, en lugar de tener
que rehacer todas las numeraciones.
Pestaña personalizada con formulario de contacto
Ya hemos visto de qué pueden añadirse pestañas (todas las que quieras), y
como has podido observar es muy sencillo.
Vamos a realizar ahora un caso práctico, muy útil, viendo paso a paso cómo
crear una nueva pestaña en la ficha de producto que llamaremos ¿Alguna
duda? ¡Consúltanos! y que contenga un formulario de contacto mediante el
que el cliente pueda, sin necesidad de salir de la ficha de producto, enviarnos
consultas con cualquier duda que pueda tener acerca del producto que está
viendo.
Creando el formulario para consulta de dudas
Lo primero es, por supuesto, crear el formulario de contacto. Para ello vamos
a usar el plugin gratuito Contact Form 7.

Puede que ya lo tengas incluso instalado y funcionando para tu formulario de
contacto, porque es el plugin más extendido para esta funcionalidad.
El siguiente paso es crear el formulario propiamente, así que sólo tenemos

que ir a Contacto → Añadir nuevo. Le ponemos al formulario el título que
creas más conveniente. En el ejemplo le he puesto Formulario de consultas.
Como puedes ver, al crear un formulario nuevo viene ya con unos campos
predefinidos. Podemos eliminar el de “asunto”, puesto que el asunto es una
consulta sobre el producto. Enseguida veremos cómo vamos a saber cuál es
el producto que el cliente estaba visitando. Por lo tanto dejaremos el formu-
lario más o menos así (he cambiado un poco los textos, los que viene por
defecto son muy fríos):
¿Cuál es tu nombre? (requerido) 

[text* your-name] 
¿A qué email te contestamos? (requerido) 

[email* your-email] 
¿Cuál es tu duda sobre este producto? 

[textarea your-message] 
[submit “Enviar”]
Recuerda que, si estás en España, debes hacer algún cambio adicional para

adaptar el formulario a la LOPD (la Ley de Protección de Datos) y cumplir la
ley. Cómo hacerlo lo explico en este vídeo (básicamente se trata de añadir
una casilla de verificación con un enlace a la política de privacidad de tu sitio
web).
Aún tenemos que hacer algunos cambios más ya que, cómo digo más arriba,
cuando un cliente nos mande una consulta sobre un producto tendremos
que saber de qué producto está hablando. Para ello pinchamos en la pestaña
que dice “Correo electrónico”. El campo “De” suelo cambiarlo para que ponga
[your-name] <[your-email]>
Así nuestro gestor de correo electrónico considera que el email ha llegado

directamente de la dirección de email que el cliente ha indicado, y si inter-
cambiamos varios emails quedan todos correctamente ordenados. Eso lo re-
porta Contact Form 7 como un error de validación (ya que el email no viene
de ahí realmente, sino de la web), pero con ignorarlo es suficiente. También
personalizo un poco el campo “Asunto”.
El cambio importante lo vamos a realizar en el cuerpo del mensaje. Ahí, en la

posición que quieras, debes añadir una (o varias) de estas etiquetas:
∞ [_post_id] Para saber el ID del producto que visitaba el cliente

∞ [_post_title] Indica el título del producto donde estaba el formulario
∞ [_post_url] Para recibir la dirección URL donde estaba el formulario
∞ [_url] La anterior sólo vale si está en una entrada/página/producto (como

en el caso de este ejemplo), pero si prefieres ponerlo en un widget de la
sidebar tendrás que usar ésta
Como puedes ver así quedará plenamente identificado a qué producto se

refiere la consulta. Incluso puedes poner varios (o todos) para después iden-
tificar el producto del modo que más te convenga. Por ejemplo, el contenido
del “Cuerpo del mensaje” podía quedar más o menos así:
De: [your-name] <[your-email]>

Asunto: [your-subject]
Producto: [_post_title]
ID del producto: [_post_id]
URL: [_post_url]
Cuerpo del mensaje:

[your-message]
Y ya está. Guardamos y copiamos el shortcode que nos genera Contact Form

7. Lo encontrarás remarcado en naranja, bajo el nombre del formulario.
Poniendo el formulario en una pestaña personalizada
Pues ya está lo más complicado (y ya has visto qué sencillo es). Ahora sólo
falta crear nuestra pestaña y poner el formulario en ella. Para ello vamos a la
opción para crear pestañas que hemos visto antes (recuerda, en WooCom-
merce → Product Tabs) y pulsamos el botón Add New.
Ponemos el título a la nueva pestaña que vamos a crear para nuestra ficha de
producto (en mi ejemplo ¿Alguna duda? ¡Consúltanos!), y como contenido
ponemos el shortcode que nos ha generado Contact Form 7 para el formu-
lario de contacto.

Recuerda marcar la casilla que hemos visto antes a la derecha si quieres que
la pestaña esté disponible para todos los productos de la tienda. Si no, tendrás
que indicarle abajo para qué categorías la quieres utilizar.
También hay que establecer la prioridad. En mi caso he puesto 100, ya que

quiero que aparezca la última de la derecha, después de Descripción y de
Comentarios, y si después quiero añadir otras pestañas podré hacerlo tanto a
un lado como a otro. Guardamos y… ¡voilà!

A partir de ahora los clientes de tu tienda pueden consultar cualquier duda
que tengan directamente desde la misma ficha de producto. Y tú recibirás en
tu email la duda junto con el título, URL e identificador del producto al que se
refiere, y podrás contestar al cliente a su email.
Lo que ocurra a continuación ya depende de ti. Ya sabrás que una respuesta

rápida, eficaz y sincera a las dudas de los clientes aumenta de forma especta-
cular el ratio de ventas. Y poner el formulario de consulta tan a mano, junto
a la ficha de producto, sin duda te ayudará a ello.

2. POTENCIANDO
LAS VENTAS
AÑADIR UNA LISTA DE DESEOS
Seguramente lo has visto en multitud de comercios electrónicos: un enlace
que dice lista de deseos o wishlist en un lugar destacado de la ficha de pro-
ducto. Y no es de extrañar que lo veas. De hecho, si no tienes una en el tuyo,
estás perdiendo ventas.
Porque, básicamente, una lista de deseos (wishlist, por su nombre en inglés)

permite que un cliente guarde una relación de productos de tu comercio que
le gustan especialmente, que desea tener y por algún motivo no puede o no
quiere comprar (aún) o que compra frecuentemente.
Así que si no tienes una en tu tienda, ponte las pilas. En este capítulo vas a
aprenderlo todo sobre las listas de deseos en WooCommerce. Y, si avanzas
conmigo, cuando llegues al final tu tienda tendrá una plenamente funcional.
¿Empezamos?
¿Qué es una lista de deseos o wishlist?
Lo he dicho algo por encima, pero para que queden todos los conceptos bien
claros: una lista de deseos es un lugar donde el usuario puede guardar en una
lista su propia selección de productos de una tienda online.
A pesar de que se llame lista de deseos no siempre tienen por qué ser cosas
que el usuario desee (aunque a menudo lo son). Pueden ser artículos que
compra habitualmente y quiere tener su propia selección a mano para reali-
zar una compra rápida, ideas para regalar, artículos que le pueden interesar y
que guarda para revisarlos en otro momento con atención…
En definitiva, una lista que el propio usuario se hace de algunos de los artí-
culos del comercio con cualquier finalidad que se le ocurra. Y ¿qué ventajas
tiene eso? ¡Pues muchas! ¡Tanto para el usuario como para el comercio! Va-
mos a verlas.
Ventajas y desventajas de una lista de deseos
Amazon tiene lista de deseos. Ebay tiene lista de deseos. Google Play tiene
lista de deseos. En una palabra: si vendes algo, tienes que ofrecer una lista de
deseos. ¿Por qué? Pues ya verás.

Ventajas para tus clientes
∞ Les ahorra tiempo en el momento de hacer la compra, ya que puede

guardar una lista de favoritos con los productos que habitualmente com-
pra
∞ Les permite, de una forma eficaz, crear una especie de “compra están-
dar” para crear un pedido rápidamente
∞ Pueden utilizarla para gestionar sus productos favoritos
∞ Pueden compartirla para utilizarla como una lista de regalos
Y créeme, los clientes la utilizan mucho. Te lo digo yo, que cada vez que se
acerca una fecha señalada mi mujer me hace llegar “disimuladamente” (men-
tira, no hay disimulo ninguno) sus listas de deseos de diferentes comercios
electrónicos. Lo hace, claro, para facilitarme la tarea de elegir… y asegurarse
de que acierto con el regalo.
Ventajas para tu ecommerce
Y si aún no has visto las ventajas para tu negocio es que estás pensando en
otra cosa. ¡Céntrate!
∞ Una nueva lista siempre puede convertirse en una nueva compra

∞ Aumenta la fidelización de los clientes, debido a la facilidad que supo-
nen a la hora de comprar
∞ Facilita las compras a los mejores clientes que tienes: los clientes recu-
rrentes
∞ Permite viralizar tus productos, ya que esas listas suelen compartirse
tanto en redes sociales como por correo electrónico, lo que te puede
traer nuevos clientes de entre los contactos de los que ya tienes
∞ Te ayuda a identificar los productos que más gustan de entre tu catá-
logo
∞ Puedes usarlas para realizar campañas de email marketing mucho más
enfocadas, y por tanto más efectivas
Desventajas de las listas de deseos
¿En serio? ¿Crees que una cosa así puede tener desventajas?
Configurar una lista de deseos para WooCommerce
Si llegados a este punto no te has convencido de que tu comercio electró-

nico tiene que tener una lista de deseos, es que eres un caso perdido. Como

sé que no es el caso (porque si no habrías dejado de leer hace rato), vamos a
ponernos manos a la obra: ¡Construyamos una lista de deseos para tu Woo-
Commerce!
YITH WooCommerce Wishlist
Ya verás que es fácil y rápido. Vamos a utilizar para ello un plugin gratuito y
de mucha calidad: YITH WooCommerce Wishlist.
Es de la gente de YITH, especializada en plugins y themes para WooCommer-

ce. De hecho, ya hemos visto algunos de sus plugins en este mismo ebook,
cuando hablábamos de cómo mejorar las imágenes de producto en Woo-
Commerce.
Existe una alternativa que además está desarrollada por WooThemes, la gen-
te que ha hecho WooCommerce. Se trata de este plugin, WooCommerce Wi-
shlist. Se trata de un plugin premium (la licencia individual cuesta 79$) y, sin-
ceramente, teniendo una alternativa gratuita como la que ofrece YITH no es
en absoluto necesario comprarlo.
Así que simplemente hay que instalar y activar el YITH WooCommerce Wi-
shlist. Una vez hecho, te aparece una opción nueva en el menú de adminis-
tración: YITH Plugins → Lista de Deseos.
La lista de deseos en el menú
Pero antes de entrar ahí, vamos a ver algunas cosillas interesantes que ya ha
hecho el plugin: ha creado una nueva página, la página Lista de Deseos.
Asegúrate de ponerla en alguno de los menús, de forma que sea visible a tus
clientes, ya que es la página en la que podrán ver, precisamente, los produc-
tos que han guardado (ahora veremos cómo lo harán) en su lista de deseos.
A mí me gusta ponerla en el menú superior, junto a las opciones de “Mi Cuen-

ta”, “Realizar pedido”, etcétera. Pero vamos, que eso va al gusto de cada uno:

También puedes hacer que la opción aparezca sólo a los clientes registrados
cuando están en su cuenta. Así queda más limpio, mostrándose sólo cuando
es necesario. Eso lo puedes conseguir utilizando menús condicionales (expli-
co cómo se hace en este artículo), haciendo uso de la condición is_user_lo-
gged_in ().
Configuración de la lista de deseos
Ahora sí, vamos a ajustar las opciones de la lista de deseos a nuestro gusto
y necesidades. Para ello vamos a YITH Plugins → Lista de Deseos. Aquí verás
tres pestañas: Ajustes, Colores y Versión Premium.
En la versión premium no voy a entrar. Ofrece algunas opciones interesantes

como múltiples listas por clientes, hacer las listas privadas, enviar al carrito
múltimples productos de la lista con un sólo botón, búsquedas en las listas…
En fin, son cosas que cada uno debe valorar si necesita o no en su tienda.
Échale un vistazo y decide, la versión premium cuesta exactamente lo mismo
que cuesta el plugin de WooThemes del que te hablaba más arriba, Woo-
Commerce Wishlist.
De las otras pestañas, la de Colores sólo tiene una opción para convertir el
enlace de Añadir a la lista de deseos en un botón. En caso de que lo quieras
así puedes introducir el estilo personalizado para el botón como CSS o selec-
cionar que se le aplique la apariencia de botones que viene con tu plantilla.

Lo realmente interesante está en la pestaña de la izquierda, la de Ajustes. No
voy a comentar todas las opciones, porque son muy sencillas y la mayoría
autoexplicativas. Además, ante cualquier duda puedes consultarme median-
te el formulario de contacto de mi web. Pero sí vamos a ver algunas cosillas
importantes a tener en cuenta.
Posición
Aquí seleccionas en qué parte de la ficha de producto irá el enlace (o botón)

de Añadir a la lista de deseos. Te da cuatro opciones:
∞ Después de “Añadir al Carrito”

∞ Después de miniaturas
∞ Después de sumario
∞ Usar shortcode
Las dos primeras lo colocan o bajo el botón de “Añadir al Carrito” o bajo el

carrusel de imágenes del producto (si lo hay, si no bajo la imagen principal).
Con la tercera quedaría después de la descripción breve del producto y la úl-
tima sería para añadirlo a mano mediante un shortcode.
La opción que personalmente me gusta más es la primera de todas, ya que

pone el enlace justo donde más se ve. Visible por cierto también para los vi-
sitantes casuales, que sabrán que, si se registran en la tienda, podrán realizar
una lista de deseos. Interesante, ¿no?

Redirigir a la cesta
Los artículos en la lista de deseos tienen, junto a cada uno de ellos, un peque-
ño botón para añadir el producto al carrito (que se puede quitar desde estos
mismos ajustes). Con esta opción dirigiremos al usuario al carrito directa-
mente tras pulsar ese botón.
Esta opción es poco útil y muy engorroso salvo casos muy especiales, ya que
si el usuario quiere añadir al carrito varios artículos será para él un suplicio. Lo
mejor es dejarla como está, desactivada.
Las opciones de redes sociales y compartir
Esta parte es interesantísima. A la gente le encanta compartir sus listas de de-

seos, tanto en redes sociales como por email, para que sus contactos las vean
(y, dicho sea de paso, por si cae algún regalito también, supongo).
Aspecto de la página Mi lista de deseos con los botones de compartir

¡Eso trae ventas! De hecho, deberías dejar activadas todas las opciones que
propone el plugin (Facebook, Twitter, Pinterest, Google+ y correo electróni-
co). Cada opción de éstas que desactives son oportunidades de venta que
pierdes.
Esmérate en redactar el texto social. Es el que aparecerá junto al enlace cuan-

do un cliente comparta su lista en una de las redes sociales. Puedes usar la
variable %wishlist_url% para incluir la dirección URL a la tienda. Puede ser
algo así como:
Eh! Mira la de cosas chulas que he encontrado en %wishlist_url% . Échales un

vistazo y cómprame alguna. ¡Me encantan!
En fin, ya entiendes la idea, ¿no? Se trata de incitar a quien vea el enlace o lo

reciba por email a visitar tu tienda online y, a ser posible, que compre algo.

PRODUCTOS VINCULADOS:
UP-SELLS Y CROSS-SELLS
Uno de los apartados más ampliamente desaprovechados de las fichas de
producto en WooCommerce suele ser el de los productos vinculados.
Y esto suele ser por desconocimiento bien de para qué sirven o bien de la
potencia que tienen estas opciones a la hora de aumentar las ventas, concre-
tamente aumentando el ticket medio de compra.
Productos vinculados en WooCommerce
Esto ocurre sobretodo al principio, cuando comienzas a trabajar con Woo-

Commerce, y te dedicas a subir fichas de productos con el precio, la imagen y
el texto. Es normal, bien porque aún no lo tienes totalmente dominado o bien
porque tienes muchos productos por subir al principio y vas rápido.
Aumentar los ingresos en nuestra tienda online
Es normal como digo, pero después es obligado que dediquemos un poquito

de tiempo a mejorar cada ficha de producto si queremos aumentar las ven-
tas. Recuerda que a la hora de aumentar los ingresos en un comercio electró-
nico lo podemos hacer por tres vías:
∞ Aumentando el tráfico: más visitas = más ventas, eso es innegable

∞ Aumentando el ratio de conversión: a mayor porcentaje de conversión,
más ventas con las mismas visitas
∞ Aumentando el ticket medio: con las mismas visitas y las mismas ven-
tas, consiguiendo que cada cliente gaste un poco más en cada compra
Evidentemente cuando tienes una tienda online tienes que trabajar los tres
frentes constantemente, sin embargo hay mucha gente que se olvida del ter-
cer punto. Que, para más inri, es el que menos trabajo cuesta (siempre es más
costoso aumentar el número de visitas o la conversión).
Así que ya sabes, obligado dedicar cada día aunque sea unos minutos a me-
jorar algunas fichas de producto, aunque sean sólo dos ó tres al día. Puedes
hacerlo añadiendo más texto en la descripción o más imagenes, mejorando
lo que ya hay… o bien aplicando lo que vamos a ver en este artículo: los pro-

ductos vinculados.
La ficha de producto y los productos vinculados
La opción de los productos vinculados la puedes encontrar en la ficha de

producto, en el bloque Información del producto, en la pestaña Productos
vinculados.
Ahí tienes tres opciones o tipos de vinculación entre productos:
∞ Los up-sells, traducido de forma bastante pobre como Up-Ventas

∞ Los cross-sells o productos cruzados, traducido de forma igual de ne-
fasta como Cruz-Ventas
∞ Los Agrupamientos o productos agrupados
No voy a tratar hoy los productos agrupados. Lo que vamos a ver son las otras
dos opciones, los up-sells y los cross-sells, ya que te ayudarán (y mucho) en
tu misión de aumentar el ticket medio de caja. ¡Vamos a ver cómo!
Los up-sells en WooCommerce
Los up-sells (expresión que en español tiene difícil traducción) son produc-
tos con una funcionalidad y características similares al producto en cuestión,
pero más caros o con una rentabilidad mayor.
La cuestión está en que, cuando un cliente se interese por un producto, mos-

trarle otros similares pero de una gama ligeramente superior o que sea más
rentable para la tienda.
A ver, no se trata de que, si un cliente está viendo un anillo de plata, se le

recomiende uno de oro y brillantes, porque seguramente no le interesará. Si

está viendo ese anillo será porque está buscando un anillo de plata y ése en
concreto se ajusta a su presupuesto. Si le mostramos un anillo de oro y pie-
dras preciosas que cuesta veinte veces más lo ignorará.
Pero, ¿y si le muestras otro anillo (u otros anillos) de plata, de similares carac-

terísticas, con un precio digamos un 10% superior? El producto es similar pero
algo mejor, y la diferencia de precio asumible. O sea, se encuentra dentro de
lo que el cliente está buscando y quizá al verlo se interese por él. Si es así,
habrás aumentado la venta en un 10%. ¿Captas la idea?
Amazon, el gran marketplace número uno en ventas en internet, utiliza esta

estrategia de forma muy inteligente con su Los clientes que compraron este
producto también compraron.
Evidentemente los clientes no compraron dos artículos equivalentes, eso no

es más que una excusa para mostrarte otros artículos similares al que es-
tás viendo… pero algo más caros. Lo que significa una mayor comisión para
Amazon.
Lo bueno es que WooCommerce permite añadir esos up-sells manualmen-

te, por lo que tú decides qué productos ofrecer a tus clientes en función de
aquellos que están viendo. ¿Vendes portátiles? Ofrece uno de la misma mar-
ca pero con algo más de memoria RAM. ¿Móviles? ¿Qué tal una pantalla un
poco más grande? ¿Y lavadoras? Esta otra centrifuga a más revoluciones…

Como ves implementarlo es muy sencillo y puede hacer que a final de mes
tus ventas suban, aún recibiendo el mismo tráfico y sin tocar el embudo de
conversión.
Los cross-sells o “ventas cruzadas”
La otra opción que encontramos en los productos vinculados de WooCom-

merce es la de los cross-sells, las ventas cruzadas.
El objetivo es el mismo que con los up-sells: aumentar el ticket medio de caja.
Sin embargo con estos artículos se busca de una forma distinta: ofreciendo
al cliente productos que complementan o mejoran el que está comprando.
Y ahí hay una sutil pero importante diferencia: el cliente no está mirando y
comparando, sino que ya ha hecho eso y está comprando el producto. Es en-
tonces cuando le mostramos otro producto distinto pero que complementa
a aquel que se va llevar.
A todos nos lo han hecho. ¿Has ido alguna vez a una hamburguesería y has
pedido una hamburguesa suelta en lugar de un menú? Si lo has hecho, se-
guro que te han preguntado ¿Quiere patatas fritas? ¡Pues ahí lo tienes! Tú
quieres una hamburguesa (es lo que estás comprando), pero si te ofrezco las
patatas fritas quizá las compres también.
En el carrito
WooCommerce maneja esto de forma muy eficaz, porque lo hace en el ca-

rrito. La idea es: mientras estás mirando productos, te muestro algunos si-
milares pero más caros; cuando ya te has decidido, te muestro algunas otras
cosas relacionadas con las que compras.

¿Te has decidido por esa tablet? ¿No necesitarás por casualidad una funda?
¿Estás comprando una secadora? A lo mejor quieres que te hagamos la ins-
talación y puesta en marcha. ¿Unos pendientes? A lo mejor te gusta esta gar-
gantilla a juego.
En fin, como ves las posibilidades son infinitas.

DESTACAR PRODUCTOS EN WOOCOMMERCE
Siempre, en todo comercio electrónico, hay algunos productos que nos in-
teresa destacar: porque son novedades, porque nos interesa darles salida,
porque sirven como “gancho” para vender otros productos o por la razón que
sea. Así que vamos a ver cómo destacar productos en WooCommerce… in-
cluyendo los mejores trucos y técnicas para mostrarlos a nuestros visitantes.
Cómo destacar productos en WooCommerce
Para ello no hace falta ningún plugin especial, ya que WooCommerce incluye
por defecto una buena gestión de productos destacados por medio de un
shortcode.
Basta con ir a la pantalla de productos y, en el listado, seleccionar cuáles que-

remos que sean productos destacados simplemente marcando con un click
la estrella azul, como puedes ver en la imagen:
Para poder saber de un vistazo qué productos tienes como destacados, pue-
des usar la flecha azul en la cabecera del listado, y todos los productos des-
tacados se pondrán en primer lugar. Puedes desmarcar un producto simple-
mente volviendo a pinchar en la estrella azul.

Mostrar productos destacados en WooCommerce
Bien, ahora ya están seleccionados los productos que queremos destacar.

¿Qué hacemos ahora? Bueno, pues mostrarlos donde más nos interese. Tú
eliges:
∞ En la barra lateral
∞ En el pie de página
∞ En la página de inicio
∞ En una sección especial de la tienda
Esos son los lugares típicos, pero aquí te doy algunas otras ideas en las que a
lo mejor no habías pensado:
∞ En la página de error 404

∞ En la página de contacto, bajo el formulario
∞ En una entrada del blog En la cabecera de la página
∞ En una pestaña personalizada en las fichas de producto, tal y como he-
mos visto unos capítulos más arriba
Y mil sitios más. ¡Imaginación al poder! Se pueden mostrar literalmente don-

de se quiera, aunque en algunos sitios hará falta insertarlos mediante código
PHP. Pero vamos a verlo por partes.
Shortcode para mostrar los productos destacados
Mostrarlos en una página o una entrada es muy fácil: sólo hay que utilizar
un shortcode. Sí, ya sabes, uno de esos pequeños “códigos prefabricados”
que van entre corchetes. Concretamente el que necesitamos para mostrar los
productos destacados es [featured_products]
Así, sin más. Siempre que pongas ese pequeño shortcode en una página o
una entrada, aparecerán los productos destacados. Pero es que además po-
demos obtener mayor control sobre el resultado presentándolos como que-
ramos.
Para ello este shortcode admite varios atributos:
∞ per_page: número de artículos destacados a mostrar por página (ya

que, por supuesto, admite paginación)
∞ columns: el número de columnas en que se deben mostrar los produc-
tos destacados

∞ orderby: para indicarle qué parámetro debe utilizar para ordenarlos. Por
defecto, si no se indica nada, los ordena por fecha de publicación (que es
lo mismo que poner orderby=”date”), pero admite muchos otros paráme-
tros. Los más interesantes son:
∞ rand: al azar
∞ ID: por ID, que como se asigna automáticamente por orden, suele
coincidir en orden con date
∞ name: por nombre
∞ title: por título
∞ modified: por fecha de modificación
∞ comment_count: por número de comentarios
∞ order: para indicar si el parámetro indicado en orderby debe tomarse en
orden ascendente (order=”asc”) o descendente (order=”desc”)
¿Lioso? ¡En absoluto! Ya verás como con un par de ejemplos se ve muy fácil:
[featured_products per_page=”16” columns=”4” orderby=”modified” or-

der=”asc”]
Con ese shortcode podrás mostrar los productos destacados ordenados en

columnas de a cuatro, listando 16 productos por página (no realiza pagina-
ción, si hay más mostrará sólo los dieciséis primeros), ordenados por fecha de
modificación de forma ascendente.
El atributo per_page es muy útil para mostrar productos distintos cada vez,
aparentemente al azar, pero siendo siempre los que a nosotros nos interesa
mostrar. Por ejemplo, si destacamos, digamos, 100 productos, y usamos el
siguiente shortcode:
[featured_products per_page=”4” orderby=”rand”]
Cada vez que se cargue la página se mostrarán solamente cuatro de esos

cien, y como le indicamos que los ordene al azar cada vez serán cuatro dis-
tintos… pero de entre los que nos haya interesado destacar. ¿Captas la idea?

Mostrar los productos destacados en las áreas de widgets
Como decía antes, puedes mostrarlos donde te dé la gana, y ponía algunos

ejemplos como la barra lateral, el pie de página o incluso la cabecera. Por su-
puesto, eso lo puedes hacer poniendo el shortcode en un widget.
Claro que quizá ya lo has intentado y no funciona. Eso es lo habitual, ya que

WordPress no incluye por defecto el soporte para shortcodes en widgets, pero
se puede hacer de forma muy sencilla. En este vídeo explico cómo hacerlo.
Por supuesto, hay que pensar out of the box e ir más allá del típico widget en
la barra lateral. Hoy muchas otras áreas de widgets disponibles en los temas,
incluyendo (¿por qué no?) la cabecera o el pie de página.
Mostrar los productos destacados en cualquier otro lugar
Pero, ¿y si quiero mostrar los productos personalizados en cualquier otro lu-

gar del sitio web? Es un recurso muy útil, ya que hay sitios muy buenos (y muy
desaprovechados generalmente) como pueden ser la página de error 404, al
final de cada una de las entradas del blog bajo los comentarios, etcétera.
Eso lo podemos hacer insertando el código PHP correspondiente en el lugar
que nos interese de nuestra plantilla. ¿Y cuál es el código que hay que inser-

tar? Pues fácil. WordPress pone a nuestra disposición una función para eso: la
función do_shortcode ().
Por ejemplo, si quieres que se muestren los productos destacados al final de

cada entrada de tu blog basta con editar el archivo correspondiente de tu
plantilla (que se llamará por lo general single.php, pero dependiendo del tema
puede también ser algo como post-content.php, loop-single-post.php o de
mil formas más) y añadir, al final (ojo al sitio):
<?php echo do_shortcode (‘[featured_products]’); ?>
Aunque lo correcto es siempre añadir un condicional de verificación, para

evitar errores futuros por cambios en alguna versión. Lo que yo pondría es:
<?php if (shortcode_exists (‘featured_products’)) echo do_shortcode (‘[featu-

red_products]’); ?>
Añadiendo, claro, los atributos que le queramos dar. Eso podría ahorrar en el
futuro errores inesperados. Quedaría muy bien añadirlo bajo los comentarios
con el ejemplo que daba más arriba para mostrar cuatro al azar de entre una
gran cantidad, ¿no te parece?

MEJORAR LOS PRODUCTOS RELACIONADOS
Una característica que pide mucho la gente es el poder personalizar los pro-
ductos relacionados en WooCommerce.
Sin duda, la de los productos relacionados es una buena característica de

WooCommerce: aumenta el número de páginas vistas, el tiempo de perma-
nencia en la web y, en consecuencia, las ventas. Además la automatización
de los elementos mostrados en este apartado en nos facilita la tarea y nos
ahorra tiempo. No tenemos por qué preocuparnos de nada. En teoría.
Sin embargo tiene también algunos puntos débiles, sobre todo en el aspecto
de la personalización: no permite limitar los productos mostrados en cuan-
to a concordancia sólo por etiquetas o sólo por categorías, ni el número de
productos que se mostrarán, ni mucho menos permite elegir manualmente
cuáles mostrar para un producto concreto.
Afortunadamente hay algunas formas de hacerlo, aunque WooCommerce

no ofrezca esas opciones ni en el apartado de configuración ni en la ficha de
producto. Vamos a ver cómo conseguirlo.
Qué tiene en cuenta WooCommerce para mostrar un producto como re-

lacionado
Como decía más arriba WooCommerce tiene en cuenta, para mostrar los
productos relacionados, tanto las categorías como las etiquetas. Esto, en la
mayoría de las ocasiones, es un sistema muy eficaz y que funciona bastante
bien.
Sin embargo, hay veces en que, según cómo establezcamos unas y otras,
esto podría no tener mucho sentido.
Por ejemplo, si tenemos un ecommerce de ropa y establecemos categorías

como “pantalón”, “falda”, “vestido”, “camiseta”, etcétera y, para facilitar las bús-
quedas o la selección por estilos, etiquetas como “verde”, “azul”, “verano”, “en-
tretiempo” y cualquier otra que se te pueda ocurrir.
En este caso no tiene mucho sentido que el cliente esté viendo un panta-
lón azul (seguramente está buscando comprarse un pantalón) y le aparezca
como relacionado un jersey de lana sólo porque es también azul. Lo ideal en

este caso es que se utilizaran sólo categorías para establecer qué productos
se muestran como relacionados.
Productos perfectamente relacionados gracias a una correcta asignación de categorías y etiquetas
O a la inversa. Podemos tener una tienda online de productos deportivos y

que las categorías sean “casco”, “camiseta”, “calzado”, etcétera, y las etiquetas
“running”, “ciclismo”, “fútbol”, y así.
No tendría sentido entonces que a alguien que está buscando un casco para
ciclismo se le mostrase como relacionado un casco de, por ejemplo, motoci-
clismo. Lo correcto es que se le muestren otros productos para ciclismo, ¿no?

En fin, ya sé que este ejemplo viene un poco forzado, ya que el problema es-
taría en que, en este caso, se han establecido mal las categorías y habría que
estudiar una forma más eficiente de hacerlo, pero entiendes lo que quiero
decir, ¿verdad?
Tener en cuenta sólo las categorías o sólo las etiquetas
Bueno, si tu problema es éste puedes respirar tranquilo: aunque WooCom-

merce no permite (en las opciones de configuración) desechar las categorías
o las etiquetas a la hora de seleccionar los productos relacionados, la solu-
ción para conseguirlo es muy sencilla.
Sí, es cierto que hay que utilizar código, pero no te preocupes: te lo voy a dar
masticado y listo para usar.
Primera opción: quieres que para los productos relacionados que se mues-
tran en tu tienda WooCommerce tenga en cuenta las categorías, pero no las
etiquetas.
Bien, tienes que ir al archivo de funciones del tema que estés utilizando (Apa-
riencia → Editor → funcions.php) , o (mucho más recomendable) en tu plu-
gin de funciones personalizadas como explico en este artículo, y añadir este
código al final del todo (recuerda siempre, antes de modificar nada, realizar
copias de seguridad):
/* Mostrar productos relacionados en WooCommerce sólo por categorías */
add_filter (‘woocommerce_product_related_posts_relate_by_tag’, function () {
return false;
});
Así, sin más, sólo copiar y pegar al final del archivo de funciones y listo. Dejar
el comentario (lo que está entre “/*” y “*/”) para recordar en un futuro para
qué sirve cada cosa. Créeme, con el tiempo empiezas a acumular funciones
personalizadas y es fácil olvidarse.
Y la segunda opción: quieres que se muestren los productos personalizados

teniendo en cuenta las etiquetas, pero no las categorías. Muy bien, en ese
caso el código es el siguiente:
/* Mostrar productos relacionados en WooCommerce sólo por etiquetas */
add_filter (‘woocommerce_product_related_posts_relate_by_category’, function () {
return false;
});

Y listo. Ya lo tienes. ¿Ves qué solución más fácil y rápida?
Cambiar el número de productos relacionados que se muestran
Vamos a ver más cosas que se pueden personalizar aunque no estén in-
cluidas como opción ni en los ajustes de WooCommerce ni en las fichas de
producto. Entramos ahora con el número de productos relacionados que se
mostrarán en la ficha de producto.
Por defecto se muestran cuatro, pero esto no es algo que esté ni mucho
menos grabado en piedra: se puede cambiar. Para ello también es necesario
tocar algo de código, pero de nuevo te lo facilito.
Se trata otra vez de ir al archivo de funciones y pegar un trozo de código al

final, que será el siguiente:
function ejr_woo_limite_relacionados () {
global $product;
$args = array (
‘post_type’ => ‘product’,
‘no_found_rows’ => 1,
‘posts_per_page’ => 4,
‘ignore_sticky_posts’ => 1,
‘orderby’ => $orderby,
‘post__in’ => $related,
‘post__not_in’ => array($product->id)
);
return $args;
}
add_filter (‘woocommerce_related_products_args’, ‘ejr_woo_limite_relacionados’);
Bien, si pegas eso así tal cual está no va a cambiar nada: seguirán mostrán-
dose un máximo de cuatro productos relacionados en la ficha del producto.
Pero ahora puedes cambiar ese número fácilmente. Basta que cambies don-
de dice:
‘posts_per_page’ => 4,
por el número que te dé la gana. Y ya lo tienes. A partir de ese momento

WooCommerce tomará la cantidad que tú hayas puesto como número máxi-
mo para los productos relacionados.
Más control: Custom related products for WooCommerce
Esto está muy bien si queremos excluir las etiquetas o las categorías a la hora

de filtrar los productos relacionados, pero ¿y si queremos un mayor control?
Porque podríamos querer determinar nosotros manualmente cuáles apare-
cerán para un producto concreto.
Pues bien, como de costumbre cuando trabajamos con WordPress y nece-

sitamos algo que no está incluido por defecto, los plugins salen al rescate.
Custom related products for WooCommerce, para ser exactos.
Se trata de un plugin muy sencillo, de los de activar y listo, pero muy potente
y que nos permite hacer exactamente eso: elegir en cada producto qué otros
productos de nuestra tienda aparecerán en la sección de productos relacio-
nados.
Para ello sólo tenemos que editar el producto y, en la ficha de producto, ir

hasta la sección de productos vinculados.
Verás entonces que ahí ha aparecido, bajo las cajas de texto de las up-sells y
cross-sells (como ya vimos en otro capítulo de este libro), un nuevo cuadro:
el de Productos Relacionados.
Si no rellenas nada en esa casilla WooCommerce establecerá las relaciones

como hasta ahora: basándose en categorías y etiquetas (a no ser que hayas
utilizado alguno de los códigos que menciono más arriba, en el apartado an-
terior).
Sin embargo si pones algo, aunque sólo sea un producto, WooCommerce

ignorará sus filtros y en la ficha de producto aparecerá en la sección de pro-
ductos relacionados exactamente lo que tú hayas establecido ahí.
Pero ojo, recuerda que sólo se mostrarán hasta cuatro, por muchos que colo-
ques. Claro, que ya sabes cómo hacer que aparezcan más, ¿no?

MEJORAR LAS BÚSQUEDAS
Como has podido ir viendo en los capítulos precedentes, pese a ser un gran
sistema de comercio electrónico, WooCommerce tiene algunas carencias de
usabilidad en su instalación por defecto. Es el caso, por ejemplo, de la selec-
ción de variaciones en los productos variables o de las búsquedas de produc-
tos.
Un sistema de búsqueda de productos eficaz es imprescindible para una bue-

na experiencia de usuario (algo que, como ya sabes, mejora tanto el SEO
como las conversiones), así que vamos a ver cómo podemos mejorar el siste-
ma que WooCommerce incluye por defecto, que básicamente es el de Wor-
dPress (útil para buscar en un blog pero no tanto en una tienda online).
Búsqueda inteligente en WooCommerce
La primera mejora evidente es incluir una búsqueda inteligente. Considera

estas dos situaciones:
∞ El cliente introduce un parámetro de búsqueda, pulsa enter o el botón

“Buscar”, y se carga una nueva página con los resultados de la búsqueda.
Si no hay ningún resultado, se le informa de ello y puede repetir el pro-
ceso.
∞ El cliente puede ver, mientras introduce el término de búsqueda, una
lista a tiempo real de los resultados coincidentes, incluyendo una peque-
ña imagen, el nombre, el precio y, si queremos, una corta descripción. No
es necesario que la página se recargue y si no hay resultados simplemen-
te puede reescribir la palabra clave.
¿Cuál de los dos sistemas crees que crea una mejor experiencia de usuario?
Exacto, el segundo. Sin embargo WooCommerce sigue incluyendo el primero
por defecto. Afortunadamente el remedio es rápido. Basta con utilizar el plu-
gin Advanced Woo Search.
Advanced Woo Search te permite trasladar toda la potencia de AJAX (es decir,
no hará falta recargar la página) al buscador de productos, permitiendo que
el usuario realice consultas con resultados que se actualizan a tiempo real y
con el formato que tú elijas. Para entendernos, puedes olvidarte del sistema
de búsquedas de WooCommerce y tener esto otro:

Viendo la imagen anterior quizá te preguntas si la búsqueda funciona co-
rrectamente. Esos resultados son debidos a que corresponde a una web para
pruebas, experimentos, etcétera, y suelo poner en la descripción de los pro-
ductos un Lorem ipsum dolor sit amet… de relleno. Por eso al escribir lor
aparecen tantos productos.
Al instalar este plugin aparece una nueva opción en el menú de administra-

ción (Adv. Woo Search) que te permitirá configurar la forma en que se mues-
tran los resultados de la búsqueda. Entre otras opciones, podrás elegir:
∞ Si se muestra el nombre
∞ Si junto al resultado aparece una imagen miniatura del producto
∞ Si muestra una descripción (y, si es así, cuántas palabras debe mostrar y
∞ si las coge de la descripción larga o de la corta)
∞ Si quieres que aparezca el precio
∞ Si remarca en los resultados los términos buscados
∞ Si deberían o no aparecer etiquetas o categorías como resultados de
búsqueda
∞ Si marca los artículos en oferta

∞ El número máximo de resultados
∞ Dónde debe buscar
Como ves, las búsquedas mejoran sensiblemente utilizando este plugin. Si

hasta ahora estás usando el sistema de búsqueda por defecto, pruébalo. Tus
clientes van a notar la diferencia, lo que significa que tú también la acabarás
notando (cualquier mejora en la usabilidad acaba traduciéndose en un au-
mento de las ventas).
Para ello sólo tienes que ir a Apariencia → Widgets y poner el widget AWS
Widget en el área de widgets que más convenga a tu diseño (generalmente
será en la cabecera o en la barra lateral).
Filtros de productos
Si las búsquedas inteligentes eran una forma de mejorar el sistema de bús-

quedas en un comercio electrónico, la otra gran manera es mediante la apli-
cación de filtros.

WooCommerce ya incluye por defecto un filtro de precios por control des-
lizante, que es sin duda un gran widget (Apariencia → Widgets → Filtro de
precios de WooCommerce), pero aún podemos mejorarlo mucho más aña-
diendo otros filtros: los atributos.
Filtros en combinación
Y es que cuando añades al filtro de precios un filtro por atributos, la potencia

del sistema de ventas aumenta exponencialmente. Personalmente a mí, no
ya como desarrollador sino como cliente, me gustaría poder contar con un
sistema de búsqueda así en los ecommerce que utilizo.
Para implementar este sistema en nuestra tienda vamos a utilizar un segundo

plugin: YITH WooCommerce AJAX Product Filter, de los estupendos chicos
de YITH. Ya hemos visto en otros capítulos otras formas de mejorar nuestra
tienda online utilizando algunos otros de sus plugins, como mejorar las imá-
genes de producto o implementar una lista de deseos.
Al activar el plugin tenemos una nueva opción en el menú de administración

en YITH Plugins → Ajax Product Filter, pero ahí básicamente sólo podremos
aplicar algunas opciones de estilos. Te será útil si sabes CSS y quieres perso-
nalizar un poco el aspecto de los filtros para adaptarlo a tu plantilla.
Pero realmente no te va a hacer falta hacer nada de eso. Simplemente po-

drás ir a Apariencia → Widgets donde encontrarás dos nuevos widgets: YITH
WooCommerce Product Filter y YITH WooCommerce Reset Filter.
El primero de ellos te va a permitir filtros atendiendo a los atributos de los pro-

ductos (recuerda que es una buena práctica definir siempre atributos, aunque
no se trate de productos variables).
Podrás hacerlo con cuatro formatos diferentes:
∞ Lista
∞ Color
∞ Etiqueta
∞ Desplegable
De esta forma podrás añadir el widget tantas veces como atributos puedas
tener, cada uno de ellos en el formato que más convenga al atributo corres-
pondiente. En esta captura de pantalla puedes ver los formatos “color” y “eti-
queta” aplicados a los atributos “color” y “talla”, en combinación con el filtro de

precios de WooCommerce:
¿Te das cuenta de lo potente que es una búsqueda así? En cuanto tu tienda
online tenga unas pocas decenas de productos, tus clientes van a agradecer
un montón poder contar con un sistema de este tipo. Porque si un cliente
tiene que estar recorriendo páginas de resultados para encontrar el producto
que busca, puedes despedirte de la compra.
De esta forma, por el contrario, puede filtrar primero por precio, atendiendo
a su presupuesto, y después por los atributos que busque (que dependiendo
de tus productos serán unos u otros). Encontrar así lo que está buscando será
cosa de, literalmente, unos segundos.
Por último, el widget YITH WooCommerce Reset Filter (también provisto por
este plugin) te permitirá añadir un botón para resetear los filtros.

Enrique J. Ros
Desarrollo web
www.enriquejros.com

Mejorar Woocommerce PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Mejorar Woocommerce PDF

Cargado por

Copyright:

Formatos disponibles

MEJORANDO

APRENDE CÓMO MEJORAR AÚN MÁS

Copyright © 2016 Enrique J. Ros

Permíteme, antes de empezar, dedicar unas pocas palabras a darte las

Tanto si es así como si no, te animo también a darme tu opinión. Todas

También puedes contactar conmigo a través de las redes sociales:

¿Tienes a quien acudir cuando necesitas ayuda, asesoramiento técnico y

Tu web es la imagen de tu marca ante tus clientes, quizá tu medio de ingre-

MANTENIMIENTO Y SOPORTE TÉCNICO RESOLUCIÓN DE EMERGENCIAS WORDPRESS

Actualizaciones de core, plugins y plantillas Error No disponible por mantenimiento

TU WEB EN MANOS EXPERTAS POR MUY POCO AL MES

¿Suena bien? Contáctame y hablamos.

Por defecto cuando pinchas en la imagen de producto ésta se abre en una

Además la navegación a través del carrusel de imágenes del producto se

Mejorando WooCommerce 6 www.enriquejros.com

Nada más activarlo ya observamos que la forma en que se aumentan las

Bueno, la cosa ha mejorado algo, pero no demasiado. Ya no se oscurece la

Sin embargo el área ampliada se muestra a la derecha, y eso no es lo más

Afortunadamente, esto tiene fácil solución. Basta con ir a YITH Plugins →

Mejorando WooCommerce 7 www.enriquejros.com

YITH WooCommerce Zoom Magnifier tiene bastantes más opciones, algunas

Bien, en este primer apartado de opciones generales encontramos tres op-

Mejorando WooCommerce 8 www.enriquejros.com

En la segunda opción podemos elegir si queremos que los efectos de zoom

La tercera es para gestionar el modo en que el plugin controla el tamaño de

En el siguiente apartado nos encontramos las opciones para configurar la

En estas opciones podemos definir, lo primero de todo, el tamaño de la caja

Mejorando WooCommerce 9 www.enriquejros.com

La siguiente opción es para establecer el tamaño que tendrá la imagen dentro

Tras elegir el texto que se mostrará mientras se carga la imagen, podemos

Configuración del carrusel

Y por último tenemos las opciones de configuración para el carrusel, es decir,

La primera opción activa o desactiva el carrusel (si lo desactivamos queda

Mejorando WooCommerce 10 www.enriquejros.com

A continuación podemos elegir el número de imágenes que se mostrarán en

Mejorando WooCommerce 11 www.enriquejros.com

Ya hemos visto en ese capítulo cómo mejorar las imágenes de producto en

El selector de variaciones en los productos variables

En los productos variables el usuario puede seleccionar una variación u otra

Mejorando WooCommerce 12 www.enriquejros.com

Dos formas de crear variaciones

Si trabajas habitualmente con productos variables ya sabrás que las variacio-

Pero si las variaciones son comunes en muchos productos de la tienda es

Mejorando WooCommerce 13 www.enriquejros.com

Cambiar el selector de variaciones

Mejorando WooCommerce 14 www.enriquejros.com

Vamos a ver cómo podemos conseguir esto.

Es bastante sencillo conseguirlo. Al activar el plugin se añade una nueva op-

Se trata de un desplegable que te permitirá elegir el tipo de selector (Swatch

Al elegir color se abre un selector de colores. Si pinchas en él podrás elegir el

Mejorando WooCommerce 15 www.enriquejros.com

Mejorando WooCommerce 16 www.enriquejros.com

Productos variables con más de un atributo

Ya rizando el rizo, tenemos los productos variables con más de un atributo. En

Mejorando WooCommerce 17 www.enriquejros.com

Además, vamos a realizar paso a paso un ejemplo práctico añadiendo una

Añadir pestañas personalizadas en la ficha de producto

Como ya sabes, por defecto WooCommerce incluye dos pestañas en la ficha

Esto lo podemos conseguir fácilmente gracias al plugin gratuito WooCom-

Mejorando WooCommerce 18 www.enriquejros.com

Los campos principales ya los conoces de sobra: título y contenido. El título

Lo que sí encontramos son algunas opciones nuevas en esta interfaz, especí-

Bajo la ventana de descripción encontrarás otra titulada Conditions. Lo que