Mejorar Woocommerce

MEJORANDO
APRENDE CMO MEJORAR AN MS

EL MEJOR PLUGIN DE ECOMMERCE
PARA WORDPRESS
ENRIQUE J. ROS
ndice de contenidos
Agradecimiento 3
Ocho consejos para mejorar tu ecommerce 5
1. Mejorando la ficha de producto 12
Imgenes de producto 360o 13
Mejorar el selector de variaciones 16
Pestaa personalizada con formulario de consulta 22
2. Potenciando las ventas 31
Aadir una lista de deseos 32
Productos vinculados: up-sells y cross-sells 39
Destacar productos en WooCommerce 44
Mejorar los productos relacionados 49
Mejorar las bsquedas 54
Copyright 2017 Enrique J. Ros

Todos los derechos reservados
Queda expresamente prohibida la reproduccin total o parcial de este libro o sus contenidos
(texto e imgenes) por cualquier medio electrnico o mecnico, sin la autorizacin por escrito
del autor.
Agradecimiento
Permteme, 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 tambin a darme tu opinin. Todas

son bienvenidas y me ayudan a mejorar. Puedes contactarme mediante
email a enrique@enriquejros.com o a travs de este formulario de con-
tacto.
Tambin puedes contactar conmigo a travs 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 tcnico 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. Enfcate slo 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 TCNICO RESOLUCIN DE EMERGENCIAS WORDPRESS
Actualizaciones de core, plugins y plantillas Error No disponible por mantenimiento

Integracin y mantenimiento con Google programado
Webmaster Tools Recuperacin desde copia de seguridad
Monitorizacin de errores 404 Recuperacin y limpieza de web hackeada
Monitorizacin de enlaces rotos Errores 404 en todas las pginas
Comprobacin de las alertas de seguridad Error estableciendo una conexin con la
Copias de seguridad peridicas base de datos
Correccin de errores de programacin Error Fatal error: Allowed memory size
Mantenimiento y limpieza de base de dato Error 500 Internal Server Error
Alerta inmediata ante cadas del servidor Error 503 Service Temporarily Unavailable
Soporte y asesoramiento tcnico Error Seguro que quieres hacer esto?
Informe y control mensual del servicio Prdida del acceso al panel de control
TU WEB EN MANOS EXPERTAS POR MUY POCO AL MES
Suena bien? Contctame y hablamos.

8 CONSEJOS PARA MEJORAR TU ECOMMERCE
Seguro que ms de una vez te has hecho preguntas como Cmo puedo me-
jorar mi tienda online? o Le estoy sacando todo el provecho a mi comercio
electrnico?
En este primer captulo empezaremos viendo ocho errores comunes que se

comenten en un ecommerce y que, evitndolos, te ayudarn a mejorar tu
tienda online y con ello tus ventas.
En los captulos sucesivos veremos aspectos ms concretos y centrados en

WooCommerce, que te ayudarn a mejorar aspectos como la ficha de pro-
ducto y el proceso general de venta.
Vamos a ello!
Las imgenes de producto
Lo que habitualmente se hace
Normalmente se utilizan las imgenes que facilita el proveedor o se buscan

imgenes del producto en internet.
Lo que deberas hacer
En realidad lo correcto (si se quiere vender ms, claro, que supongo que es
el caso) es realizar imgenes propias, con detalles y ejemplos reales de uso.
Recuerda que el usuario est comprando sin ver el producto real, as que se
guiar principalmente por dos cosas: las imgenes del producto y las reco-
mendaciones u opiniones de otros usuarios que ya lo han comprado.
Por eso hay que poner un nmero suficiente de imgenes (no subas una por
cumplir y ya est!) y dependiendo del producto habr que incluir tambin
fotografas de detalle.
Adems, siempre que sea posible, habr que utilizar imgenes originales, ya
que adems posicionaremos mejor en Google Images. Si te ves capaz, hazlas
t mismo, pero cuida que el resultado sea profesional.
Recuerda que las imgenes con ejemplos reales de uso convierten bien, pero
Mejorando WooCommerce 5 www.enriquejros.com

huye de las fotos de stock: se notan al momento y se perciben como falsas.
Los sliders o carruseles de imgenes
Es raro hoy en da encontrar un comercio electrnico que no tenga un slider

en su pgina principal, normalmente mostrando productos destacados o,
en el mejor de los casos, destacando algunas de las propuestas de valor del
ecommerce.
Est demostrado, y hay diferentes estudios al respecto: los sliders restan usa-
bilidad, desvan la atencin de la llamada a la accin principal y adems no
sirven para nada porque son sistemticamente ignorados por los usuarios.
Slo un 1% de los usuarios hace click en un slider. Una de cada cien visitas.
Adems, de los que hacen click, casi el 90% lo hace en la primera de las im-
genes del carrusel, y slo menos de un 10% lo hace en el resto.
Echa cuentas: de cada mil usuarios, slo uno presta atencin a la segunda o
sucesivas imgenes de un slider. Por qu desaprovechar la mejor parte de
la pgina principal (porque adems normalmente los sliders se ponen en el
lugar ms destacado) en colocar algo que todo el mundo ignora?
Quieres algo visual? Pues coloca una imagen fija. Adems de que es ms li-
gera y la pgina cargar ms rpido, la ausencia de movimiento evitar que el
usuario est perdiendo el hilo de lo que mira. No tiene sentido destacar algo
ponindolo en la tercera o cuarta diapositiva: lo que se estars haciendo as
en realidad es ocultarlo, porque ah nadie lo ve.
Listas de deseos
Desgraciadamente, la respuesta a Tus clientes pueden crear en tu tienda lis-

tas de deseos basadas en sus preferencias personales? suele ser, en el mejor
de los casos, No (en el peor de los casos es Listas de deseos? Qu es eso?

La funcionalidad de las listas de deseos o wishlists puede ayudar a viralizar

tus productos y dar a tu tienda mayor visibilidad.
Si an no tienes una en tu tienda online no te preocupes, ms adelante en

este mismo ebook podrs aprender cmo implementar una de forma muy
sencilla.
La pgina Acerca de
Aunque parezca mentira, abundan las tiendas online sin una pgina que ha-
ble acerca de la tienda y la gente que la compone (todos somos personas, y
nos gusta saber con quin tratamos). Y, entre las que s tienen una pgina as,
lo habitual es encontrarse con una cortita y sin fotos.

La pgina Sobre nosotros, Acerca de o similar es importantsima, especial-

mente en una tienda online. Los estudios demuestran que un 70% de los
clientes la visitan antes de realizar una compra en un comercio electrnico
en el que no han comprado nunca antes.
Es importante mostrar en ella tu propuesta de valor, pero nada de eslganes

prefabricados como nuestro objetivo es ser lderes: s claro con el usuario y
mustrale cul es tu filosofa y por qu puede confiar en ti.
Adems recuerda que, aunque estemos en internet, al otro lado del orde-
nador siempre hay una persona, y a las personas les gusta saber con quin
tratan. Coloca fotos del equipo (o, si no hay equipo, al menos una foto tuya).
Pero que sean fotos humanas, naturales, no fotos de estudio fras e imperso-
nales. Y sonred. :)
La organizacin de los productos y las bsquedas
En temas de organizacin de los productos del ecommerce, es habitual en-

