Como mejorar y optimizar la usabilidad de WooCommerce

Como mejorar y optimizar la usabilidad de WooCommerce

por | 4 Dic 2018

Optimizar WooCommerce

El mercado del comercio electrónico ha crecido bastante en los últimos años y continúa creciendo sin signos de desaceleración en corto plazo. La razón principal por la que el comercio electrónico ha ganado tanta popularidad, es porque los consumidores disfrutan de más ventajas comprando en línea. Sin embargo, el simple hecho de tener una tienda digital no significa que vas a tener grandes cantidades de clientes o ventas (primero debes mejorar y optimizar WooCommerce).

Antes de nada voy a presentarme. Soy Pedro y tengo un blog donde escribo temas sobre WordPress y por supuesto de WooCommerce. Si te interesa puedes echarle un ojo desde aquí ;). Y por descontado dar las las gracias a Nerea por darme la oportunidad de escribir en su blog.

Los consumidores que compran a través de Internet tienen expectativas, necesidades y demandas específicas cuando se trata de compras en línea. Si no puedes superar o incluso cumplir con esas expectativas, perderás clientes frente a un competidor. Por eso es tan importante optimizar adecuadamente el rendimiento de una tienda con WooCommerce.

Hoy en día, muchos propietarios de sitios web eligen WordPress. Este CMS es uno de los sistemas de administración de contenido más populares y versátiles del mundo. No solo eso, sino que el 32.5% de todos los sitios web del mundo se ejecutan en WordPress. De esas personas, más de 4.5 millones de ellos han tomado la decisión inteligente de construir una tienda en línea con WooCommerce.

Para el que no lo sepa, WooCommerce es un plugin de WordPress potente y gratuito con características integradas para vender productos en tu propio sitio web. Además, hay cientos de extensiones y complementos para WooCommerce disponibles que permiten personalizar tu tienda como mejor te parezca. Pero como mencioné anteriormente, simplemente tener una tienda de comercio electrónico no es suficiente para generar clientes y/o aumentar las ventas.

La importancia de las páginas que cargan rápido

Al optimizar una página de WooCommerce, todo se reduce a asegurar que sea fácil de navegar, fácil de usar, enriquecido con contenido de calidad, responsive, etc. Sin embargo, uno de los factores de rendimiento más importantes es la velocidad. El tiempo de carga de las páginas y en general, la velocidad de tu sitio web juega un papel muy importante en la satisfacción del cliente.

Muy pocos toleran sitios web lentos en estos días y puedes estar seguro de que los clientes abandonarán tu tienda si las páginas cargan demasiado tiempo. De hecho, alrededor del 46% de los consumidores en línea esperan que una página se cargue en menos de dos segundos. Además, el 68% de los usuarios de dispositivos móviles abandonarán completamente una página si la carga demora más de tres segundos.

Dicho esto, el lento tiempo de carga de la página garantiza una pérdida de clientes y ventas. Además, un solo segundo de retraso en el tiempo de carga de una página puede dar como resultado una disminución del 17% en la satisfacción del cliente, un 13% menos de visitas a la página y una disminución del 8% en las conversiones.

Para las tiendas de comercio electrónico, eso puede impactar significativamente las ganancias y los resultados. Por lo tanto, la velocidad es de suma importancia si deseas ejecutar una tienda de comercio electrónico de éxito. Por ese motivo vamos a ver estos cinco sencillos consejos que ayudan a optimizar WooCommerce para empezar bien lo antes posible.

1. Elige un servidor de alojamiento adecuado para WordPress

Todo comienza con la elección de un proveedor de alojamiento para WordPress. Este es el primer paso para un sitio rápido. Si tu proveedor de alojamiento no admite una buena velocidad del sitio web, no hay mucho que puedas hacer para optimizar WooCommerce. Investiga las buenas soluciones de hosting o servidores antes de comenzar a optimizar tu tienda.

