Blog

A veces el formulario de registro de Woocommerce es demasiado escueto sobretodo cuando estás haciendo un e-commerce B2B (Business to business). Que por cierto se le dan muy bien a mi colega y SEO, Fran Murillo (os dejo el enlace por si tenéis proyectos de B2B y queréis contactar con él para asesoría).

Volviendo al tema en cuestión, es muy común si realizas con woocommerce webs para empresas que antes de que puedan ver los precios o que puedan entrar en la tienda tu cliente te pida que pidas un cuestionario más avanzado.

Modificar la página de registro en Woocommerce

3 Formas de hacerlo:

1 La que menos me gusta y de la que NO voy a hablar en este artículo. Crear una página de Registrate independiente y dejar todo lo demás oculto.

2 La que me gusta y voy a explicar en este artículo. Modificar la página de Woocommerce específica para el usuario «mi-cuenta» (/my-account/ por defecto). Podéis ver un ejemplo aquí.

3 La forma automática, personalizas el registro y automáticamente se registra el usuario en tu WordPress. Lo haremos con el plugin Gravity Forms.

Modificar la página de Woocommerce para el resgistro de usuarios

Modificar la página con un formulario distinto con registro Manual

Lo primero que debemos hacer es utilizar algún plugin de formularios que permita introducir el formulario mediante shortcode o php.

A mi el plugin de formularios que más me gusta con diferencia es «Gravity Forms» pero es un plugin premium de pago. Como alternativas free tenemos el más conocido Contact form 7, que será el que use como ejemplo.

En esta web explica el código php que debemos usar: https://contactform7.com/faq/can-i-embed-a-contact-form-into-my-template-file/

Una vez creemos el formulario completo, tal y como nos pida nuestro cliente.

Deberíamos ir a nuestro theme (child theme sería la mejor opción, por supuesto) y crear un template personalizado para que cuando actualices Woocommerce no pierdas este cambio.

En la carpeta de nuestro theme creamos los siguientes directorios /nuestro-theme/woocommerce/my-account/ y ahí deberíamos pegar el form-login.php original de woocommerce que ahora vamos a editar.

Y ahí debemos sustituir el clásico formulario de contacto por nuestro formulario, si usas Contact form 7 debes insertar algo así:

