Gestores de contenidos

Diseño Web, Gestores de contenidos

Informes y análisis de ventas en Woocommerce

/

Desde hace unas versiones, Woocommerce, el mayor plugin de tiendas online del mayor CMS del mundo, WordPress, ha ampliado mucho sus secciones de informes. Estos antes eran bastante escasos, pero ahora son completos, personalizables, exportables y, consideramos, más que suficiente para la mayoría de tiendas. Hoy os enseñamos cómo funcionan y dónde tienes estos informes. Woocommerce: informes y análisis sobre ventas, clientes y productos. Woocommerce incluye informes en dos sitios: Informes: en el menú de la zona de administración Woocommerce->Informes tienes una pequeña sección con Ventas por fecha, Ventas por producto, Ventas por categoría, Cupones por fecha, Descargas del cliente. En todas estas secciones podemos seleccionar las fechas que queremos, y nos muestra los datos y gráficas de los mismos. En muchas de ellas podemos exportar el contenido en csv. Análisis: Más recientemente, Woocommerce ha añadido los análisis, como un menú aparte. Tienes un panel completamente personalizable, donde puedes añadir secciones, parámetros, qué quieres incluir. Y tiene un resumen con datos y gráficas. Debajo de este menú, tienes los apartados con más información de productos, ingresos, pedidos, variaciones, categorías, cupones, impuestos, descargas e inventario. En cada uno de esos apartados, de nuevo puedes modificar los parámetros, datos y fechas que quieres ver, y exportarlo a csv. Como decimos, muy potente y más que suficiente para la mayoría de las tiendas, y un gran añadido por parte de Woocommerce. Os lo explicamos en este vídeo:

Gestores de contenidos, Sistemas, Soporte, Trucos

El editor deja de funcionar en WordPress cuando activo un CDN como Cloudfront

/