Cuando busques el mejor alojamiento de WordPress para tu sitio, concéntrate en un tiempo de funcionamiento excepcional y el menor tiempo de inactividad posible, soporte 24/7, gran velocidad del sitio web y precios razonables. De lo contrario, puedes experimentar una velocidad de ancho de banda lenta, fallos frecuentes del servidor, un aumento en el tiempo de la inactividad del sitio web y un rendimiento inadecuado. Esto seguramente hace que tus clientes se vayan de la tienda.

Para WooCommerce, intenta evitar las soluciones de alojamiento de bajo presupuesto. Un plan de 1 € al mes o supuestamente «gratuito» no le hará ningún bien a largo plazo. Puede funcionar bien al principio, pero a medida que aumenta el tamaño de tu tienda y la demanda de tus productos, estos pequeños planes simplemente no pueden ofrecer recursos suficientes para respaldar un sitio de estas características. En su lugar, tómate el tiempo para elegir un plan que se adapte a tus necesidades de tráfico y recursos.

2. Optimiza las imágenes

Las imágenes de alta calidad son una de las formas más sencillas de hacer que tu tienda de comercio electrónico destaque de las demás. Sin embargo, las imágenes pueden tener un impacto significativo en el tiempo de carga de una página si no se optimizan correctamente. Las imágenes grandes y de alta calidad para tus productos pueden parecer excepcionales en la tienda. Pero por otro lado, tomará tiempo cargar esas imágenes. Por eso es tan importante optimizar estas imágenes.

Al optimizar, puedes mantener imágenes impresionantes en tu tienda sin aumentar el tiempo de carga de la página. Es posible usar un complemento, pero es mejor aprender a optimizar las imágenes correctamente antes de subirlas a la tienda. Aquí hay algunas cosas que puedes hacer para optimizar las imágenes:

  1. Utiliza el formato de imagen adecuado: al elegir un formato para tus imágenes, es importante centrarse en los formatos ideales para sitios web y navegadores. Normalmente estas son JPG o PNG. Con estos formatos se pueden comprimir las imágenes para usar en línea y reducen la calidad de la imagen sin efectos negativos. En otras palabras, las imágenes se ven perfectas incluso con una calidad reducida.
  2. Utiliza el tamaño correcto para las imágenes: recorta tus imágenes al tamaño correcto antes de cargarlas. Además, cuando carga una imagen en WordPress, los tamaños de medios predeterminados se crean automáticamente. Puedes encontrar estas opciones de tamaño de imagen en Ajustes > Medios en el panel de administración de WordPress. Recomiendo eliminar las opciones que no utilizas configurando los valores predeterminados a cero.
  3. Comprimir imágenes: asegúrate de comprimir las imágenes antes de subirlas a WordPress. Puede usar una opción de escritorio como ImageOptim o un servicio en línea gratuito como Kraken. Si ya has subido tus imágenes a WordPress, no te preocupes. Aún puedes usar un plugin como EWWW o Smush para disminuir el tamaño de los archivos de las imágenes que ya están en la base de datos.

3. Incluye una red de entrega de contenidos (CDN)

Un CDN o Content Delivery Network (red de entrega de contenido) puede ayudar a mejorar la velocidad de tu sitio web y disminuir el tiempo de carga de la página de una tienda con WooCommerce. Un CDN es una red de servidores colocados estratégicamente en todo el mundo.

Se utilizan para almacenar en caché el contenido de un sitio web con el fin de que esté disponible más fácilmente para los clientes según la ubicación geográfica. Entonces, cuando un CDN almacena en caché los archivos de tu sitio web (una versión estática de tus imágenes, CSS, JavaScript, etc.), más adelante los pone a disposición de los usuarios más cercanos al CDN.

Por ejemplo, con un CDN, los clientes enviarán una solicitud al centro de datos CDN más cercano donde están ellos. Por lo tanto, un cliente en Buenos Aires puede ver contenido almacenado en caché desde un servidor en Sevilla, mientras que un cliente en Londres ve contenido desde un centro de datos de Nueva York. De esta manera se puede reducir la distancia geográfica, el tráfico de ancho de banda y el tiempo de carga.