<?php echo do_shortcode( '

Error: Formulario de contacto no encontrado.

');?>

Al hacer esto la página de /mi-cuenta/ mostrará en la parte izquierda la opción de loguearse y en la parte derecha la opción de solicitar el registro con un formulario de contacto muy completo.

Lo normal es que una vez le llegue el formulario de contacto a la persona, y una vez determine si debe registrarlo puede hacerlo desde la administración de wordpress.

Para que los usuarios no puedan ver la tienda o que no puedan ver los productos si no están logueados lo enseñaré en otro artículo más adelante.

Modificar la página con un formulario distinto con registro Automático

En este caso, los usuarios cuando rellenen el formulario automáticamente quedarán registrados en tu WordPress. Para ello tendremos que usar el plugin Premium y mejor plugin de Formularios que existe GRAVITY FORMS (en serio, sirve para muchísimas cosas, si eres un desarrollador de WordPress debes tenerlo). Y el ADD-ON USER REGISTRATION de Gravity Forms.

Esto es un builder de Gravity Forms

Cuando activas el Addon de User registration te aparecen los siguientes campos adicionales

Una vez has creado el formulario con los campos que tu registro requiere e incluido los campos de registro como Nombre de usuario, contraseña… debes configurar el formulario como aparece en la siguiente captura de pantalla (es la configuración estándar, tu puedes personalizarlo mucho más).

Los campos adicionales requerirán que crees Custom Fields para el usuario, es decir si quieres almacenar el campo Comida favorita para un usuario (no se me ocurre por qué ibas a querer crear ese campo pero cosas más raras he visto) antes deberías crear el custom field Comida_Favorita para los usuarios. Si quieres saber más sobre esto deberás echar un vistazo a varios tutoriales que hay sobre esto ( buscar tutoriales )

Después de tener esta parte lista debemos ir a nuestro woocommerce/templates/my-account/wp-login.php (Yo lo modificaría a nivel de child theme para que no se me modifique con cada actualización de Woocommerce) y lo modificaríamos tal y como he explicado en el vídeo del anterior método, pero esta vez de la siguiente forma:

Así cargaríamos el formulario con ID 1 (si queremos cargar otro formulario solo hay que cambiar el primer número por el ID del formulario que queramos mostrar).

Y el resultado sería algo así:

Una vez rellenado el formulario por parte del usuario, automáticamente quedará registrado en nuestra web y podremos ver sus datos en la sección de Usuarios en nuestro WordPress.

Pues bien, así podríais modificar el aburrido y clásico formulario de registro cuando vuestro negocio lo necesite, no es rápido pero si tienes conocimientos medios de WordPress y plantillas lo puedes conseguir en un periquete!

Espero haber sido de ayuda 😉

Muy buenas amigos de Seoaldia.com vamos a darle caña al Seo On page de nuestras tiendas online y vamos a empezar con la optimización de las imágenes en un ecommerce o web hecha en WordPress.

Todo lo que voy a comentar es aplicable a cualquier tienda online pero yo me voy a centrar en Woocommerce ya que es mi especialidad. ¡Vamos allá!

Optimizar las imagenes de nuestra tienda online

Titulo

Es recomendable que la imagen tenga un titulo representativo de la imagen, no debemos dejar un título del estilo: image01.jpg, DSC00303.jpg… (A que os suenan??). Deberíamos utilizar uno más específico del estilo: imagen-zapatilla-nike-modelo-XXX.jpg
Pero Miguel Ángel… ¿Es necesario que añada la palabra imagen al nombre de la imagen? Pues tratándose de Woocommerce y WordPress si, es necesario y te explico el por qué:

Por defecto WordPress crea una página de adjuntos para cada imagen y esa página tiene una url que suele ser así: tudominio.com/nombrefotografia/ entonces puede generar problemas con las URLS… Podrías no poder utilizar urls en un futuro y generarte urls acabadas en url-2/, puede generar canibalización… En definitiva un lío para nuestro e-commerce.

Atributo Alt

Deberíamos dotar a nuestras imagenes siempre de Atributo Alt. Las imagenes tienen un formato así < img src="url_de_la_imagen" alt="Siempre tienes que poner un atributo alt en la imagen" /> Así que en todas las imagenes intentad poner vuestro alt.
En Woocommerce y en WordPress se pueden poner desde la bibilioteca multimedia y de esta forma los productos en las páginas de categorías de producto tendrían su etiqueta ALT siempre. (Texto alternativo).

El peso de las imágenes

Debemos reducir las imágenes en peso y optimizarlas para reducir el tiempo de carga en nuestro e-commerce o blog de WordPress. Para ello os voy a recomendar 2 formas de hacerlo según en que caso os encontréis.

Utilizando plugins

Si se trata de un proyecto en el que tenemos muchas fotos ya subidas y no están optimizadas recomiendo hacerlo por plugin ya que no vamos a re-subir y re-asignar 1000,2000 o más imágenes.
Si este es vuestro caso usad uno de estos plugins:
WP Smush.it: Reduce las imagenes en Bulk de forma automática desde vuestra biblioteca multimedia. Es muy cómodo.
EWWW Image Optmizer: Funciona igual que el anterior.

El pero es que es automático, no puedes ajustar los niveles de reducción del peso de la imagen y de la calidad. Además antes de usarlos recomiendo que hagáis una copia de seguridad de la BD y de los archivos ya que si son muchas las imágenes deberéis contar con un buen hosting que no se os vaya a quedar a medias.

Optimizarlas antes de subirlas

Si es un proyecto nuevo, o son pocas las imagenes de vuestra tienda online os recomiendo que uséis este método.
Podéis optimizarlas GRATIS con programas que reducen el peso de la imagen sin afectar a la calidad. Os pongo 2 ejemplos.

Kraken.io es una herramienta online en la que subes la imagen y te la optimiza. Muy sencillo de usar. Es muy buena y recomendable.
En la versión gratuita se pueden subir de forma masiva muchas imágenes y luego descargarlas en un archivo .zip o una a una, según prefieras.

RIOT (Radical Image Optimization Tool) El gran desconocido, y lo he dejado para el final por que así solo los que se lo hayan leído entero descubrirán una de mis herramientas favoritas y que recomiendo a todo el mundo para optimizar las imágenes. UN TESORO.
En el vídeo os enseño a utilizarlo y veréis que maravilla.

¿Qué os ha parecido la herramienta? ¿Una pasada verdad? Si ya la conocías estarás de acuerdo conmigo que es una Joya y si no la conocías… De nada 😉

Es probable que últimamente oigas muchas historias de gente que gana dinero gracias al comercio electrónico. O tal vez hayas leído artículos como este del Gurú Neil Patel sobre Como crear un ecommerce de éxito desde cero. Por eso seguramente te esté picando la curiosidad sobre montar tu e-commerce y si has leído bastante tal vez ya te vayan sonando mucho Woocommerce y Prestashop como opciones para empezar con tu tienda online.

Si te estás planteando abrir una tienda online, probablemente estarás estudiando las posibles plataformas sobre las que puedes hacerlo. No es una decisión sencilla y que pueda ser tomada a ligera, ya que determinará en parte el éxito o el fracaso del proyecto.

Por ello, en este post nos vamos a centrar en Woocommerce y sus ventajas respecto a Prestashop. No voy a entrar en mucho detalle, más adelante haré un post más técnico y específico sobre ventajas de Woo sobre Prestashop. Pero en este artículo hablaremos a grandes rasgos y para usuarios que no tengan demasiados conocimientos.

¿Qué es WooCommerce?

WooCommerce es el plugin más famoso de WordPress. Es gratuito y puedes descargártelo como cualquier otro plugin desde el propio repositorio de WordPress, y lo mejor es que puedes descargarte aún más plugins para WooCommerce (llamémoslos complementos o add-ons).

Qué puedo hacer con woocommerce

WooCommerce te permite montar una tienda online, con todas las funcionalidades de las que un comercio digital debe y puede tener, entre otros:

 

1) Configuración de las distintas formas de pago: con esta plataforma, puedes configurar todas las distintas maneras de pago que te puedes imaginar: a través de PayPal, transferencia bancaria o pago con tarjeta de crédito.

 