contrarlo todo organizado en decenas de categoras y/o poner en la pgina
de inicio tengo con lo ms vendido, las ofertas, las novedades
Si el usuario no encuentra rpidamente lo que busca se frustrar y se ir a otra

tienda, que en internet hay muchas. As de simple y as de cruel.
As que dale facilidades para encontrar lo que quiere, pero no le marees con
miles de opciones. Si le presentas decenas de secciones, listas, categoras,
etctera, estar tan perdido como si no tuviera ninguna.
Al contrario, pon pocas categoras pero muy bien definidas, y un sistema de

bsqueda inteligente y, a ser posible, con filtros. En ese sentido son muy re-
comendables este plugin de bsqueda predictiva y este otro de filtros AJAX,
ambos gratuitos.

Up-sells y cross-sells (ventas dirigidas y ventas cruzadas)
Normalmente, en especial en los comercios electrnicos con muchos pro-

ductos en catlogo, o no se configuran o, como mucho, se establecen de
forma automtica. Demasiado trabajo para realizarlo manualmente, verdad?
Hablar de este asunto ms adelante, en un episodio especfico de este ebook,

ya que hay mucho que tratar sobre este tema. Si te identificas con dicho en
Lo que habitualmente se hace te recomiendo que le eches un vistazo.
Las pasarelas de pago
Internet ofrece ya muchas alternativas para el pago a travs de medios elec-

trnicos y no es raro encontrar quien cree que lo mejor es ofrecer cuantas
ms, mejor.
Hoy da comienzan a haber decenas de mtodos de pago electrnico dispo-

nibles, y debemos transmitir ese abanico de posibilidades a nuestros clientes:
para pagar, cuanto ms fcil mejor.
Pero tampoco hace falta ofrecer todo lo que uno encuentra por ah, o se
acaba mareando al comprador. Ofrece alternativas, pero siempre que sean
tiles. Si vendes en Espaa de poco te servir ofrecer PagSeguro (un sistema
de pago electrnico muy extendido en Brasil).
Olvida el contrarreembolso. Est anticuado y slo te ocasionar molestias y

devoluciones. Si el usuario no paga cuando est caliente y deseoso de tener
tu producto, ya no lo har das despus, cuando incluso se puede haber olvi-
dado de que lo compr.
Ofrece por supuesto pago con tarjeta (a travs de Redsys o de Stripe), y PayPal,
que aunque sea un poco caro es muy cmodo y confiable para el usuario, y
no ofrecerlo puede hacerte perder algunas ventas. Y, si tu volumen de ventas
el alto, intenta evitar la transferencia, que implica comprobaciones manuales.
Los mtodos de contacto
Parece que eso est asumido y superado: un mtodo de contacto eficaz y, a

ser posible, inmediato, se convierte en un aumento de las ventas. Es habitual
ver tiendas online con un chat disponible para que te resuelvan las dudas al
momento. Desgraciadamente, tambin es muy habitual encontrarse con un
En estos momentos no estamos disponibles o similar.
Esto casi ni necesita explicacin. Cuando un usuario va a comprar algo que

no puede tocar y sin poder hablar con un dependiente tiene dudas. Y si no
se le pueden resolver rpidamente, se va a otro sitio donde se las resuelvan.
Ponle las cosas fciles: ofrcele varios mtodos de contacto (telfono, What-

sapp, formulario, email), y que estn cerca de l, a la vista est en la pgina
que est. Y adems (y esto es vital) contesta rpido. Si t no le contestas, otro
s lo har y el usuario le comprar a l.
Necesitas plugins de calidad y con soporte para implementar fun-

cionalidades concretas? Eres implementador WordPress o ests
construyendo tu tienda online?
ECHA UN VISTAZO A MIS PLUGINS

1. MEJORANDO LA
FICHA DE PRODUCTO
IMGENES DE PRODUCTO 360
En un comercio electrnico las imgenes de producto, y la forma en que s-
tas se presentan al (posible) comprador, son vitales. Hay que recordar que el
cliente no puede ver fsicamente el producto, as que hay que ofrecerle una
visin lo ms integral del mismo para que pueda convencerse de que es lo
que necesita sin la ms mnima duda (o bien descartarlo si no es as).
Una de las mejores opciones en este sentido es ofrecer una visualizacin del
producto en 360 grados, de forma que el cliente pueda, libremente, girarlo
y observarlo en todos sus ngulos. As que vamos a ver qu alternativas nos
ofrece WooCommerce para implementar estas imgenes 360 del producto,
algo que, segn algunos estudios, aumenta las ventas entre un 15 y un 20%.
Imgenes de producto de 360o: requisitos
Tengo que empezar diciendo que, antes que nada, lo que necesitamos son
las fotografas necesarias que nos permitan mostrar el producto en 360 gra-
dos.
Aunque esto se sale del alcance de este artculo, debes tenerlo en cuenta: ni
WooCommerce ni ninguno de sus plugins hacen milagros, y con una foto
normal no podrs conseguir una visualizacin 360o del producto: necesitas
toda una serie de fotografas.
Alternativas para implementarlas en WooCommerce
Pero en fin, superado el escollo de obtener (y editar) las fotografas, vamos

a centrarnos en lo que de verdad interesa a los lectores de este blog: imple-
mentarlas en WooCommerce.
Y, a decir verdad, no hay muchas (ni grandes) alternativas para ello. De he-
cho, se limitan a un plugin gratuito y dos de pago (uno oficial, en la tienda de
WooThemes, y otro en CodeCanyon). Eso aparte de algunas herramientas de
suscripcin, un par de las cuales (como Imajize o MagicToolbox) ofrecen su
propio plugin para la integracin con WooCommerce, pero que igualmente
requieren pagos mensuales.
As que comenzar con el plugin gratuito y seguiremos a partir de ah. En las

herramientas de suscripcin no voy a entrar.

360 Product Rotation
360 Product Rotation es la nica solucin gratuita para implementar esta fun-
cionalidad en WooCommerce. Tiene su punto de dificultad configurarlo y po-
nerlo a funcionar correctamente, pero el objetivo bien merece la pena, no?
Para empezar, la subida de imgenes es algo engorrosa. El plugin crea el di-