Además, otro beneficio del uso de un CDN es reducir la tensión en el servidor de alojamiento. Al reducir la cantidad de solicitudes HTTP a tus servidores principales, disminuye el riesgo de fallos del servidor. Por ejemplo, si utilizas un incentivo para aumentar considerablemente el tráfico del sitio web, es posible que tu servidor de alojamiento no pueda manejar todas las nuevas solicitudes sin la ayuda de un CDN.

Hay muchas opciones de CDN disponibles. Una gran opción es Cloudflare , que ofrece un plan CDN gratuito para sitios web personales. En este post puedes ver los servicios de CDN gratuitos más conocidos ideales para empezar.

4. Minificar Código

Los sitios web por regla general crean y almacenan muchos archivos. Lamentablemente esto puede aumentar los tiempos de carga de tu página. Al minimizar el código, es posible reducir la cantidad de archivos y líneas de código innecesarias. Y a la vez, tus páginas pueden tardar menos en cargar.

La minificación de código es el proceso de eliminar líneas de código innecesarias. De esta manera, el código todavía se ejecuta correctamente de una manera más eficiente. Por ejemplo, las líneas de código pueden ser comentarios, delimitadores de bloques, caracteres de espacio en blanco, caracteres de nuevas líneas, etc. A continuación, se muestra cómo se ve el código CSS sin tocar nada:

}

::-moz-selection {
background: #333;
color: #fff;
}

::selection {
background: #333;
color: #fff;
}