2) Seguimiento del estado de los pedidos: con esta funcionalidad, WooCommerce te permite incorporar que el usuario vea en qué estado se encuentra su pedido.

 

3) Plataforma multilingüe: aunque esté traducida al castellano, si te descargas el plugin “WPML Multilingual CMS” podrás tener tu tienda digital en todos los idiomas que consideres necesario. Una funcionalidad que, sin duda, aporta muchísimo valor añadido a tu sitio web.

 

4) Diseño altamente personalizable: el espectro de personalización que ofrece WooCommerce es altísimo, consiguiendo con ello que sea muy difícil encontrar dos tiendas online creadas con esta plataforma y que sean parecidas. Además, los chicos de WooCommerce sacan actualizaciones bastante a menudo, y siempre incluyen alguna significativa mejora en cada una de ellas.

 

5) Excelente soporte técnico: no sólo porque te atienden enseguida si tienes cualquier problema (marca WordPress), sino porque tienen una gran cantidad de vídeos con tutoriales para que puedas sacar el mejor partido de esta plataforma.

 

¿Por qué elegir WooCommerce por delante de Prestashop?

 

A todas las razones que hemos dado antes, añadimos las siguientes:

 

-Al ser una plataforma de WordPress, WooCommerce pone a nuestra disposición plantillas Premium que son bastante más flexibles que las plantillas de Prestashop.

 

–El proceso de compra es más sencillo en las tiendas online hechas con WooCommerce que en las diseñadas con Prestashop.

-WooCommerce ofrece una mejor traducción de los textos por defecto que Prestashop.

 

-La configuración de los impuestos es correcta en WooCommerce. Con esto nos referimos a que, por ejemplo, el sistema de facturas que tenemos en España no está demasiado bien configurado en Prestashop, por lo que perderás tiempo revisando todas las facturas antes de emitirlas, por ejemplo

 

-Las actualizaciones de Prestashop no son siempre seguras. Es conocido que, por ejemplo, cuando actualizas Prestashop, a veces muestran errores en las cuentas, al vender varios productos. Esto te hace que tengas que revisar cada factura otra vez.

 

-El servicio de atención al cliente de WooCommerce es mejor. Si tienes algún problema, lo tendrás resuelto a la máxima celeridad. Nada más que añadir. Eso si… es en inglés.

 

Por todas estas razones, si estás pensando crear un ecommerce, te recomendamos hacerlo con WooCommerce, el plugin estrella de WordPress.

Si quieres montar una tienda de Afiliación con Woocommerce hay un par de cosas que debes saber.

Hay dos formas de configurar la tienda online como afiliados:

1- Con el comportamiento natural en el que la persona añade los productos al carrito de la compra y a la hora de iniciar el proceso de compra o checkout abandona nuestra tienda online y finaliza la compra en la web de la que somos afiliados.

2- Directamente cuando hacen clic en «Añadir al carrito» o «Comprar producto» que abandonen la tienda y se encuentren ya en el proceso de Checkout de la tienda online de la que somos afiliados. Esto pasa al configurar los productos como Externos/afiliados.