rectorio /wp-content/uploads/yofla360, y en ese directorio tendrs que subir,
mediante FTP, cada set de imgenes dentro de su propia carpeta. Al menos
as evitas la prdida de calidad en las imgenes subidas a travs de la biblio-
teca de medios.
Una vez hecho esto ya tienes ese set de imgenes disponibles para crear una
vista de producto 360. Si vas a Medios > 360 Views podrs ver cada una de
las carpetas que has subido a ese directorio, que sern las vistas que puedes
crear.
Una vez hecho todo esto, slo te queda pinchar en el enlace enbed it que
puedes ver en la imagen de arriba, y se abrir una popup con un shortcode
que puedes utilizar en cualquier lugar de la web (cualquier lugar que admita
shortcodes, quiero decir).
Como ves es bastante limitado: no tiene una integracin con WooCommerce

que permita sustituir la imagen de producto por la vista en 360, sino que tie-
nes que insertarla mediante el shortcode en algn sitio, como la descripcin
del producto.
Por supuesto, siempre quedar mucho mejor y ms profesional aadir a la fi-

cha de producto una nueva pestaa llamada Vista 360o o algo similar, y poner
en ella el shortcode. Veremos cmo hacerlo en este mismo ebook.
WooCommerce 360 Image
Tengo que decir que WooCommerce 360 Image es, con diferencia, la mejor

opcin para implementar las imgenes de producto de 360 en WooCom-
merce. Por algo es la oficial.
Para empezar est plenamente integrada con WooCommerce y su galera de

producto. De hecho, basta con aadir las diferentes fotografas que confor-
man el set a la galera de producto para que la imagen del producto de Woo-
Commerce se convierta en una imagen 360 interactiva.
Tambin es (y estas son bondades que tambin se aplican a los otros dos
plugins nombrados en este artculo) responsive y adaptado a dispositivos tc-
tiles. Al igual que el anterior, tambin te provee de un shortcode por si quieres
incrustar la imagen 360 en cualquier otro lugar.
Su precio (49$ a fecha de escribir esto, la licencia para un sitio) no es prohi-

bitivo.
Smart Product Viewer
Y dejo para el final la que considero la peor opcin, Smart Product Viewer.
Y fjate, que es fcil de utilizar, da un resultado con buen aspecto, tambin

est plenamente integrado con WooCommerce y es bastante ms barato que
el anterior (20$ cuesta en estos momentos). Por qu digo entonces que lo
considero la peor opcin?
Si pinchas aqu podrs ver una demo en vivo de este plugin. Has pinchado?
Si has pinchado ya te has dado cuenta que deb decir si pinchas aqu y espe-
ras ms de medio minuto podrs ver una demo en vivo de este plugin.
En serio? Sabes cuntas ventas perders si tu cliente tiene que esperar 33

segundos (de media) a que se cargue la imagen del producto? En realidad,
este plugin utiliza las imgenes para compilar una vista 3D del producto, lo
que es bastante ineficiente.
Entiendo que el tiempo de carga depender enormemente de cmo de opti-

mizadas estn las imgenes que uno sube, y que para la demo hayan querido
utilizar imgenes de muy alta calidad, para que la vista sea perfecta. Pero en
serio, si haces a un cliente esperar treinta segundos para ver cada imagen de
producto, no venders nada.

MEJORAR EL SELECTOR DE VARIACIONES
En una tienda online es muy importante tener las fichas de producto muy
optimizadas, ya que es lo que el visitante est viendo mientras decide si rea-
liza o no la compra.
Ya hemos visto en el captulo anterior cmo mejorar las imgenes de pro-

ducto en WooCommerce con vistas 360o, y en ste vamos a realizar otra me-
jora en la ficha de producto: el selector de variaciones.
El selector de variaciones en los productos variables
En los productos variables el usuario puede seleccionar una variacin u otra

mediante un men desplegable bastante feo y poco usable:
Como ves, este men permite elegir una u otra variacin y la imagen del pro-
ducto se actualiza. Tambin cambia el producto activo, y en cada momento
el botn Aadir 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. Adems, 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 sabrs que las variacio-

nes se pueden aadir en la misma pantalla de edicin 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 zapatera la mayo-
ra de los artculos tendrn como variaciones las tallas de los zapatos, o si es
una tienda de ropa muchas prendas variarn en talla (S, M , L) y/o en color.
Cuando sucede esto es ms eficiente aadir las variaciones en el men Pro-

ductos Atributos. Ah podemos aadir atributos que estarn 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 aadir las variaciones:

A partir de ahora estas variaciones estarn disponibles para cualquier produc-
to variable que crees en la tienda. De esta forma a cada uno de los productos
puedes aadirle algunas (o todas, o ninguna) de las variaciones creadas con
un slo click, sin tener que ir crendolas en cada uno de ellos.
Cambiar el selector de variaciones
Como deca ms arriba, el selector que pone WooCommerce para eso es un

men desplegable bastante feo y poco usable: para cambiar la seleccin el
usuario tiene que desplegar el men y buscar la variacin 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 slo 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 slo click.
Vamos a ver cmo podemos conseguir esto.
Selector de color
Es bastante sencillo conseguirlo. Al activar el plugin se aade una nueva op-