Ahora quí está el mismo código después de ser minificado:

}::-moz-selection {background: #333;color: #fff;}::selection {background: #333;color: #fff;}

Estos caracteres excesivos no son necesarios para que los lenguajes del navegador, como el CSS o JavaScript, lean el código adecuadamente. Sólo ralentizan todo el proceso. En otras palabras, un código más corto significa menos datos para los idiomas a procesar, por lo que en última instancia mejora la velocidad de un sitio web de WordPress.

La reducción de código se puede hacer manualmente o puedes usar una herramienta en línea gratuita como MinifyCode. Si bien la mayoría de los temas y complementos de WordPress bien codificados ya estarán minimizados, vale la pena volver a verificar que tus personalizaciones también lo sean. Algunos plugins de caché como W3 Total Cache también hacen este trabajo.

5. Revisa tus plugins

Parte de lo que hace que WordPress sea tan atractivo es la amplia variedad de complementos disponibles para personalizar un sitio web. Después de todo, incluso WooCommerce en si es un plugin. Sin embargo, solo porque hay un montón de complementos disponibles no significa que debas usarlos todos.

WordPress es de código abierto, lo que significa que cualquier persona puede crear nuevas opciones de personalización, temas o plugins. Hay complementos para casi cualquier funcionalidad que desees añadir a tu tienda. Sin embargo, algunos propietarios de sitios web llegan a pasar los limites, instalando todos y cada uno de los complementos que creen que pueden ser útiles.

Si bien un número razonable de complementos no debe afectar la velocidad de tu sitio, existen algunas aspectos a tener en cuenta.

  • Calidad del código del plugin: el uso de un solo plugin mal codificado puede pesarle a tu sitio web. Por ejemplo, es posible que algunos servicios de alojamiento web no permitan que los usuarios instalen el popular complemento Broken Link Checker ya que crea un número desorbitado de solicitudes HTTP. Los plugins también son software de terceros, lo que significa que pueden tener un código extenso o incluso riesgos de seguridad que quizás no conozcas. Intenta buscar revisiones para un complemento o pruébalo en un entorno de pruebas antes de instalarlo en tu sitio principal.
  • Funciones de complemento duplicado: el uso de varios plugins que sirven para el mismo propósito puede crear conflictos y por lo tanto, ralentizar un sitio. Por ejemplo, no necesitas tener instalados dos complementos de caché en tu sitio web. Si estás utilizando dos o más, simplemente elige uno y elimina los demás. En la misma línea, si has instalado JetPack, quizás no sea necesario instalar otro complemento de análisis (ya que las estadísticas del sitio son una de las muchas funciones importantes de JetPack).
  • Tamaño del complemento: la instalación de un montón de plugins grandes o con muchos recursos (como un constructor de páginas, un control deslizante premium, comercio electrónico, chat en vivo y un foro comunitario) puede causar problemas. Del mismo modo, el uso extremo de complementos puede causar la hinchazón del sitio. Solo tienes una cantidad de espacio en tu base de datos.

Al final, utiliza lo que necesites y elimina los plugins que no hacen falta. Si deseas ampliar la funcionalidad de tu tienda WooCommerce, tómate el tiempo para considerar con cuidado los nuevos complementos (o la posibilidad de funciones desarrolladas a medida) para garantizar una buena velocidad y funcionalidad.

Últimos consejos para terminar

Trabajar con WooCommerce en tu sitio web de WordPress es un gran paso para dirigir una tienda de comercio electrónico de éxito. Sin embargo, no importa cuán grande sea tu plataforma, no puede funcionar bien si no ponemos empeño por nuestra parte. Eso significa que debes optimizar WooCommerce y otros elementos del sitio correctamente para proporcionar la mejor experiencia posible al cliente o a tu audiencia.

¿Tienes algún otro consejo para optimizar WooCommerce? ¿O preguntas sobre tu propia tienda digital? Pues no dudes y comenta a continuación.

Autor del post: Autor Invitado, Pedro de: https://reinspirit.com/blog/

WooCommerce, eliminar campos formulario de envío

por | 28 Sep 2016

WooCommerce, eliminar campos formulario no necesarios para la venta

OBJETIVO: WooCommerce, eliminar campos formulario de envío y facturación en tiendas WooCommerce cuya venta es de productos virtuales.

En el desarrollo de tiendas online que sólo venden productos de descarga, modificar el formulario de envío y facturación que tiene que rellenar el cliente y quitar todos los campos que no son necesarios para la venta del artículo, aporta ventajas para el cliente:

WooCommerce pedido COMPLETADO1- el proceso de compra es más rápido

2- el proceso de compra es más sencillo

3- ahorro de almacenamiento de campos innecesarios que no 4- me aportan ninguna información.

5- políticas de datos más sencilla

 

Pasos para eliminar campos del formulario de envío en WooCommerce

Vamos a trabajar con el archivo functions.php, como siempre te recomiendo que trabajes con un tema hijo para evitar que la función que vamos a crear se borre al actualizar el tema, si necesitas ayuda con los temas hijos puedes consultar el siguiente artículo para crear un tema hijo con plugin o el siguiente en el que se crea el tema hijo con estructura de archivos.

Paso 1 – abrir archivo functions.php

1. Localizamos la carpeta themes en el árbol de archivos wordpress; 

/tuweb/wp-content/themes/child_theme o  

/tuweb/wp-content/themes/your_theme

2. Abrimos el archivo functions.php

Paso 2 – copia y pega el siguiente código

Copia el siguiente código dentro del archivo

// quitar campos del formulario de dirección de envío
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );

function custom_override_default_address_fields( $address_fields ) {
    unset( $address_fields['postcode'] );
    unset( $address_fields['company'] );
    unset( $address_fields['address_1'] );
    unset( $address_fields['address_2'] );
    unset( $address_fields['city'] );
    unset( $address_fields['country'] );
    unset( $address_fields['state'] );

    return $address_fields;
}

Paso 3 – guardar cambios

Guarda el archivo functions.php

Explicación del código «WooCommerce eliminar campos formulario»

add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );

En esta línea estamos creado un filtro, es decir modificando la función de woocommerce_default_address_fields con la nueva función que hemos llamado custom_override_default_address_fields.