Enviar al usuario directamente a Amazon o al proceso de compra final

Dependiendo del tipo de producto que vendas y de la plataforma de afiliados te puede interesar una opción u la otra.

Si por ejemplo tienes una tienda de afiliación vendiendo productos de Amazon en muchos caso es muy recomendable que lo antes posible envíes el cliente a Amazon ya que son expertos en finalizar las ventas, tienen un proceso de compra muy sencillo (Compra en mobile en Amazon es muy sencillo, cosa que no podemos decir de otros muchos e-commerce) y además pueden acabar comprando accesorios para el producto, o ya que están allí aumentar el importe total de la compra y por tanto la comisión que recibimos como afiliados.

Si ese es tu caso, voy a compartir contigo un código que debes copiar en tu Functions.php. Antes de eso has de tener configurados tus productos como Externos y añadida la url del producto en Amazon con tu codigo de afiliado o o de la plataforma que utilices para afiliación.

Añadir este código para llevar directamente al link de afiliado

add_action( ‘init’, ‘jk_shop_archive_add_to_cart_button’ );
function jk_shop_archive_add_to_cart_button() {
add_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 11 );
}

¿Qué conseguimos con esto? Pues este código (Que no lo he creado yo, si no que lo he encontrado y usado en varios proyectos) lo que hace es crear en tus categorías un boton de Comprar el producto y que al pulsar el boton el usuario va directamente a la página del vendedor sin pasar por la descripción de producto.

En algunos casos que como hemos comentado antes nos pueda interesar enviar el usuario lo antes posible a la página dónde realizarán la compra es una opción muy buena.

Otra opción buena es configurarlo para que directamente vaya al producto de amazon sin pasar por tu ficha de producto pero realmente es algo más complicado de hacer ya que depende de la plantilla que cada uno esté utilizando.

Los shortcodes Woocommerce son muy importantes para poder crear páginas estáticas y de esta forma mostrar el contenido a modo de tienda online. Yo lo utilizo mucho a la hora de crear Landing pages de e-commerce muy optimizadas. Son muy recomendables. Consigues darle dinamismo y freshess a tu página web estática.

Un shortcode tiene esta forma: [shortcode]

Puntos importantes:

1. hay que tener instalado woocommerce.
2. Yo recomiendo insertarlos en la vista HTML para evitar que codigo de formato se te pueda colar si usas la vista visual del editor de WordPress. A veces se te cuelan dentro de un <pre> <span> <div> Y el shortcode no funciona igual.

Shortcodes Woocommerce:

1. Página de Checkout y Página de carrito

[woocommerce_checkout]

[woocommerce_cart]

Muestran el contenido de las páginas checkout y carrito en cualquier página, yo lo he usado a veces para crear una one page checkout combinando ambos shortocodes en la misma página, ojo esto no es tan fácil y requiere de retocar código y css así como de testear ya que puede dar problemas, pero en muchos casos yo lo he implementado con éxito.

2. Mostrar productos individuales y los productos de una categoría concreta.

Para mí esta es la parte más importante de los shortcodes de woocommerce, permite crear landings muy dinámicas y atractivas para la venta en un e-commerce. También se pueden utilizar para los TSA de Romuald Fons.

Hay mucha varedad entre los shortcodes que te ayudan a mostrar los productos como te convenca, vamos a ver las más comunes y usadas:

a. Mostrar un producto.

Para hacer esto necesitamos o bien el id del producto (puedes verlo en el backend de woocommerce) o el SKU que es la referencia que identifica de forma única el producto.

ID ejemplo: [product id=»1234″]
SKU ejemplo: [product sku=»REF001″]

---

b. Mostrar varios productos eligiendo cuales mostrar.

Este shortcode también funciona con los campos ID y SKU y te permite crear una lista de productos elegida por ti. El aspecto de la lista depende del tema que uses. Has de separar cada producto con comas.

ID ejemplo: [products ids = «1, 2, 3»]
SKU ejemplo: [products skus = «REF001, REF002, REF003»]

---

c. Mostrar los productos destacados

Como sabrás woocommerce te permite seleccionar una serie de productos destacados, normalmente se utiliza para los productos que están en temporada y es muy común usarlo en la home de tu tienda online. Con este shortcode puedes añadirlo a la página que desees.

Para ello usamos el shortcode [featured_products]  además se puede configurar con los argumentos  per_page y columns. Para adaptarlo al layout de tu tienda eligiendo así cuantos productos mostrar y en cuantas columnas hacerlo.

Para usarlo

ejemplo: Mostrar 15 productos destacados en 3 columnas