cin en la pantalla en la que se aaden las variaciones a los atributos gene-
rales, en Productos Atributos Configurar trminos (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 slo tiene dos opciones: Ninguno (None) o Color.
Al elegir color se abre un selector de colores. Si pinchas en l podrs elegir el

color en el cuadro de degradado, poniendo directamente el cdigo hexade-
cimal (HTML) del color o bien eligiendo uno de los ocho colores bsicos. 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, ms sencillo no puede ser.
Selector de talla
Como hemos visto ms 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 pequea 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 ms de un atributo
Ya rizando el rizo, tenemos los productos variables con ms de un atributo. En

este caso seleccionar las variaciones segn viene por defecto en WooCom-
merce puede ser un autntico martirio para los clientes, puesto que ahora
cuentan con mltiples mens desplegables. Una autntica aberracin:
Sin embargo con este plugin la ficha de producto se transforma, como por
arte de magia, en esto otro:
Como ves, mucho ms intuitivo y visual. Justo lo que hace falta para mejorar
el proceso de venta y, por tanto, aumentar conversiones.

PESTAA PERSONALIZADA
CON FORMULARIO DE CONSULTA
Ya hemos visto cmo ir mejorando poco a poco la ficha de producto en
WooCommerce aadiendo un selector de variaciones en los productos va-
riables o mejorando la forma en que se muestran las imgenes. Ahora vamos
a seguir mejorndola aprendiendo a aadir pestaas personalizadas en la
ficha de producto.
Adems, vamos a realizar paso a paso un ejemplo prctico aadiendo una

pestaa que contenga un formulario de contacto para que, desde la propia
ficha, el cliente pueda directamente consultarnos cualquier duda que tenga
respecto al producto.
Aadir pestaas personalizadas en la ficha de producto
Como ya sabes, por defecto WooCommerce incluye dos pestaas en la ficha

de producto: la de descripcin y la de valoraciones. Sin embargo muchas ve-
ces necesitaramos aadir otras, como una que especifique, por ejemplo, los
materiales o las caractersticas tcnicas del producto (en lugar de mezclarlo
con la descripcin), los accesorios disponibles, etc.
Esto lo podemos conseguir fcilmente gracias al plugin gratuito WooCom-

merce Product Tabs. En estos momentos lleva sin actualizar ms de un ao,
pero yo lo utilizo habitualmente y funciona a la perfeccin, incluso con la
versin ms 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 opcin WooCommerce Product Tabs.
En l vers 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 aadas aqu ser una nueva pestaa en
la ficha de producto, y la interfaz es muy similar a la que ya conoces de, como
digo, entradas o productos.

En este captulo estamos viendo cmo aadir pestaas personalizadas
en la ficha de producto, y aadiremos una con un formulario de contac-
to, utilizando una combinacin de plugins gratuitos y una configuracin
especial.
Si quieres aadir un formulario de consulta en una pestaa de la pgina

de producto, totalmente personalizable, de alta calidad y adaptado a la
Ley de Proteccin de Datos espaola, tienes disponible este plugin.
www.enriquejros.com
Configuracin de la pestaa
Los campos principales ya los conoces de sobra: ttulo y contenido. El ttulo

que le pongas ser el que se muestre como nombre de la pestaa. En cuanto
al contenido, si lo dejas vaco la pestaa 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 permitirn configurar todos
los aspectos de nuestra pestaa.
Categoras
Bajo la ventana de descripcin encontrars otra titulada Conditions. Lo que

puedes elegir en ella son las categoras de productos que mostrarn esta pes-
taa.
Es decir, puedes crear distintas pestaas para categoras 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 caracterstica en tu propio comercio
electrnico en funcin de las categoras 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 pestaa
aparezca en todos los productos de la tienda. As nos ahorramos de ir selec-
cionando todas las categoras.
Y, bajo esta opcin, encontrars un selector numrico para elegir la prioridad

de la pestaa, que es lo que nos permitir elegir el orden en que aparecer la
pestaa en la ficha de producto:
Las pestaas con prioridad 1 a 10 aparecern antes (es decir, por delan-
te) de la pestaa Descripcin
Si estableces la prioridad entre 11 y 30 la pestaa aparecer entre las de
Descripcin y Comentarios
Las pestaas con prioridad menor (es decir, 31 o ms) aparecern des-
pus de esas dos
Por supuesto, esto tambin te permite disponer las pestaas 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 pestaa
entre medias de dos ya existentes podrs utilizar el hueco, en lugar de tener
que rehacer todas las numeraciones.
Pestaa personalizada con formulario de contacto
Ya hemos visto de qu pueden aadirse pestaas (todas las que quieras), y

como has podido observar es muy sencillo.
Vamos a realizar ahora un caso prctico, muy til, viendo paso a paso cmo
crear una nueva pestaa en la ficha de producto que llamaremos Alguna
duda? Consltanos! 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 ms extendido para esta funcionalidad.
El siguiente paso es crear el formulario propiamente, as que slo tenemos

que ir a Contacto Aadir nuevo. Le ponemos al formulario el ttulo que
creas ms 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 cmo vamos a saber cul es
el producto que el cliente estaba visitando. Por lo tanto dejaremos el formu-
lario ms o menos as (he cambiado un poco los textos, los que viene por
defecto son muy fros):
Cul es tu nombre? (requerido) 

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

[email* your-email] 
Cul es tu duda sobre este producto? 

[textarea your-message] 
[submit Enviar]
Recuerda que, si ests en Espaa, debes hacer algn cambio adicional para

adaptar el formulario a la LOPD (la Ley de Proteccin de Datos) y cumplir la
ley. Cmo hacerlo lo explico en este vdeo (bsicamente se trata de aadir
una casilla de verificacin con un enlace a la poltica de privacidad de tu sitio
web).
An tenemos que hacer algunos cambios ms ya que, cmo digo ms arriba,

cuando un cliente nos mande una consulta sobre un producto tendremos
que saber de qu producto est hablando. Para ello pinchamos en la pestaa
que dice Correo electrnico. El campo De suelo cambiarlo para que ponga
[your-name] <[your-email]>
As nuestro gestor de correo electrnico considera que el email ha llegado

directamente de la direccin 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 validacin (ya que el email no viene
de ah realmente, sino de la web), pero con ignorarlo es suficiente. Tambin
personalizo un poco el campo Asunto.
El cambio importante lo vamos a realizar en el cuerpo del mensaje. Ah, en la

posicin que quieras, debes aadir una (o varias) de estas etiquetas:
[_post_id] Para saber el ID del producto que visitaba el cliente

[_post_title] Indica el ttulo del producto donde estaba el formulario
[_post_url] Para recibir la direccin URL donde estaba el formulario
[_url] La anterior slo vale si est en una entrada/pgina/producto (como

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

refiere la consulta. Incluso puedes poner varios (o todos) para despus iden-
tificar el producto del modo que ms te convenga. Por ejemplo, el contenido
del Cuerpo del mensaje poda quedar ms 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 encontrars remarcado en naranja, bajo el nombre del formulario.
Poniendo el formulario en una pestaa personalizada
Pues ya est lo ms complicado (y ya has visto qu sencillo es). Ahora slo

falta crear nuestra pestaa y poner el formulario en ella. Para ello vamos a la
opcin para crear pestaas que hemos visto antes (recuerda, en WooCom-
merce Product Tabs) y pulsamos el botn Add New.
Ponemos el ttulo a la nueva pestaa que vamos a crear para nuestra ficha de
producto (en mi ejemplo Alguna duda? Consltanos!), 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 pestaa est disponible para todos los productos de la tienda. Si no, tendrs
que indicarle abajo para qu categoras la quieres utilizar.
Tambin hay que establecer la prioridad. En mi caso he puesto 100, ya que

quiero que aparezca la ltima de la derecha, despus de Descripcin y de
Comentarios, y si despus quiero aadir otras pestaas 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 recibirs en
tu email la duda junto con el ttulo, URL e identificador del producto al que se
refiere, y podrs contestar al cliente a su email.
Lo que ocurra a continuacin ya depende de ti. Ya sabrs que una respuesta

rpida, 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
AADIR UNA LISTA DE DESEOS
Seguramente lo has visto en multitud de comercios electrnicos: un enlace
que dice lista de deseos o wishlist en un lugar destacado de la ficha de pro-
ducto. Y no es de extraar que lo veas. De hecho, si no tienes una en el tuyo,
ests perdiendo ventas.
Porque, bsicamente, una lista de deseos (wishlist, por su nombre en ingls)

permite que un cliente guarde una relacin de productos de tu comercio que
le gustan especialmente, que desea tener y por algn motivo no puede o no
quiere comprar (an) o que compra frecuentemente.
As que si no tienes una en tu tienda, ponte las pilas. En este captulo 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 seleccin 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 artculos que
compra habitualmente y quiere tener su propia seleccin a mano para reali-
zar una compra rpida, ideas para regalar, artculos que le pueden interesar y
que guarda para revisarlos en otro momento con atencin
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 vers.

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 estn-
dar para crear un pedido rpidamente
Pueden utilizarla para gestionar sus productos favoritos
Pueden compartirla para utilizarla como una lista de regalos
Y creme, los clientes la utilizan mucho. Te lo digo yo, que cada vez que se
acerca una fecha sealada mi mujer me hace llegar disimuladamente (men-
tira, no hay disimulo ninguno) sus listas de deseos de diferentes comercios
electrnicos. Lo hace, claro, para facilitarme la tarea de elegir y asegurarse
de que acierto con el regalo.
Ventajas para tu ecommerce
Y si an no has visto las ventajas para tu negocio es que ests pensando en

otra cosa. Cntrate!
Una nueva lista siempre puede convertirse en una nueva compra

Aumenta la fidelizacin 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 electrnico, lo que te puede
traer nuevos clientes de entre los contactos de los que ya tienes
Te ayuda a identificar los productos que ms gustan de entre tu cat-
logo
Puedes usarlas para realizar campaas de email marketing mucho ms
enfocadas, y por tanto ms 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 habras 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 vers que es fcil y rpido. 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 hablbamos de cmo mejorar las imgenes de producto en Woo-
Commerce.
Existe una alternativa que adems 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 opcin nueva en el men de adminis-
tracin: 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 pgina, la pgina Lista de Deseos.
Asegrate de ponerla en alguno de los mens, de forma que sea visible a tus
clientes, ya que es la pgina en la que podrn ver, precisamente, los produc-
tos que han guardado (ahora veremos cmo lo harn) en su lista de deseos.
A m me gusta ponerla en el men superior, junto a las opciones de Mi Cuen-

ta, Realizar pedido, etctera. Pero vamos, que eso va al gusto de cada uno:

Tambin puedes hacer que la opcin aparezca slo a los clientes registrados
cuando estn en su cuenta. As queda ms limpio, mostrndose slo cuando
es necesario. Eso lo puedes conseguir utilizando mens condicionales (expli-
co cmo se hace en este artculo), haciendo uso de la condicin is_user_lo-
gged_in ().
Configuracin 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 vers
tres pestaas: Ajustes, Colores y Versin Premium.
En la versin premium no voy a entrar. Ofrece algunas opciones interesantes

como mltiples listas por clientes, hacer las listas privadas, enviar al carrito
mltimples productos de la lista con un slo botn, bsquedas 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 versin premium cuesta exactamente lo mismo
que cuesta el plugin de WooThemes del que te hablaba ms arriba, Woo-
Commerce Wishlist.
De las otras pestaas, la de Colores slo tiene una opcin para convertir el
enlace de Aadir a la lista de deseos en un botn. En caso de que lo quieras
as puedes introducir el estilo personalizado para el botn como CSS o selec-
cionar que se le aplique la apariencia de botones que viene con tu plantilla.

Lo realmente interesante est en la pestaa de la izquierda, la de Ajustes. No
voy a comentar todas las opciones, porque son muy sencillas y la mayora
autoexplicativas. Adems, 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.
Posicin
Aqu seleccionas en qu parte de la ficha de producto ir el enlace (o botn)

de Aadir a la lista de deseos. Te da cuatro opciones:
Despus de Aadir al Carrito

Despus de miniaturas
Despus de sumario
Usar shortcode
Las dos primeras lo colocan o bajo el botn de Aadir al Carrito o bajo el

carrusel de imgenes del producto (si lo hay, si no bajo la imagen principal).
Con la tercera quedara despus de la descripcin breve del producto y la l-
tima sera para aadirlo a mano mediante un shortcode.
La opcin que personalmente me gusta ms es la primera de todas, ya que

pone el enlace justo donde ms se ve. Visible por cierto tambin para los vi-
sitantes casuales, que sabrn que, si se registran en la tienda, podrn realizar
una lista de deseos. Interesante, no?

Redirigir a la cesta
Los artculos en la lista de deseos tienen, junto a cada uno de ellos, un peque-
o botn para aadir el producto al carrito (que se puede quitar desde estos
mismos ajustes). Con esta opcin dirigiremos al usuario al carrito directa-
mente tras pulsar ese botn.
Esta opcin es poco til y muy engorroso salvo casos muy especiales, ya que
si el usuario quiere aadir al carrito varios artculos ser para l un suplicio. Lo
mejor es dejarla como est, desactivada.
Las opciones de redes sociales y compartir
Esta parte es interesantsima. 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 algn regalito tambin, supongo).
Aspecto de la pgina Mi lista de deseos con los botones de compartir

Eso trae ventas! De hecho, deberas dejar activadas todas las opciones que
propone el plugin (Facebook, Twitter, Pinterest, Google+ y correo electrni-
co). Cada opcin de stas que desactives son oportunidades de venta que
pierdes.
Esmrate 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 direccin 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 cmprame 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 ms 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 an no lo tienes totalmente dominado o bien
porque tienes muchos productos por subir al principio y vas rpido.
Aumentar los ingresos en nuestra tienda online
Es normal como digo, pero despus 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 vas:
Aumentando el trfico: ms visitas = ms ventas, eso es innegable

Aumentando el ratio de conversin: a mayor porcentaje de conversin,
ms 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 ms 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 ms inri, es el que menos trabajo cuesta (siempre es ms
costoso aumentar el nmero de visitas o la conversin).
As que ya sabes, obligado dedicar cada da aunque sea unos minutos a me-
jorar algunas fichas de producto, aunque sean slo dos tres al da. Puedes
hacerlo aadiendo ms texto en la descripcin o ms imagenes, mejorando
lo que ya hay o bien aplicando lo que vamos a ver en este artculo: los pro-

ductos vinculados.
La ficha de producto y los productos vinculados
La opcin de los productos vinculados la puedes encontrar en la ficha de

producto, en el bloque Informacin del producto, en la pestaa Productos
vinculados.
Ah tienes tres opciones o tipos de vinculacin 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 ayudarn (y mucho) en
tu misin de aumentar el ticket medio de caja. Vamos a ver cmo!
Los up-sells en WooCommerce
Los up-sells (expresin que en espaol tiene difcil traduccin) son produc-
tos con una funcionalidad y caractersticas similares al producto en cuestin,
pero ms caros o con una rentabilidad mayor.
La cuestin est en que, cuando un cliente se interese por un producto, mos-

trarle otros similares pero de una gama ligeramente superior o que sea ms
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 ms lo ignorar.
Pero, y si le muestras otro anillo (u otros anillos) de plata, de similares carac-

tersticas, 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,
habrs aumentado la venta en un 10%. Captas la idea?
Amazon, el gran marketplace nmero uno en ventas en internet, utiliza esta

estrategia de forma muy inteligente con su Los clientes que compraron este
producto tambin compraron.
Evidentemente los clientes no compraron dos artculos equivalentes, eso no

es ms que una excusa para mostrarte otros artculos similares al que es-
ts viendo pero algo ms caros. Lo que significa una mayor comisin para
Amazon.
Lo bueno es que WooCommerce permite aadir esos up-sells manualmen-

te, por lo que t decides qu productos ofrecer a tus clientes en funcin de
aquellos que estn viendo. Vendes porttiles? Ofrece uno de la misma mar-
ca pero con algo ms de memoria RAM. Mviles? Qu tal una pantalla un
poco ms grande? Y lavadoras? Esta otra centrifuga a ms revoluciones

Como ves implementarlo es muy sencillo y puede hacer que a final de mes
tus ventas suban, an recibiendo el mismo trfico y sin tocar el embudo de
conversin.
Los cross-sells o ventas cruzadas
La otra opcin 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 artculos 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 hamburguesera 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 ests comprando), pero si te ofrezco las
patatas fritas quiz las compres tambin.
En el carrito
WooCommerce maneja esto de forma muy eficaz, porque lo hace en el ca-

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

