Categoría: Woocommerce

Aprende Woocommerce con seoaldia.com: En este blog, todos los trucos y los mejores plugins para que tu tienda online funcione a la perfección y consigas aumentar ventas o mejorar el rendimiento de tu woocommerce.
Estoy especializado en Woocommerce, tras más de 3 años de experiencia trabajando en proyectos exclusivos de Woocommerce y muchas horas en él, muchas de las cosas que he aprendido las compartiré aquí.

Todos mis trucos para aprender Woocommerce

  • Personalizar el formulario de registro en Woocommerce

    Personalizar el formulario de registro en Woocommerce

    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.

    personalizar formulario de registro en woocommerce

    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

    formularios gravityform

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

    addon user registration wordpress

    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).

    configurar formulario para registro personalizado woocommerce

    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:

    insertar formulario gravity form via php

    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í:

    Formulario de Woocommerce Personalizado

    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 😉

  • Optimización de imágenes para SEO en vuestro Ecommerce

    Optimización de imágenes para SEO en vuestro Ecommerce

    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 imagenes tienda online seo

    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 😉

  • ¿Woocommerce o Prestashop? Básico.

    ¿Woocommerce o Prestashop? Básico.

    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.

  • Afiliación con Woocommerce ¿Cómo ir directamente al enlace de afiliado?

    Afiliación con Woocommerce ¿Cómo ir directamente al enlace de afiliado?

    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 a link de afiliado directamente en Woocommerce

    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.

  • Guía: Realizar redirecciones 301 para mejorar el seo de tu tienda online

    Guía: Realizar redirecciones 301 para mejorar el seo de tu tienda online

    redirecciones 301 woocommerce

    Muy buenas, muchos de vosotros ya tenéis vuestra tienda online en marcha, pero no tiene los resultados que queréis, además el posicionamiento web de vuestro e-commerce no termina de funcionar correctamente. En muchos casos hay que empezar a mejorar la arquitectura de la tienda online.

    Lo principal es elegir una arquitectura de URLs correcta y que por supuesto sean amigables.

    Y ahora recurriremos a nuestras amigas las Redirecciones 301 y si, es que las redirecciones son nuestras amigas y aliadas a la hora de realizar SEO.

    Hacer una redirección 301 de muchos productos y muchas categorías pueda asustar pero realmente es algo que hay que hacer, no tengas miedo a «perder el posicionamiento» de las url ya posicionadas, con una redirección 301 traspasas casi el 100% de la autoridad de la url antigua a la nueva.

    Cuando realizas una modificación de las url de tu web correctamente tu tráfico debería sufrir una modificación que en los primeros días puede descender ligeramente pero cuando transcurra un poco de tiempo comenzará a crecer si se ha realizado correctamente.

    Seguro que hay plugins que lo hacen de forma automática pero un aspecto tan sensible y fundamental en cualquier web merece un cierto control y realizarlo de forma manual.

    Una forma sencilla de hacerlo es con los sitemaps xml de tu sitio, google docs y el .htaccess de tu sitio web.

    Usemos por ejemplo el sitemap del plugin SEO by YOAST o el de Google Sitemap XML que muchos de vosotros los tendréis en vuestra tienda online (Y si no es así deberíais).

    Para redireccionar productos que tienen una URL del tipo http://dominio.com/categoría/subcategoría/producto a uno que sea http://dominio.com/producto/

     

    ¿Cómo realizar la redireccion 301 de productos en una tienda online?

    En el siguiente vídeo veréis como realizarlo en 2 minutos y sin plugins.

    ¿Y bien? ¿Qué os parece esta forma de hacer redirecciones 301 cuando tienes que modificar la estructura de vuestra tienda online? Esta misma metodología se puede adaptar a productos, categorías, tags y páginas para no perder toda la autoridad previa.

  • Shortcodes de woocommerce: Como usarlos

    Shortcodes de woocommerce: Como usarlos

    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.

  • Woocommerce y Iphone 6: problemas con campos en el Checkout

    Woocommerce y Iphone 6: problemas con campos en el Checkout

    solucionar problemas con el checkout en iphone woocommerce

    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!

  • Scroll infinito para woocommerce gratis

    El scroll infinito es un recurso que se usa bastante en las tiendas online para evitar la paginación clásica de tener que ir moviendote entre páginas de producto. Con el Scroll infinito lograrás ir viendo productos conforme vamos llegando al final de la página (Al más puro estilo Twitter). Aquí veremos como poner en nuestra tienda online Scroll infinito para woocommerce gratis!

    Se puede hacer muy facil en wordpress para los post con el plugin llamado «ifinite scroll» ¿Pero y para woocommerce? Pues podemos utilizar el mismo plugin, y cambiando un par de cositas nos funcionará de maravilla para lo que queremos que es crear un efecto de scroll infinito para nuestras categorías de productos.

    Descargamos el plugin Infinite Scroll para wordpress y los instalamos en nuestra tienda online.

    Nota: Lleva mucho tiempo sin actualizarse pero a día de hoy funciona perfectamente con woocommerce (Yo lo he probado hasta en la versión 2.3.x , es decir hasta abril de 2015).

    Una vez instalado tenemos que configurarlo de la siguiente forma:

    Content selector: Aquí tendremos que utilizar el inspector de elementos de nuestro navegador para detectar como se llama el div en el que esta nuestro contenido.

    Un ejemplo sería: div.left-column .

    Aquí no os puedo decir mucho más ya que cada theme usa un layout distinto y esta parte depende de el, pero es facil con el inspector de elementos saber cual es.

    Navigation selector: Esta parte también depende del theme pero casi todos los themes para woocommerce utilizan esta estructura: nav.woocommerce-pagination.

    En el caso de que no fuera así, será muy parecido, buscando con el inspector de elementos en la tienda online encontraremos fácil el selector que tenemos que añadir.

    Next selector: ul.page-numbers a:first

    Item selector: ul.products

    Aquí os dejo una captura de pantalla de una configuración que funciona perfectamente.

    El theme utilizado es flatsome Aquí podréis ver el ejemplo y os ayudará a sacar los selectores de vuestro theme ya que podeis ver un ejemplo y sus selectores así que con el inspector de elementos podréis sacar los selectores de vuestro theme.

    scroll-infinito

  • Mejorar la búsqueda de productos en Woocommerce

    Mejorar la búsqueda de productos en Woocommerce

    mejorar la busqueda de productos en woocommerce

    El otro día leyendo el blog de Woodemia (Un blog muy completo de Woocommerce que me gusta mucho y sigo bastante y que me ha ayudado para algunas cosas) vi un articulo que me pareció interesante relacionado con como mejorar la búsqueda de productos en un e-commerce

    Esto me recordó los problemas que me daba el buscador de wordpress por defecto que la verdad es que no daba buenos resultados cuando buscaba un producto por ejemplo en mayúsculas y no me mostraba nada y luego cuando lo buscaba en minúsculas si… en fin algo que no me parecía adecuado para la usabilidad de mi tienda online.

    También es muy importante añadir el campo de Referencia o SKU para las busquedas en woocommerce. Algo que en determinados e-commerce funciona mucho.

    El caso que el artículo comentado aquí no era lo que yo esperaba, daba dos consejos bastante buenos y creo que necesarios para muchas tiendas online, pero no daba la solución a los dos principales problemas con los que yo me encontré y con los que supongo muchos se encontrarán:

    1 – Búsquedas que requerían ser muy concretas o muy exactas para mostrar resultados, y que la búsqueda en plural o singular podía significar tener muchos resultados o ninguno.

    2 – Poder buscar por referencia de producto o SKU.

    Yo los solucioné de la siguiente forma: Añadí un plugin llamado Relevanssi que mejoraba las búsquedas en wordpress. Además podías configurarlo para taxonomías y para campos personalizados… Los campos personalizados me permitía usar el campo sku para buscar por referencia. En definitiva lo que necesitaba.

    Os voy a enseñar la configuración del plugin que hizo que mi buscador de productos en woocommerce fuera mucho mejor y mostrara resultados más relevantes y me permitiera buscar por referencias de producto en woocommerce (SKU).

    mejorar buscador de productos woocommerce

    Esta parte primera es una configuración muy sencilla lo principal es limitar las búsquedas para los e-commerce demasiado grandes y también seleccionar si queremos que los cambios que hagamos en el índice de búsquedas sea también para la zona de administración.

    mejorar buscador en woocommerce

    Esta parte es muy interesante, y se utiliza para afinar resultados, podemos incluir y excluir categorías, taxonomías y tipos de formatos concretos… Además sirve para añadir taxonomías personalizadas en woocommerce.

    Algo muy interesante es añadir también los atributos por si alguien busca «paraguas rojo» de esta forma tendría el producto + color en sus búsquedas y le daría resultados muy relevantes. Yo en este caso no lo hice por que mi tipo de producto no era así, pero en otros casos si lo he hecho y va de maravilla.

    buscar por referencia sku en woocommerce

    En esta parte especificamos el mínimo de caracteres de una palabra para que sea indexada, yo use 3 ( ya que ningún producto que tuviera iba a tener menos de 3 letras).

    Y la parte super interesante es la de añadir el campo de referencia de producto en woocommerce (sku) en la sección custom field to index hay que añadir el campo «_sku» que es como se llama el sku.

    Si tenéis un campo personalizado en el producto este es el momento de añadir el campo personalizado para poder utilizarlo en las búsquedas. Algo que es muy interesante también. Por ejemplo si vendiéramos libros y tuviéramos un campo personalizado Autor, yo añadiría a las búsquedas el campo autor para búsquedas del tipo Producto + Autor por ejemplo «libros de Gabriel García Marquez» y tendríamos muy buenos resultados para esa búsqueda, cosa que sin haber hecho esto seguramente nos devolvería una búsqueda sin resultados.

    Espero que os sirva!!

  • Crear nuevas taxonomías para Woocommerce

    Crear nuevas taxonomías para Woocommerce

    Crear taxonomias nuevas en woocommerce
    Después de tanto tiempo sin escribir en el Blog voy a hacer artículo sobre un aspecto que considero muy interesante y muy útil para toda tienda online.

    Seguro que hay plugins que hagan esto pero sinceramente… todos los plugin que podamos evitarnos será bienvenido para nuestra web o tienda online.

    Vamos a crear una taxonomia para los productos de una tienda en Woocommerce. Para los que no lo sepan, una taxonomía es una forma de organizar el contenido. En este caso vamos a ver formas distintas de organizar los productos.

    Las taxonomías más famosas son las categorías y las etiquetas de producto. Son las principales, pero todos nos hemos visto a veces en la necesidad de clasificar los productos de distintas formas.

    No es lo ideal que un producto pertenezca a muchas categorías, quizás a veces la solución es que el producto esté en distintas taxonomías.

    Además… esto son posibilidades extra de posicionar palabras clave.

    Puedes crear una taxonomía que sea Marca y agrupar todos los productos de una misma marca, o bien puedes crear taxonomías de colecciones vamos a poner un ejemplo si vendes artículos de decoración y a parte de las categorías sillas, mesas, camas… etc quieres organizar algunos productos de la forma «Dormitorios completos» y dentro de cada dormitorio completo pones todos los artículos que conforman esa colección. Es una forma de presentar tu producto distinta y puede que te de éxito.

    Bueno, no me enrollo más, al lío…. ¿Cómo se hace esto?

    Bien yo voy a ir a lo práctico no voy a enseñar a programar funciones a nadie.

    Esta maravillosa herramienta para generar taxonomías nos vendrá de perlas: http://generatewp.com/taxonomy/

    Lo rellenamos de la siguiente forma por ejemplo:

    Crear taxonomias en wordpress

    Importante Link post type: Product. A mi me gusta seleccionarlas como categorias (hierarchical), pero esto como cada uno prefiera, se puede poner modo Etiquetas.

    La sección labels con mucha paciencia la rellenamos, esto es para que luego nos muestre en el backend Añadir coleccion, editar colección…. Así que no es demasiado importante, depende de lo detallistas que querais ser.

    Después la sección de permalinks. Lo podéis dejar como viene pero creo que es mejor crear un permalink, tanto para SEO como para un poco de usabilidad. Yo en este caso podré:

    generador de taxonomias de wordpress

    Y a continuación pulsamos UPDATE CODE.

    De esta forma se actualizará el código que debemos pegar en nuestro functions.php.

    El código resultante es algo como esto:

     

    if ( ! function_exists( 'coleccion_taxonomy' ) ) {

    // Register Custom Taxonomy
    function coleccion_taxonomy() {

    $labels = array(
    ‘name’ => _x( ‘colecciones’, ‘Taxonomy General Name’, ‘text_domain’ ),
    ‘singular_name’ => _x( ‘coleccion’, ‘Taxonomy Singular Name’, ‘text_domain’ ),
    ‘menu_name’ => __( ‘Colecciones’, ‘text_domain’ ),
    ‘all_items’ => __( ‘Todas las colecciones’, ‘text_domain’ ),
    ‘parent_item’ => __( ‘Coleccion padre’, ‘text_domain’ ),
    ‘parent_item_colon’ => __( ‘Coleccion padre:’, ‘text_domain’ ),
    ‘new_item_name’ => __( ‘Nombre Nueva coleccion’, ‘text_domain’ ),
    ‘add_new_item’ => __( ‘Añadir nueva coleccion’, ‘text_domain’ ),
    ‘edit_item’ => __( ‘Editar coleccion’, ‘text_domain’ ),
    ‘update_item’ => __( ‘Actualizar coleccion’, ‘text_domain’ ),
    ‘separate_items_with_commas’ => __( ‘Separa las colecciones con comas’, ‘text_domain’ ),
    ‘search_items’ => __( ‘Buscar colecciones’, ‘text_domain’ ),
    ‘add_or_remove_items’ => __( ‘Añadir o borrar colecciones’, ‘text_domain’ ),
    ‘choose_from_most_used’ => __( ‘Elegir entre las colecciones más utilizadas’, ‘text_domain’ ),
    ‘not_found’ => __( ‘No se encuentra’, ‘text_domain’ ),
    );
    $rewrite = array(
    ‘slug’ => ‘colecciones’,
    ‘with_front’ => true,
    ‘hierarchical’ => true,
    );
    $args = array(
    ‘labels’ => $labels,
    ‘hierarchical’ => true,
    ‘public’ => true,
    ‘show_ui’ => true,
    ‘show_admin_column’ => true,
    ‘show_in_nav_menus’ => true,
    ‘show_tagcloud’ => true,
    ‘rewrite’ => $rewrite,
    );
    register_taxonomy( ‘taxonomy’, array( ‘product’ ), $args );

    }

    // Hook into the ‘init’ action
    add_action( ‘init’, ‘coleccion_taxonomy’, 0 );

    }

     

    NOTA:

    Como hemos dicho, lo pegamos en el Functions.php de nuestro tema y actualizamos. Ojo con editar los functions.php ya que hay que tener cuidado a la hora de hacerlo, si te equivocas y se te queda la página en blanco tendrás que ir al FTP para volver a restaurarla. A todos nos ha pasado alguna vez jeje. Yo recomiendo usar un plugin Tipo «my custom functions» que si te equivocas y hay posibilidad de que se rompa el front end no se actualiza y te lo avisa. Además es la mejor forma de conservar nuestras taxonomías cuando cambiemos de theme.

    Una vez actualizado verás que en nuestro menu de administración de wordpress dentro de PRODUCTOS tendremos nuestra fabulosa taxonomía… Colecciones!

    añadir taxonomia a woocommerce

    Ahora podremos crear colecciones:

    añadir-taxonomia-woocommerce-2

    Y después dentro de los productos asignarles cada colección, como si de una categoría se tratase:

    añadir-taxonomia-woocommerce-3

    Y ahora vais con toda vuestra ilusión y le dais a ver colecciones y….
    ¡No se ve! Error 404 en la taxonomía!!
    No te asustes, es normal:

    Esta es la clave, la que tantos quebraderos de cabeza me ha dado a mi y a todo el mundo que lo ha intentado hacer.

    Es muy sencillo pero si no lo hacemos recibiremos un error 404, o este contenido no se encuentra.

    Vamos a permalinks o enlaces permanentes y le damos a GUARDAR.

    No se por que, pero hay que hacerlo, y cuando intentaba hacerlo, buscando en internet había un montón de gente que le pasaba lo mismo. La verdad es que cuestión de suerte se me ocurrió que podría haber un problema en el permalink, y  cuando le di a actualizar… Ahí estaba! todo funcionaba.

    Podéis ver un ejemplo en esta web: infanity.es  donde cree taxonomías para vender colecciones de marcas concretas.

    Luego si tenéis problemas de contenido duplicado acordaros de ponerlas en noindex y nofollow que a veces puede pasar.

    Bueno ahora lo que tenemos que hacer es crear una plantilla para esta taxonomía para poder darle un diseño propio y distinto a esta nueva taxonomía de woocommerce.

    Necesitamos crear lo siguiente en nuestra carpeta de nuestro-theme/woocommerce:
    Crear una nueva copia de taxonomy-product.php y renombrarlo como taxonomy-colecciones.php (recordemos que nuestra taxonomía es colecciones, así que hay que renombrarlo como «taxonomy-nombretaxonomia.php»).
    Después lo editamos y en su interior modificamos la siguiente linea cambiando product por el nombre de nuestra taxonomía, quedando en mi caso así:

    woocommerce_get_template( ‘archive-product-colecciones.php’ );

    Ahora debemos crear crear archive-product-taxonomia.php en el directorio tu-theme/woocommerce.
    Lo normal será crear una copia de archive-product.php y renombrarlo.

    En mi caso como he creado la taxonomia colecciones lo renombraré así: archive-product-colecciones.php. Ahora si lo que queremos es modificar el layout o añadir algo en particular podemos editar el archive-product-colecciones.php y de esta forma tendríamos una taxonomía nueva…

    Yo suelo usar esto para añadir código de algunos plugins. Que solo quiero mostrar en una determinada taxonomía.
    Como un formulario de contacto. También lo he utilizado para cambiar la clase de algunos elementos y mostrarlos así de formas distintas.

    Si queréis saber más sobre taxonomías en Wontalia he creado unas clases avanzadas sobre como crear taxonomias de producto y las mejores practicas para posicionarlas! ¿Quieres aprenderlo? Por solo 29€ al mes puedes entrar en el mejor curso online. Acceder a Wontalia