[featured_products per_page=»15″ columns=»3″]

---

d. Mostrar los productos nuevos

Si lo que quieres es mostrar las novedades de tu tienda puedes hacerlo sencillamente gracias al siguiente shortocde [recent_products] además admite configurarlo con los argumentos: per_page y columns. Para adaptarlo al layout de tu tienda eligiendo así cuantos productos mostrar y en cuantas columnas hacerlo.

ejemplo: Mostrar los últimos 30 productos de tu tienda en 3 columnas

[recent_products per_page=»10″ columns=»3″]

---

e. Mostrara una página de producto completa

Es como mostrar una pagina de producto completa, puedes mostrar un producto utilizando su ID de wordpress o su SKU.

ID ejemplo: [product_page id=»25″]

SKU ejemplo: [product_page sku=»25″]

---

f. Mostrar una categoría de productos completa

Puedes mostrar todos los productos de una categoría completa. Usando el shortcode:  [product_category] . Puedes configurar el shortcode con los siguientes 5 argumentos:

• per_page – número de productos a mostrar.
• columns – número de columnas en el que mostrar los productos.
• orderby – Ordenar por titulo, fecha, precio…
• order – Orden descendente o ascendente (de mayor a menor o de menor a mayor).
• category – Categoría de producto de la cual que quieres mostrar sus productos. Usar el nombre del Slug de la categoría para que funcione.

ejemplo: Mostrar 16 productos de la categoría portátiles ordenados por fechas, de menor a mayor y mostrado en 4 columnas.

[product_category category=»portatiles» columns=»4″ per_page=»16″ orderby=»date» order=»asc»]

---

g. Mostrar los productos mejor vendidos

Mostrar los productos más vendidos.  Puedes mostrarlos con el shortcode [best_selling_products] Además acepta el argumento per_page para elegir cuantos productos mostrar.

ejemplo: Mostrar los 15 productos mejor vendidos de tu tienda online

[best_selling_products per_page=»15″]

---

h. Mostrar los productos en oferta

[sale_products] – Mostrará los productos en oferta de tu tienda. Acepta 4 argumentos para personalizarlo.

• per_page
• columns
• orderby
• order

Ejemplo: mostrar 20 productos en oferta ordenados por titulo en orden descendiente y mostrado en 2 columnas

[sale_products per_page=»20″ orderby=»title» order=»desc» columns=»2″]

---

4. Botón de Añadir al carrito y URL

Éste es un shortcode muy importante, puede ayudarte a personalizar el estilo del botón de añadir al carrito e incluso utilizarlo para hacer test A/B con una landing page y luego aplicarlo al sitio completo…

Puedes colocarlo en Posts o en páginas de tu sitio  para optimizar el proceso de venta o generar ventas en los post del blog de tu tienda online.

Utilizaremos el shortcode [add_to_cart] que permite el uso de 3 argumentos: id, style y sku.

Ejemplo: Mostrar el botón de añadir al carrito el producto con ID 25 con los siguientes estilos css {border:2px solid #ccc; background:#999; color:#000; 12px;}

[add_to_cart id=”25″ style=”border:2px solid #ccc; background:#999; color:#000; 12px;” sku=”pro”]

 

Al hacer click el producto automáticamente será añadido al carrito de la compra.

Con las últimas actualizaciones de Woocommerce los usuarios de iPhone 6 están experimentando problemas a la hora de finalizar sus compras en el proceso del Checkout.

Yo lo he vivido en varios e-commerce que usuarios se quejaban de no poder seleccionar el país y la provincia a la hora de finalizar sus compras.

Y es que el iphone6 no permite selecionar el país a no ser que hagan una pulsada larga de unos 2 segundos y claro… esto un usuario normal no lo haría, y estarías perdiendo ventas sin saberlo.

El problema es con una clase por defecto que tienen los campos tipo dropdown en el checkout de woocommerce.

Para solucionar el problema debemos deshabilitar esa clase «SELECT2» desde el functions.php de nuestro theme.

add_action( 'wp_enqueue_scripts', 'mgt_dequeue_stylesandscripts', 100 );
function mgt_dequeue_stylesandscripts() {
if ( class_exists( 'woocommerce' ) ) {
wp_dequeue_style( 'select2' );
wp_deregister_style( 'select2' );
wp_dequeue_script( 'select2');
wp_deregister_script('select2');
}
}

Yo lo he solucionado de esta forma y ya los usuarios con un simple toque despliegan el campo de provincia y país.

¡Si tenéis ese problema espero que os sirva!