Te has decidido por esa tablet? No necesitars por casualidad una funda?
Ests comprando una secadora? A lo mejor quieres que te hagamos la ins-
talacin 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 electrnico, 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 razn que
sea. As que vamos a ver cmo destacar productos en WooCommerce in-
cluyendo los mejores trucos y tcnicas para mostrarlos a nuestros visitantes.
Cmo destacar productos en WooCommerce
Para ello no hace falta ningn plugin especial, ya que WooCommerce incluye
por defecto una buena gestin de productos destacados por medio de un
shortcode.
Basta con ir a la pantalla de productos y, en el listado, seleccionar cules 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 pondrn en primer lugar. Puedes desmarcar un producto simple-
mente volviendo a pinchar en la estrella azul.

Mostrar productos destacados en WooCommerce
Bien, ahora ya estn seleccionados los productos que queremos destacar.

Qu hacemos ahora? Bueno, pues mostrarlos donde ms nos interese. T
eliges:
En la barra lateral
En el pie de pgina
En la pgina de inicio
En una seccin especial de la tienda
Esos son los lugares tpicos, pero aqu te doy algunas otras ideas en las que a
lo mejor no habas pensado:
En la pgina de error 404

En la pgina de contacto, bajo el formulario
En una entrada del blog En la cabecera de la pgina
En una pestaa personalizada en las fichas de producto, tal y como he-
mos visto unos captulos ms arriba
Y mil sitios ms. Imaginacin al poder! Se pueden mostrar literalmente don-