Definimos la nueva función:

function custom_override_default_address_fields( $address_fields ) {

Hacemos uso de la función de php unset (borrar); y borramos el código postal, nombre empresa, dirección…

unset( $address_fields[‘postcode’] );

OJO: al crear el filtro para woocommerce_default_address_fields estamos accediendo a campos del formulario de dirección de envío y facturación, es decir estamos borrando los distintos campos en ambos formularios.

Si necesitas más información, puedes revisar los documentos de Woocommerce, donde desarrollan este tipo de funciones para borrar, modificar y añadir campos en los formularios de envío y facturación.

Te puede interesar:

WooCommerce – Cómo cambiar automáticamente el estado de un pedido a Completado

Como mejorar y optimizar la usabilidad de WooCommerce

WooCommerce – Como cambiar automáticamente el estado de un pedido a COMPLETADO

por | 7 Abr 2016

WooCommerce pedido COMPLETADO de forma automática en pasarelas de pago

Cómo modifica WooCommerce el estado de un pedido 

WooCommerce crea automáticamente los pedidos u ordenes cuando un cliente compra un producto en nuestra tienda y completa el proceso de compra. Los pedidos sólo son visibles por el administrador o usuarios con permisos de acceso.

Cuando un cliente completa el proceso de compra, podemos visualizar los pedidos y los detalles de los mismos entrando en la administración de la página y pulsando sobre el menú WooCommerce >> Pedidos

WooCommerce pedido COMPLETADO

Observa que al crear el pedido el plugin ha añadido un ID o identificador único además de otros datos como precio total, fecha de compra, nombre del cliente, email…

A cada orden de compra se le asigna un estado. Este estado asignado depende de la fase en la cual se encuentre el proceso de compra. WooCommerce utiliza los siguientes estados:

  • Pendiente: Orden recibida (el pago no se ha recibido)
  • Error: El pago ha fallado o se ha rechazado (error al efectuar el pago)
  • Procesamiento: Pago recibido y el artículo se ha descontado del inventario. La orden está a la espera de completar el proceso por parte del administrador (proceso que tienes que realizar manual)
  • Completa: Orden cumplida y completa. (pago recibido, pedido enviado… a terminado todo el proceso de compra y venta)
  • En espera: Pendiente de pago. El artículo se descuenta del inventario, pero es necesario confirmar el pago. (para cambiarlo hay que realizar un proceso manual por parte del administrador)
  • Cancelado: Cancelado por un administrador o el cliente. 
  • Reembolso: Esta acción es aplicada por el administrador. (Devolución de un producto)

Puedes ver los diferentes estados de los pedidos de tu tienda si entras en la administración de WordPress  en el menú WooCommerce >> Pedidos, la primera columna indica mediante un símbolo el estado del pedido.

WooCommerce pedido COMPLETADO  

Cuándo WooCommerce NO asigna el estado COMPLETADO a un pedido

PROBLEMA: WooCommerce no asigna el estado COMPLETADO a los pedidos realizados mediante pasarelas de pago (por ejemplo paypal, redsis…), a estos pedidos les asigna los siguientes estados: «en espera» o «procesando«. Para modificar el estado y marcar el pedido como «completado» hay que hacerlo de forma manual entrando en el administrados de WordPress.

SOLUCIÓN: añadir un pequeño código a tu archivo functions.php. Este código o función cambia de forma automática el estado del pedido de procesando o en espera a completado.

(para no perder los cambios de este archivo en futuras actualizaciones lo más recomendable es que trabajes con temas hijos)

Función para cambiar de forma automática el estado de un pedido

Copia y pega el siguiente código

Abre tu archivo functions.php y copia y pega el siguiente código.

Encontrarás el archivo functions.php en la siguiente ruta:

wp-content/themes/tutheme/functions.php

// Actualiza automáticamente el estado de los pedidos a COMPLETADO
add_action( 'woocommerce_order_status_processing', 'actualiza_estado_pedidos_a_completado' );
add_action( 'woocommerce_order_status_on-hold', 'actualiza_estado_pedidos_a_completado' );
function actualiza_estado_pedidos_a_completado( $order_id ) {
    global $woocommerce;
    
    //ID's de las pasarelas de pago a las que afecta, te lo explico a continuación
    $paymentMethods = array( 'bacs', 'cheque', 'cod', 'paypal' );
    
    if ( !$order_id ) return;
    $order = new WC_Order( $order_id );

    if ( !in_array( $order->payment_method, $paymentMethods ) ) return;
    $order->update_status( 'completed' );
}

 

Aclaraciones sobre el código

Funcionamiento del código

add_action( 'woocommerce_order_status_processing', 'cambiar_estado_de_pedidos_a_completado' );

add_action( 'woocommerce_order_status_on-hold', 'cambiar_estado_de_pedidos_a_completado' );

Las dos primeras líneas del código están indicando que cuando un pedido está en estado procesado (woocommerce_order_status_processing) o en espera (woocommerce_order_status_on-hold) entonces se ejecutará la función: function cambiar_estado_de_pedidos_a_completado. La función recibe el ID de la orden ( $order_id ), si el ID existe dentro del array de métodos de pago ($paymentMethods = array( ‘bacs’, ‘cheque’, ‘cod’, ‘paypal’ );), es decir si el pedido se ha pagado con alguno de los siguientes métodos de pago (‘bacs’, ‘cheque’, ‘cod’, ‘paypal’), entonces asignar al pedido el estado «Completado».

Array de ID de métodos de pago

$paymentMethodsID = array( 'bacs', 'cheque', 'cod', 'paypal' );

Este array guarda todos los métodos de pago que tenemos disponibles en nuestra tienda WooCommerce, podemos añadir o quitar algunos métodos de pago según nuestra configuración, lo lógico es que este array coincida con los métodos de pago que estamos usando.

Para ver esto debes ir a WooCommerce >> Ajustes >> Finalizar Compra >> Pedido opciones, navega hacia la parte de abajo de la página y encontrarás la siguiente tabla

Pasarelas pago

en el array debes incluir los nombres de cada método de pago (columna Pasarela ID) que tengan la V en la columna activado.

Los IDs de pasarelas de pago suelen ser los siguientes:

  • Transferencia bancaria directa: ‘bacs’
  • Contra reembolso: ‘cod’
  • Pago con cheque: ‘cheque’
  • PayPal: ‘paypal’
  • PayPal Express: ‘ppec_paypal’
  • Stripe: ‘stripe’
  • RedSys: ‘redsys’

Si trabajas con WooCommerce y necesitas modificar el formulario de envío te puede ser útil el siguiente artículo.

Modificar ajustes de correo electrónico que le llegan al cliente

Al principio del post he explicado como WooCommerce va a asignar a la orden de compra un estado, si el estado asignado es:  procesando, además enviará un email al cliente indicando que su pedido se encuentra en proceso, después nuestra tienda ejecutará la función nueva que hemos añadido y cambiará el estado a completado y enviará un nuevo email al cliente.

El cliente recibirá dos emails seguidos, uno que le indica que el pedido está en proceso y un segundo email que le indica que su pedido está completado.

No tiene sentido que el cliente reciba los dos emails seguidos ya que el estado procesando es un estado de transición y no necesitamos que el cliente reciba ningún email. Para que WooCommerce no envíe este primer email debemos cambiar la configuración en: WooCommerce >> Ajustes >> Correos electrónicos, ir a configuración (ruedita de la derecha) y desmarcar la casilla « Habilitar esta notificación por correo electrónico»

Pedidos-estados

Pedidos-estados

Por último es recomendable realizar pruebas de compras para comprobar que todo funciona correctamente, presta atención al cambio de estado automático y a recibir sólo un email de estado.

Te puede interesar:

WooCommerce eliminar campos de formularios envío y facturación