Algo que nos ha ocurrido varias veces. Activar un CDN en una web es algo que incluso Google recomienda en su PageSpeed. Lo que hace es “cachear” (guardar una copia) el contenido de tu web, sobre todo el estático, y servirlo más rápido que tú. Porque lo da ya montado (tu web dinámica lo construye en cada petición), porque tiene más velocidad, porque está optimizado…etc. El problema es que guardar copias que no cambian de ciertas partes de tu web, puede romper funcionalidades. Y entonces hay que excluirlas de este “caché”. Hoy vamos a tratar uno de estos fallos, como en su día hablamos de otro. El editor visual deja de funcionar en WordPress tras activar un CDN como Cloudfront. Los síntomas son claros: El texto para editar lo ves en blanco. No ves las pestañas y botones de tu editor. Lo ves todo como si fuera html. No puedes añadir o guardar ningún bloque en el editor. La razón es que WordPress manda en un header (cabecera) llamado user-agent, desde la carpeta wp-admin, el campo que indica si el usuario en cuestión puede usar el editor visual o no (TinyMCE o el que sea). Es un campo del tipo user_can_richedit con valores true o false. El problema es que los CDNs como Cloudfront eliminan las cabeceras de estas partes de la web, para hacerla más rápida. Y entonces el usuario se encuentra con que deja de funcionar el editor. Puedes ver que es la causa fácilmente o desactivando el CDN o apuntando tu web directamente al servidor fuente (o balanceador en caso de Amazon) en vez de al CDN. ¿Cómo lo soluciono? Sencillo, tienes dos opciones: Tienes dos maneras de activarlo en Cloudfront y vienen explicadas aquí.En las políticas de caché del directorio de /wp-admin/* puedes añadir la cabecera “user-agent” al whiteliste, a la lista de exclusiones. Y verás que funciona. De hecho esto debe ser tan frecuente, que Amazon en el 2020 ya incluyó una política que excluye esta cabecera y puedes usar : https://aws.amazon.com/es/blogs/networking-and-content-delivery/amazon-cloudfront-announces-cache-and-origin-request-policies/ Si no sabes cómo resolverlo, no puedes, o mientras lo resuelves, puedes añadir un código en functions.php o en tu plugin de Snippets. Es el siguiente (recordad que es un parche, arregla un problema que debería resolverse en origen): Nosotros, añadiendo la política de exclusión en Cloudfront y dejando pasar ese header pudimos arreglar el problema en un cliente.

Código Worpdpress, Diseño Web, Plugins Wordpress

Woocommerce: desactivar el resto de métodos de envío si el envío gratuito está activado.

/

En el vídeo sobre la configuración de los métodos de envío de Woocommerce, os comentamos que el envío gratuito tiene un problema en la instalación por defecto. Cuando se activa el envío gratuito, aparece junto a todo el resto de métodos. Es decir, el cliente verá métodos de envío con coste, y el gratuito. Cosa que, obviamente, no es muy deseable. Porque algún cliente puede equivocarse y pagar cuando no es necesario (y luego quejarse). Hoy os explicamos cómo solucionarlo. Cómo desactivar el resto de métodos de envío si el envío gratuito está activado en Woocommerce.. Woocommerce no tiene esta opción por defecto. Pero si que dan la solución en este post. Puedes hacerlo con o sin plugin. Con plugin: puedes usar un plugin como este: https://wordpress.org/plugins/wc-hide-shipping-methods/. Pero recordad que cuando más añadas a tu web, más lenta y más problemas de seguridad. Sin plugin: nosotros recomendamos, cuando sea posible, resolver estos problemas con código. Se puede, como siempre, añadir el código en el fichero functions.php de tu tema hijo, o usando un plugin como Snippets (uno que sirve para añadir muchos fragmentos de código).Este es el código que podemos usar: En el enlace de Woocommerce que hemos dejado arriba, aparecen varias versiones del código para permitir recogida en local además de envío gratis, y cómo habilitarlo o deshabilitarlo según zonas. En este vídeo explicamos cómo funciona el código y cómo activarlo.

Diseño Web, Gestores de contenidos

Configurar gastos y métodos de envío en las tiendas online de Woocommerce.

/

Woocommerce es el plugin de tiendas online más usado en el CMS más usado del mundo, WordPress. Cuando alguien quiere crear una tienda online con este plugin, una de las primeras cosas que tiene que hacer es configurar los gastos y métodos de envío. Y no es muy intuitivo. En este artículo os lo explicamos. Cómo configurar gastos y métodos de envío en tu tienda de Woocommerce. En este vídeo os explicamos los pasos para configurar el envío en Woocommerce. En resumen: Define unas zonas de envío. Son los sitios que vas a querer poner un precio de envío o un modo de envío. Dentro de ellas define métodos de envío. Woomcere deja 3: precio fijo, envío gratuito o recogida en tienda. Para otras opciones tienes que instalar plugins adicionales. `Puede haber varios métodos de envío en una misma zona. Si la dirección de envío del cliente es de una zona que no tiene método de envío definido, no le dejará realizar el pedido. Woocommerce pone una zona para aquellas zonas no cubiertas por las que has creado. Tu decides si ponerle método de envío o no según quieras o no enviar fuera de tus zonas. Por defecto el envío gratuito, cuando se cumplen los requisitos se muestra junto al resto de envíos de esa zona. Como esto no es deseable, mañana os enseñamos a evitarlo. Las zonas y los métodos de envío tiene prioridad de arriba a abajo. Pon las que quieres que lea antes encima. Las clases de envío son etiquetas que se pueden poner en los productos para darles un coste adicional de envío. Se crean fuera pero se asignan en los productos. Hay que definir el sobrecoste de cada clase en cada método de envío de cada zona. Las clases admiten operaciones matemáticas en el cálculo del coste. Permite los operadores de cantidad, coste y porcentaje (pincha en la ? de al lado del coste de clase en un método de envío para ver la explicación. Si tienes impuestos, en la pestaña impuesto o en cada impuesto define si hay que aplicarlo al envío (en España el envío va con IVA). La semana que viene lo explicamos. Esperamos que este vídeo os sirva para explicarlo.

Diseño Web, Gestores de contenidos

Atributos y variaciones de productos en Woocommerce. Cómo poner tallas, colores etc en tu tienda online.

/

Estas son algunas de las preguntas recurrentes en clientes que tienen sus tiendas con Woocommerce: ¿Qué son los atributos en Woocommerce? ¿Cómo se crean productos variables? Como añadimos color, tallas etc en productos de Woocommerce? Hoy os intentamos resolver dichas preguntas. Cómo crear atributos y productos variables en Woocommerce. Los atributos en Woocommerce se pueden usar para dos cosas principalmente: Añadir etiquetas a los productos para luego poder filtrarlos en la tienda con esas etiquetas. Usar esos atributos para crear productos variables. Son variaciones del mismo producto con características diferentes que pueden tener stock diferente, precio diferente… En el vídeo os explicamos cómo añadir atributos a los productos, y cómo usarlos tanto para filtros como para crear productos con diferentes variaciones. Os dejamos varias notas: Los atributos pueden crearse a nivel de producto o nivel global (toda la tienda). Recomendamos lo segundo. Los atributos pueden marcarse para mostrarse o no en la tienda. Los atributos pueden marcarse como aptos para crear variaciones o no. Para crear variaciones el producto debe cambiarse a variable. Las variaciones puede crearse automáticamente o manualmente. Cada tienda es diferente, tendréis que decidirlo vosotros. Puedes luego ir a cada variación y cambiar todos los detalles: imagen, precio, inventario, descripción, tamaño, peso… Recordad que las variaciones tienen que tener precio y mostrar si están “en stock” o no para poder aparecer en la tienda. Aquí podéis verlo:

Diseño Web, Gestores de contenidos, Información Tecnica, Internet

Qué son los enlaces nofollow y dofollow y cómo se usan en WordPress

/

Los enlaces dofollow y nofollow son opciones que tenemos para categorizar los enlaces en nuestra págian web y poder indicarle a los robots de los buscadores si queremos que sigan esos enlaces o no. ¿Qué pasa cuando un robot sigue una enlace (interno o externo) en nuestra web? Dos cosas: los robots pueden indexar esa página, porque “aprenden” de ella. el que nuestra web enlace a otras les transfiere nuestra “autoridad”, nuestra importancia SEO (por poca que fuera). Puede no interesarnos que pasa alguna de las cosas anteriores. Es decir podemos no querer indexar una página (un Aviso Legal o un enlace de inicio de sesión) o podemos no querer transferir nuestra autoridad SEO a otra web (es una especie de regalo que le hacemos). Nosotros decidimos a quien asignar cualquiera de los dos privilegios. Lo que hay que tener claro es que todos los enlaces por defecto son dofollow. No hay que hacer nada para crear un enalce dofollow. Así que la herramienta que tenemos son los enlaces nofollow, que creamos poniendo rel=”nofollow” en el código del enlace. Pero, ¿cómo se hace eso en WordPress? En el siguiente vídeo os explicamos todo sobre estos tipos de enlace y cómo usarlos para las entradas, páginas, imágenes y menús de WordPress.

Código Worpdpress, Diseño Web, Gestores de contenidos, Trucos

Añadir un menú de inicio de sesión y cierre de sesión en WordPress.

/

Como prometimos en el pasado vídeo, y siguiendo el orden de “tutoriales” o trucos de WordPress, hoy queremos enseñar a crear unos elementos de menú de inicio de sesión y de cierre de sesión. Elementos de menú que, además van a desaparecer según tengamos la sesión iniciada o no. Es decir, si no hemos entrado con nuestro usuario, aparecerá el menú de inicio de sesión, pero no el de cierre, y si estamos con nuestro usuario iniciado, aparecerá el de cierre de sesión pero no el de inicio. Vamos a necesitar añadir unos códigos de CSS para que aparezcan y desaparezcan los menús, y un código de php para evitar que WordPress pida confirmación en el cierre de sesión. En varios pasos necesitaremos códigos o conceptos que hemos usado en artículos pasados. Cómo añadir menús de login y de logout en WordPress. Estos son los pasos: Lo primero que vamos a hacer es añadir unos menús personalizados: – Login o Iniciar sesión, con url: https://tudominio.es/wp-login.php. – Logout o cerrar sesión con url: https://tudominio.es/wp-login.php?action=logout A esos menús vamos a añadirles unas clases, para poder modificar su comportamiento por CSS. Para eso necesitaremos el artículo de opciones avanzadas de los menús de WordPress.En el vídeo, como ejemplos (puedes usar otros) pusimos: – A login la clase loggedok – A logout la clase loogedko. Vamos a añadir un código CSS para ocultar el menú de Login si la sesión ya está iniciada. Para ello vamos a usar este código: Para ocultar el menú de Logout si no tienes la sesión iniciada tienes dos opciones:A) Ocultar por defecto el menú y desocultarlo si estás registrado. Nota: como explicamos en el vídeo, debería funcionar sin important, pero en muchas plantillas no funciona. Si no funciona, no nos gusta tanto como la opción B, porque el uso de important en el CSS debe limitarse lo máximo posible. B) Usar el identificador not() de CSS para ver si no tiene la clase que pone WordPress cuando tiene la sesión iniciada. Con eso ya estaría, pero si pinchas en cerrar sesión, verás que WordPress pregunta al usuario si quiere cerrar dicha sesión. Esto no queda muy elegante. La razón es que, para no preguntarlo, WordPress necesita un código de sesión (wpnonce), que cambia cada vez y no podemos ponerlo estático en nuestra url. Así que vamos a poner el siguiente código en el functions.php de nuestro tema hijo o en nuestro plugin de Snippets: Este código comprueba si hay un cierre de sesión sin wpnonce y, si es así, cierra sesión y redirige a la página de Inicio. En este vídeo os explicamos todo:

Código Worpdpress, Diseño Web, Gestores de contenidos

Quitar o restringir el backend a ciertos roles de usuarios en WordPress.

/

Ayer compartimos un vídeo sobre cómo quitar la barra de administración para ciertos roles de usuarios de WordPress. Y prometimos subir este vídeo sobre cómo restringir el backend. Pues aquí lo tenéis. Cómo restringir el backend sólo a ciertos roles de usuarios de WordPress. El proceso es sencillo, al código de ayer añadimos el siguiente código: Como veis, y si leísteis el artículo de ayer, hemos usado el código que está comprobando las capacidades del usuario actual. En este caso miramos si puede editar páginas (admin o editor), pero podéis usar el del rol que queráis. Os dejamos aquí un listado de roles y capacidades. Con este código, sólo los administradores y editores, podrán acceder al backend. El resto de usuarios serán redirigidos a la página principal al registrarse. Os lo explicamos en este vídeo.

Código Worpdpress, Diseño Web, Gestores de contenidos, Trucos

Quitar la barra de administrador de WordPress según los roles de usuarios.

/

Cuando tienes una web que admite usuarios, algo muy solicitado es que ciertos roles de usuario no puedan ver la barra de administración. Hoy vamos a ver como hacerlo. Nota: es cierto que, en esas ocasiones, también solemos querer que esos roles no puedan acceder al backend. Mañana explicaremos cómo hacer esto. Lo hemos separado para simplificar, y porque no siempre se necesitan ambas cosas. Cómo quitar la barra de administrador de WordPress para ciertos roles de usuario. Lo vamos a hacer directamente con un código porque no creemos que sea necesario un plugin para esto. Recordamos que el código hay que ponerlo en un plugin de Snippets o en el fichero functions.php. En este código ponemos los roles que queremos que tengan la barra donde he marcado en azul. El código comprueba el rol del usuario y, si no es parte de esa lista, no muestra la barra. En este vídeo lo explicamos. Opción 2. En internet veréis otros códigos que miran las capacidades de los usuarios. Me parecen menos correctos y más difíciles porque tienes que conocer las capacidades de cada rol.. Pero os dejo un ejemplo que quita la barra para el administrador y para editores (que pueden editar páginas ) . Opción 3. También se puede “ocultar” con CSS. No lo recomendamos porque sólo la oculta, no la quita. Pero si no sirven las anteriores, puede ser útil. Añade esto en tu código de CSS. Quitar la barra de administración para un usuario específico. Lo dejamos al final, porque no suele ser frecuente. Pero si quieres quitarla sólo para un usuario, en su perfil, desde el backend, tienes una casilla que puedes desmarcar: Mostrar la barra de herramientas al ver el sitio.

Código Worpdpress, Diseño Web, Trucos

Añadir un icono de carrito en el menú de WordPress sin usar un plugin.

/

Algunas plantillas de WordPress incluyen icono de carrito en el menú de tu tienda de Woocommerce en WordPress.. Otras no. Y si no lo incluyen, muchos optan por usar plugins para añadirlo. Pero ya hemos dicho que no somos partidarios de instalar muchos plugins: son posibles vectores de ataque, y ralentizan la web. Siempre es mejor encontrar una solución sin plugin. Hoy os la dejamos. Cómo añadir el icono de carrito en un menú de WordPress. Aunque mucha gente no lo sabe, WordPress viene integrado con una serie (una librería) de iconos llamados Dashicons. Los carga “de serie”. Así que vamos a usarlos (al final os mostramos cómo hacerlo si quieres usar otra librería). El proceso es el siguiente: Vamos a copiar la url de tu carrito. La puedes encontrar en Woocommerce->Ajustes -> AVanzado. Copiala. Ve a la página de Dashicons (os la hemos dejado más arriba) y busca el icono del carrito. Lo tienes aquí. Pincha en Copy Html y copia el código que te da. Es el siguiente: Ve a Apariencia->Menus y crea un nuevo elemento de menú.personalizado. En la url pon la dirección de tu carrito. En Texto del enlace pon el código encima de estas líneas. Guarda el menú. Si ahora refrescas la página verás que tienes el carrito. Usar otra librería de iconos. Si, por alguna razón, no te funciona Dashicons o no quieres usarla, puedes usar otra librería de iconos. Investiga tu plantilla porque puede que incluya una (suelen hacerlo). Cómo poner cada icono depende de la librería. Si no, puedes instalar un plugin como Font Awesome para añadir dicha librería, y buscar y usar el icono de carrito de Font Awesome. Aquí tenéis un vídeo explicando el proceso: Hemos dicho sin plugins…pero si quieres uno puedes usar este.

Scroll al inicio