de se quiera, aunque en algunos sitios har falta insertarlos mediante cdigo
PHP. Pero vamos a verlo por partes.
Shortcode para mostrar los productos destacados
Mostrarlos en una pgina o una entrada es muy fcil: slo hay que utilizar
un shortcode. S, ya sabes, uno de esos pequeos cdigos prefabricados
que van entre corchetes. Concretamente el que necesitamos para mostrar los
productos destacados es [featured_products]
As, sin ms. Siempre que pongas ese pequeo shortcode en una pgina o
una entrada, aparecern los productos destacados. Pero es que adems po-
demos obtener mayor control sobre el resultado presentndolos como que-
ramos.
Para ello este shortcode admite varios atributos:
per_page: nmero de artculos destacados a mostrar por pgina (ya

que, por supuesto, admite paginacin)
columns: el nmero de columnas en que se deben mostrar los produc-
tos destacados

orderby: para indicarle qu parmetro debe utilizar para ordenarlos. Por
defecto, si no se indica nada, los ordena por fecha de publicacin (que es
lo mismo que poner orderby=date), pero admite muchos otros parme-
tros. Los ms interesantes son:
rand: al azar
ID: por ID, que como se asigna automticamente por orden, suele
coincidir en orden con date
name: por nombre
title: por ttulo
modified: por fecha de modificacin
comment_count: por nmero de comentarios
order: para indicar si el parmetro indicado en orderby debe tomarse en
orden ascendente (order=asc) o descendente (order=desc)
Lioso? En absoluto! Ya vers como con un par de ejemplos se ve muy fcil:
[featured_products per_page=16 columns=4 orderby=modified or-

der=asc]
Con ese shortcode podrs mostrar los productos destacados ordenados en

columnas de a cuatro, listando 16 productos por pgina (no realiza pagina-
cin, si hay ms mostrar slo los diecisis primeros), ordenados por fecha de
modificacin 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 pgina se mostrarn solamente cuatro de esos

cien, y como le indicamos que los ordene al azar cada vez sern 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 deca antes, puedes mostrarlos donde te d la gana, y pona algunos

ejemplos como la barra lateral, el pie de pgina 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 vdeo explico cmo hacerlo.
Por supuesto, hay que pensar out of the box e ir ms all del tpico 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 pgina.
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 pgina de error 404, al
final de cada una de las entradas del blog bajo los comentarios, etctera.
Eso lo podemos hacer insertando el cdigo PHP correspondiente en el lugar
que nos interese de nuestra plantilla. Y cul es el cdigo que hay que inser-

tar? Pues fcil. WordPress pone a nuestra disposicin una funcin para eso: la
funcin 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 tambin ser algo como post-content.php, loop-single-post.php o de
mil formas ms) y aadir, al final (ojo al sitio):
<?php echo do_shortcode ([featured_products]); ?>
Aunque lo correcto es siempre aadir un condicional de verificacin, para

evitar errores futuros por cambios en alguna versin. Lo que yo pondra es:
<?php if (shortcode_exists (featured_products)) echo do_shortcode ([featu-

red_products]); ?>
Aadiendo, claro, los atributos que le queramos dar. Eso podra ahorrar en el
futuro errores inesperados. Quedara muy bien aadirlo bajo los comentarios
con el ejemplo que daba ms arriba para mostrar cuatro al azar de entre una
gran cantidad, o en una pgina personalizada de producto no encontrado,
no te parece?


MEJORAR LOS PRODUCTOS RELACIONADOS
Una caracterstica 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 caracterstica de

WooCommerce: aumenta el nmero de pginas vistas, el tiempo de perma-
nencia en la web y, en consecuencia, las ventas. Adems la automatizacin
de los elementos mostrados en este apartado en nos facilita la tarea y nos
ahorra tiempo. No tenemos por qu preocuparnos de nada. En teora.
Sin embargo tiene tambin algunos puntos dbiles, sobre todo en el aspecto
de la personalizacin: no permite limitar los productos mostrados en cuan-
to a concordancia slo por etiquetas o slo por categoras, ni el nmero de
productos que se mostrarn, ni mucho menos permite elegir manualmente
cules mostrar para un producto concreto.
Afortunadamente hay algunas formas de hacerlo, aunque WooCommerce

no ofrezca esas opciones ni en el apartado de configuracin ni en la ficha de
producto. Vamos a ver cmo conseguirlo.
Qu tiene en cuenta WooCommerce para mostrar un producto como re-

lacionado
Como deca ms arriba WooCommerce tiene en cuenta, para mostrar los

productos relacionados, tanto las categoras como las etiquetas. Esto, en la
mayora de las ocasiones, es un sistema muy eficaz y que funciona bastante
bien.
Sin embargo, hay veces en que, segn cmo establezcamos unas y otras,
esto podra no tener mucho sentido.
Por ejemplo, si tenemos un ecommerce de ropa y establecemos categoras

como pantaln, falda, vestido, camiseta, etctera y, para facilitar las bs-
quedas o la seleccin 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-
ln azul (seguramente est buscando comprarse un pantaln) y le aparezca
como relacionado un jersey de lana slo porque es tambin azul. Lo ideal en

este caso es que se utilizaran slo categoras para establecer qu productos
se muestran como relacionados.
Productos perfectamente relacionados gracias a una correcta asignacin de categoras y etiquetas
O a la inversa. Podemos tener una tienda online de productos deportivos y

que las categoras sean casco, camiseta, calzado, etctera, y las etiquetas
running, ciclismo, ftbol, y as.
No tendra 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-
tara en que, en este caso, se han establecido mal las categoras y habra que
estudiar una forma ms eficiente de hacerlo, pero entiendes lo que quiero
decir, verdad?
Tener en cuenta slo las categoras o slo las etiquetas
Bueno, si tu problema es ste puedes respirar tranquilo: aunque WooCom-

merce no permite (en las opciones de configuracin) desechar las categoras
o las etiquetas a la hora de seleccionar los productos relacionados, la solu-
cin para conseguirlo es muy sencilla.
S, es cierto que hay que utilizar cdigo, pero no te preocupes: te lo voy a dar
masticado y listo para usar.
Primera opcin: quieres que para los productos relacionados que se mues-
tran en tu tienda WooCommerce tenga en cuenta las categoras, pero no las
etiquetas.
Bien, tienes que ir al archivo de funciones del tema que ests utilizando (Apa-
riencia Editor funcions.php) , o (mucho ms recomendable) en tu plu-
gin de funciones personalizadas como explico en este artculo, y aadir este
cdigo al final del todo (recuerda siempre, antes de modificar nada, realizar
copias de seguridad):
/* Mostrar productos relacionados en WooCommerce slo por categoras */
add_filter (woocommerce_product_related_posts_relate_by_tag, function () {
return false;
});
As, sin ms, slo 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. Creme, con el tiempo empiezas a acumular funciones
personalizadas y es fcil olvidarse.
Y la segunda opcin: quieres que se muestren los productos personalizados

teniendo en cuenta las etiquetas, pero no las categoras. Muy bien, en ese
caso el cdigo es el siguiente:
/* Mostrar productos relacionados en WooCommerce slo por etiquetas */
add_filter (woocommerce_product_related_posts_relate_by_category, function () {
return false;
});

Y listo. Ya lo tienes. Ves qu solucin ms fcil y rpida?
Cambiar el nmero de productos relacionados que se muestran
Vamos a ver ms cosas que se pueden personalizar aunque no estn in-

cluidas como opcin ni en los ajustes de WooCommerce ni en las fichas de
producto. Entramos ahora con el nmero de productos relacionados que se
mostrarn 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 tambin es necesario
tocar algo de cdigo, pero de nuevo te lo facilito.
Se trata otra vez de ir al archivo de funciones y pegar un trozo de cdigo 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: seguirn mostrn-
dose un mximo de cuatro productos relacionados en la ficha del producto.
Pero ahora puedes cambiar ese nmero fcilmente. Basta que cambies don-
de dice:
posts_per_page => 4,
por el nmero que te d la gana. Y ya lo tienes. A partir de ese momento

WooCommerce tomar la cantidad que t hayas puesto como nmero mxi-
mo para los productos relacionados. Si no te gusta usar cdigo y prefieres un
plugin, puedes utilizar ste.

Ms control: Custom related products for WooCommerce
Esto est muy bien si queremos excluir las etiquetas o las categoras a la hora
de filtrar los productos relacionados, pero y si queremos un mayor control?
Porque podramos querer determinar nosotros manualmente cules apare-
cern 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 aparecern en la seccin de productos relacio-
nados.
Para ello slo tenemos que editar el producto y, en la ficha de producto, ir

hasta la seccin de productos vinculados.
Vers entonces que ah ha aparecido, bajo las cajas de texto de las up-sells y
cross-sells (como ya vimos en otro captulo de este libro), un nuevo cuadro:
el de Productos Relacionados.
Si no rellenas nada en esa casilla WooCommerce establecer las relaciones
como hasta ahora: basndose en categoras y etiquetas (a no ser que hayas
utilizado alguno de los cdigos que menciono ms arriba, en el apartado an-
terior).
Sin embargo si pones algo, aunque slo sea un producto, WooCommerce

ignorar sus filtros y en la ficha de producto aparecer en la seccin de pro-
ductos relacionados exactamente lo que t hayas establecido ah.
Pero ojo, recuerda que slo se mostrarn hasta cuatro, por muchos que colo-
ques. Claro, que ya sabes cmo hacer que aparezcan ms, no?

MEJORAR LAS BSQUEDAS
Como has podido ir viendo en los captulos precedentes, pese a ser un gran
sistema de comercio electrnico, WooCommerce tiene algunas carencias de
usabilidad en su instalacin por defecto. Es el caso, por ejemplo, de la selec-
cin de variaciones en los productos variables o de las bsquedas de produc-
tos.
Un sistema de bsqueda 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 cmo podemos mejorar el siste-
ma que WooCommerce incluye por defecto, que bsicamente es el de Wor-
dPress (til para buscar en un blog pero no tanto en una tienda online).
Bsqueda inteligente en WooCommerce
La primera mejora evidente es incluir una bsqueda inteligente. Considera

estas dos situaciones:
El cliente introduce un parmetro de bsqueda, pulsa enter o el botn

Buscar, y se carga una nueva pgina con los resultados de la bsqueda.
Si no hay ningn resultado, se le informa de ello y puede repetir el pro-
ceso.
El cliente puede ver, mientras introduce el trmino de bsqueda, una
lista a tiempo real de los resultados coincidentes, incluyendo una peque-
a imagen, el nombre, el precio y, si queremos, una corta descripcin. No
es necesario que la pgina se recargue y si no hay resultados simplemen-
te puede reescribir la palabra clave.
Cul 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 rpido. 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 pgina) 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 bsquedas de WooCommerce y tener esto otro:

Viendo la imagen anterior quiz te preguntas si la bsqueda funciona co-
rrectamente. Esos resultados son debidos a que corresponde a una web para
pruebas, experimentos, etctera, y suelo poner en la descripcin 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 opcin en el men de administra-

cin (Adv. Woo Search) que te permitir configurar la forma en que se mues-
tran los resultados de la bsqueda. Entre otras opciones, podrs elegir:
Si se muestra el nombre
Si junto al resultado aparece una imagen miniatura del producto
Si muestra una descripcin (y, si es as, cuntas palabras debe mostrar y
si las coge de la descripcin larga o de la corta)
Si quieres que aparezca el precio
Si remarca en los resultados los trminos buscados
Si deberan o no aparecer etiquetas o categoras como resultados de
bsqueda
Si marca los artculos en oferta

El nmero mximo de resultados
Dnde debe buscar
Como ves, las bsquedas mejoran sensiblemente utilizando este plugin. Si

hasta ahora ests usando el sistema de bsqueda por defecto, prubalo. Tus
clientes van a notar la diferencia, lo que significa que t tambin la acabars
notando (cualquier mejora en la usabilidad acaba traducindose en un au-
mento de las ventas).
Para ello slo tienes que ir a Apariencia Widgets y poner el widget AWS
Widget en el rea de widgets que ms convenga a tu diseo (generalmente
ser en la cabecera o en la barra lateral).
Filtros de productos
Si las bsquedas inteligentes eran una forma de mejorar el sistema de bs-

quedas en un comercio electrnico, la otra gran manera es mediante la apli-
cacin 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 an podemos mejorarlo mucho ms aa-
diendo otros filtros: los atributos.
Filtros en combinacin
Y es que cuando aades 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 gustara poder contar con un
sistema de bsqueda 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 captulos 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 opcin en el men de administracin

en YITH Plugins Ajax Product Filter, pero ah bsicamente slo 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-

drs ir a Apariencia Widgets donde encontrars 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 prctica definir siempre atributos, aunque
no se trate de productos variables).
Podrs hacerlo con cuatro formatos diferentes:
Lista
Color
Etiqueta
Desplegable
De esta forma podrs aadir el widget tantas veces como atributos puedas
tener, cada uno de ellos en el formato que ms 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 combinacin con el filtro de

precios de WooCommerce:
Te das cuenta de lo potente que es una bsqueda as? En cuanto tu tienda

online tenga unas pocas decenas de productos, tus clientes van a agradecer
un montn poder contar con un sistema de este tipo. Porque si un cliente
tiene que estar recorriendo pginas 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 despus por los atributos que busque (que dependiendo
de tus productos sern unos u otros). Encontrar as lo que est buscando ser
cosa de, literalmente, unos segundos.
Por ltimo, el widget YITH WooCommerce Reset Filter (tambin provisto por
este plugin) te permitir aadir un botn para resetear los filtros.

Enrique J. Ros
Diseo & desarrollo web con WordPress
www.enriquejros.com

Mejorar Woocommerce

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mejorar Woocommerce

Uploaded by

Copyright:

Available Formats

MEJORANDO

APRENDE CMO MEJORAR AN MS

Copyright 2017 Enrique J. Ros

Permteme, antes de empezar, dedicar unas pocas palabras a darte las

Tanto si es as como si no, te animo tambin a darme tu opinin. Todas

Tambin puedes contactar conmigo a travs de las redes sociales:

Tienes a quien acudir cuando necesitas ayuda, asesoramiento tcnico y

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

MANTENIMIENTO Y SOPORTE TCNICO RESOLUCIN 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? Contctame y hablamos.

En este primer captulo empezaremos viendo ocho errores comunes que se

En los captulos sucesivos veremos aspectos ms concretos y centrados en

Las imgenes de producto

Lo que habitualmente se hace

Normalmente se utilizan las imgenes que facilita el proveedor o se buscan

Lo que deberas hacer

Mejorando WooCommerce 5 www.enriquejros.com

Los sliders o carruseles de imgenes

Lo que habitualmente se hace

Es raro hoy en da encontrar un comercio electrnico que no tenga un slider

Lo que deberas hacer

Lo que habitualmente se hace

Desgraciadamente, la respuesta a Tus clientes pueden crear en tu tienda lis-

Mejorando WooCommerce 6 www.enriquejros.com

La funcionalidad de las listas de deseos o wishlists puede ayudar a viralizar

Si an no tienes una en tu tienda online no te preocupes, ms adelante en

Lo que habitualmente se hace

Mejorando WooCommerce 7 www.enriquejros.com

La pgina Sobre nosotros, Acerca de o similar es importantsima, especial-

Es importante mostrar en ella tu propuesta de valor, pero nada de eslganes

La organizacin de los productos y las bsquedas

Lo que habitualmente se hace

En temas de organizacin de los productos del ecommerce, es habitual en-

Lo que deberas hacer

Si el usuario no encuentra rpidamente lo que busca se frustrar y se ir a otra

Al contrario, pon pocas categoras pero muy bien definidas, y un sistema de

Mejorando WooCommerce 8 www.enriquejros.com

Lo que habitualmente se hace

Normalmente, en especial en los comercios electrnicos con muchos pro-

Lo que deberas hacer

Hablar de este asunto ms adelante, en un episodio especfico de este ebook,

Las pasarelas de pago

Lo que habitualmente se hace

Internet ofrece ya muchas alternativas para el pago a travs de medios elec-

Mejorando WooCommerce 9 www.enriquejros.com

Lo que deberas hacer

Hoy da comienzan a haber decenas de mtodos de pago electrnico dispo-

Olvida el contrarreembolso. Est anticuado y slo te ocasionar molestias y

Los mtodos de contacto

Lo que habitualmente se hace

Parece que eso est asumido y superado: un mtodo de contacto eficaz y, a

Lo que deberas hacer

Esto casi ni necesita explicacin. Cuando un usuario va a comprar algo que

Mejorando WooCommerce 10 www.enriquejros.com

Necesitas plugins de calidad y con soporte para implementar fun-

ECHA UN VISTAZO A MIS PLUGINS

Mejorando WooCommerce 11 www.enriquejros.com

Imgenes de producto de 360o: requisitos

Alternativas para implementarlas en WooCommerce

Pero en fin, superado el escollo de obtener (y editar) las fotografas, vamos

As que comenzar con el plugin gratuito y seguiremos a partir de ah. En las