También se presentan algunas funcionalidades con un conjunto de sobresalientes características que hacen que las mismas sean prácticas y utilitarias adaptadas al sistema de Wordpress con Woocommerce que favorecen y optimizan aspectos fundamentales del mismo.

27 de abril de 2014

CONFIGURAR LAS PÁGINAS Y ESTABLECER LAS AUXILIARES DE INDEX, ATENCIÓN AL CLIENTE, SEGUIMIENTO DE PEDIDOS, PÁGINA DE ERROR 404, CERRAR SESIÓN ETC. EN WOOCOMMERCE.

Configuración de las páginas principales de la tienda online en Woocommerce:

Las páginas principales de la tienda se crean automáticamente al instalar el módulo Woocommerce y activarlo por primera vez; en la parte superior aparecerá un rótulo con un botón (Instalar páginas de WooCommerce) que al pulsarlo las creará automáticamente con su código-corto, de lo contrario y antes de configurar ésta sección, tendrá que crearlas manualmente, ingresando en el área de edición de cada una de ellas los códigos-cortos correspondientes o utilizar la siguiente utilidad para recuperarlas si se han eliminado de una forma accidental.

Regenerar las páginas de Woocommerce automáticamente: Con esta utilidad Re-Create WooCommerce Pages que pegaremos en nuestro fichero de funciones personalizadas funciones.php nos permitirá regenerar todas las páginas de Woocommerce si han sido eliminadas. Este snippet coloca un botón en Woocommerce > Estado del sitema > Herramientas > Re-crear-Páginas que las volverá a instalar de nuevo.

Las únicas páginas que se crearán manualmente ya que Woocommerce no las instala por defecto, son las de:
  • Página personalizada de inicio o INDEX, HOME etc. de su sitio.
  • Página cerrar sesión.
  • Atención al cliente.
  • Terminos y condiciones.
  • Seguimiento de pedidos.
  • Página de error 404.
  • Página de blog para artículos relacionados con la temática y comentarios de los usuarios.
  • Página de "En Mantenimiento" (Se tratará en una entrada aparte).
Dependiendo de su sitio, es posible que necesite crear otras páginas más específicas de acuerdo a su temática o nicho de mercado... cómo: Quiénes somos, Acerca de, Dónde estamos, Recursos etc etc.


Páginas auxiliares del sitio con Woocommerce:

Página personalizada de inicio:
Esta página de inicio puede crearla ad doc y personalizarla si no quiere usar la página del catálogo de productos que es la que Woocommerce establece por defecto como principal del sitio. Esta página personalizada de presentación de la tienda o de inicio del sitio, puede crearla como cualquier otra nombrándola como INDEX, HOME etc. Será la principal de la tienda y la que inicie el sitio, luego la tendrá que asignar al sistema en: Wordpress > Ajustes > Lectura > Una página estática > Página Inicial seleccionándola y sacándola posteriormente al menú de la tienda en Apariencia > Menús.
Una página permanente de inicio que no sea la del catálogo tiene sus ventajas para mejorar el SEO del sitio.

Puede ver más información sobre la importancia de la página INDEX u HOME para el sitio en la sección DESCRIPCIÓN BREVE DE LAS META-TAG PARA EL SEO.

NOTA: Al final de este artículo en Ruecursos Adicionales, puede encontrar una utilidad para redirigir al cliente a la página de INICIO-INDEX en lugar de la del CATÁLOGO cuando una venta se ha completado o el carrito ha quedado vacío.

Página Cerrar Sesión: Woocommerce no trae en su configuración original algún modo de cerrar la sesión para salir de la tienda y así no dejarla abierta. Incluso si está haciendo un pedido desde su hogar el usuario puede querer cerrar la sesión, tal vez para volver a iniciar una nueva con una cuenta diferente, especialmente si varias personas comparten el ordenador o simplemente por seguridad.

Para solucionar esta nefasta falta de pevisión, tendremos que hacer uso de este desconocido shortcode [woocommerce_logout] siguiendo estas instrucciones.

1º.- Añadir una página como cualquier otra y nómbrela cómo desee, por ejemplo: Salir, Cerrar sesión ...etc. Añada el código-corto [woocommerce_logout] como contenido de la página y publiquela.
2º.- En la sección WooCommerce > Ajustes > Páginas Principales de la tienda, enlazar la página que ha creado seleccionándola en el desplegable de: "Página Cerrar Sesión" y pulse Guardar cambios.
3º.- En Apariencia > Menús añadir la nueva página creada 'Salir' a cualquiera de los menús que desee. Aunque se agrega como una página, funciona como un vínculo de cierre de sesión de un sólo clic.

NOTA: Si Woocommerce en la instalación ya ha establecido en el sistema esta página con el código-corto original [woocommerce_my_account], bastará cambiarlo por el nuevo [woocommerce_logout] y seguir el paso nº3.

Recurso adicional que muestra el estado de Login-Logout de un usuario pudiendo cambiar esta condición:
Este código genera un short-code [acceder-salir] que se puede colocar en cualquier sitio, en un widget de texto por ejemplo, mostrando 'SU ESTADO EN LA TIENDA' de conectado - desconectado que tiene un cliente y la posibilidad de cambiar esta condición, dirigiéndole en cada caso a las páginas establecidas para ello.

Este código-corto también se puede colocar en la página de 'agradecimientos' encima o debajo del código-corto [woocommerce_thankyou] para una vez terminado el proceso de compra, poder desconectarse y cerrar la sesión de la tienda haciendo más segura la navegación sobre todo si un cliente realiza un pedido, por ejemplo, en un lugar público como un cibercafé. Cópielo y péguelo en el fichero funciones.php de su plugin personalizado.

Atención al Cliente: Una parte esencial de un sitio de comercio electrónico es la página de "Atención al Cliente". Esta página de contacto hace que sea fácil para los visitantes del sitio, los clientes potenciales y clientes activos que lleguen a su sitio se pongan en contato con Usted. Aquí se colocará un formulario de petición de información. Esta página es necesaria para los eventos que puedan surgir en la tienda y destinada a resolver reclamaciones, conocer opiniones y sugerencias sobre nuestros productos o servicios así cómo a contestar a las preguntas de nuestros clientes.

Módulo auxiliar formulario: Este plug-in Proper Contact Form nos puede servir perfectamente para añadir un formulario de contacto de una forma sencilla a través de un código corto [proper_contact_form] que lo enviará a varias cuentas de correo establecidas en su configuración. Este código-corto también se puede añadir en una Tab especifica personalizada en Datos Del Producto para que se muestre junto a las demás en la presentación del 'Producto Principal' y poder pedir información de forma más concreta acerca de un producto determinado o una característica específica del mismo, ya que dispone de un menú desplegable con varias opciones para su "Motivo del contacto" configurables y personalizables de petición de información cómo... Interesado en este producto, Información general, Resolver problema de envío etc. de este modo puede servir para varias secciones de la tienda.
Terminos y Condiciones: WooCommerce proporciona una buena característica que obliga a sus clientes a aceptar los términos y condiciones si se define esta página en la configuración de WooCommerce. De serie no hay ningúna página a estos efectos preestablecida, sin embargo es una página 100% necesaria. Se trata de una función muy importante que siempre se debe establecer en el menú de la tienda. Esta página es necesaria legal y técnicamente para ciertos procesos de la tienda.
Aquí se radactará adecuadamente el aviso legal y las políticas de privacidad de datos, cookies, condiciones de venta, envíos, devoluciones etc. Para añadirla simplemente tiene que seguir los mismos pasos que para añadir una página cualquiera en WordPress; Ir al menú principal de WordPress > Páginas > Añadir Nueva y luego seleccionarla en el desplegable del apartado Woocommerce > Configuración > Páginas > Página de terminos y condiciones.
Al definirse esta página de "Terminos y Condiciones", en el momento de realizar el pago y en el formulario de registro en la tienda, se le preguntará al cliente (Sí / No) las acepta para poder continuar.
Hay que poner el enlace a esta página de forma visible y correcta en el menú la tienda según la Ley Orgánica de Protección de Datos (LOPD) en España en Apariencia > Menús.

Recurso adicional: Este fragmento de código Storing WooCommerce Terms & Conditions in the Database nos permitirá dejar constancia en la BD de que los ‘Terminos y Condiciones’ han sidio aceptados para poder probar para posibles litigios que su cliente está de acuerdo con ellos. Esta característica saldrá explicitamente reflejada en la edición de cada pedido.

Módulo auxiliar cookies: Este plugin le va a ayudar a confeccionar su política de cookies para la ley española. El plugin le proporciona y generá las páginas con los textos legales y técnicos iniciales que necesita su web automáticamente para cumplir con la normativa, pudiéndo ser editados para poder personalizar los textos en función del nombre de su tienda, cookies de terceros, nombre de su empresa etc. mostrando en la parte superior o inferior de las páginas un rótulo retráctil con el texto de autorización a usarlos y enlaces a ellas. Módulo cookies para la normativa española.

Seguimiento de Pedidos: [woocommerce_order_tracking] da al cliente la posibilidad de ingresar el ID de un pedido y el E-mail de facturación en el formulario que aparece, para visualizar el estado de un determinado pedido. El código corto de seguimiento de pedidos se puede poner en la misma página de ‘Pedidos-Seguimiento’ o mejor aún en una auxiliar creada manualmente exclusivamente para este propósito, si se quiere sacar al menú de forma individual en Apariencia > Menús.

Página de error 404: Cuando un usuario hace clic en un enlace a una página o a un producto que ya no está disponible en su sitio, el servidor devuelve un error 404 (Página no encontrada). Dado que los mensajes genéricos pueden resultar frustrantes para el usuario, le recomendamos crear una página 404 personalizada que proporcione más información sobre su sitio. Además, puede añadir sugerencias útiles, en lugar de elaborados y complejos mensajes de error que nadie entiende y poner un código corto cómo el de productos recientes [recent_products per_page="4" columns="4"] o el de categorías [product_categories number="4" parent="0"] etc, para intentar que no se pierda el interés.

Con este recurso adicional añadido a su fichero personalizado funciones.php y cambiando ‘/my404page.php’ por nuestra flamante, estilosa y sugerente recien creada página 404, hará que cuando surja esta funesta anomalía sea redirigido el cliente a la página 404 que hemos creado.

Crear página de blog: Un blog activo es un componente esencial de un sitio de comercio electrónico rentable. Un buen blog le ayudará a llevar a cabo una serie de cosas importantes, como ...
.- Un blog la va a permitir mantener su sitio actualizado con nuevos contenidos, que es ideal para el SEO y el tráfico de búsqueda activa.
.- Se le permitirá interactuar con sus clientes y mantenerlos al día sobre sus últimos productos
.- Potencialmente se abrirán fuentes de ingresos pasivos adicionales a través de la comercialización en Adsense, Ebay u otros.
Esta página la tendrá que asignar al sitema en: Wordpress > Ajustes > Lectura > Página de entradas y sacarla al menú en Apariencia > Menús.

Página de "En Mantenimiento": Esta página permite redirigir fácilmente a sus visitantes/clientes a una página HTML de "En Mantenimiento" temporal sin la necesidad de un plugin, mientras Vd. cómo "Administrador" o "Súper Adminstrador" tendrá acceso total y podrá hacer cambios en el sistema o actualizar la tienda en línea. (Se tratará en una entrada aparte). Esta página actua por sí sóla y no habrá que sacarla al menú de la tienda.

Páginas Principales De La Tienda Woocommerce V2.0.20:
Woocommerce > Configuración > Páginas. Las siguientes páginas necesitan ser ubicadas en la configuración de Woocommerce para que Woocommerce sepa dónde están. Estas páginas deberían haberse creado durante la instalación y activación del plugin con sus códigos-cortos correspondientes. Si no es así, o se han borrado accidentalmente, usted tendrá que crearlas manualmente o utilizar la utilidad de regeneración mencionada anteriormente en: Regenerar las páginas de Woocommerce automáticamente.

Página principal del catálogo general de la tienda: Es una página vacía de contenido y no lleva [código-corto], en el ejemplo de la imágen superior se ha llamado "Escaparates". Aquí se establece la página principal del catálogo general de productos dónde se mostrarán todas las categorías con sus productos, sólo productos o ambos. Todo depende de la opción seleccionada en la pestaña Woocommerce > Configuración > Catálogo > En las páginas de la tienda mostrar
Usted además de esta página de catálogo, puede crear una página personalizada como cualquier otra de presentación o INDEX, HOME etc. o principal de la tienda que será la que inicie el sitio cómo ya se comentó en: Páginas Auxiliares Del Sitio.
En cualquiera de los dos casos, esta página la tendrá que que asignar al sistema de Wordpress como la de inicio del sitio en: Wordpress > Ajustes > Lectura > Una página estática > Página Inicial  y seleccionarla, sacando sus enlaces correspondientes al menú de la tienda.

Páginas con los detalles del producto: Las páginas en las que se muestran todos los detalles del producto, se generan de forma dinámica así que no habrá que crearlas. Cuándo se pulsa en un producto de una determinada categoría se genera dicha página con las fotos y demás datos del artículo que habremos rellenado en el editor de ese artículo.

Página de términos y condiciones de la tienda: sin [código-corto]. Aquí se redactarán los textos premisas, condiciones de venta, condiciones de envío, devoluciones etc. De serie no hay ninguna página preestablecida a estos efectos, sin embargo es una página 100% necesaria cómo se comentó en Términos y Condiciones.

Códigos cortos: Más abajo y para que sirva de guía, se muestran los nombres de las páginas necesarias y el código-corto correspondiente a cada una de ellas.


Página de: Mi compra (Carrito)  [woocommerce_cart].
Contenido de la página Mi compra / Carrito: Muestra el sumario, contenido del carrito y la interfaz de la calculadora de envío.

Página de: Realizar Pedido [woocommerce_checkout].
Contenido de la página Pedido: Este código corto woocommerce_checkout muestra el proceso de pago, la interfaz para el ingreso de los códigos de los cupones, facturación etc.

Página de: Realizar Pago [woocommerce_pay] (Superior: 'Realizar pedido').
Contenido de la página Pago: Muestra el sumario, resumen y los datos para realizar el pago según el método de envío seleccionado.

Página de: Agradecimientos [woocommerce_thankyou]  (Superior: 'Realizar pedido')
Contenido de la página Agradecimientos [woocommerce_thankyou]. Esta página no se sacará al menú principal, sólo se asignará al sistema. Esta página tiene cómo fin lanzar un mensaje de agradecimiento al cliente por su compra cuando ésta se ha efectuado y presentar los detalles del pedido: ID, Fecha, Artículos, Total del pedido, IVA y las detalladas instrucciones para realizar correctamente el pago del pedido según las instrucciones qué habremos incluido al configurar las distintas pasarelas de pago.

Página de: Mi Cuenta-Regístrese [woocommerce_my_account].
Contenido de la página Mi Cuenta: En esta página muestra la sección en la que el cliente no registrado se le presenta una interfaz para registrarse como nuevo usuario en la tienda y da la oprtunidad si ya lo es, de ingresar los datos de Usuario/E-mail y Contraseña para ingresar en ella. Si se invoca esta página estando 'logeado' puede ver una nueva interfaz que le permitirá cancelar, pagar, descargar la factura en PDF si se tiene instalado el plugin Woocommerce-pdf-invoices-packing-slips, ver pedidos recientes y actualizar su información de la dirección de facturación y la de envío. Por defecto está configurado a 15. Se puede especificar el número de pedidos a mostrar con: [woocommerce_my_account order_count="12"] y puede usar -1 para mostrar todos los pedidos.

Página de: Editar Mi Dirección [woocommerce_edit_address]  (Superior: 'Mi cuenta').
Contenido de la página Mi Dirección: Muestra la sección "Mi dirección" en el que el cliente puede ver las direcciones de facturación y envío de sus pedios que serán utilizadas por defecto en la página de pago. Se pueden editar cada una de ellas para cambiar su contenido.

Página de: Ver Pedidos  [woocommerce_view_order]  (Superior: 'Mi cuenta')
Contenido de la página Ver Pedidos: [woocommerce_view_order] Superior: "Mi Cuenta". En esta página se mostrarán al cliente un listado de los pedidos qué ha realizado recientemente con su ID, Estado, Fecha, Total y los botones de Pago, Cancelar y Ver (detalles).

Página de: Cambio de Contraseña [woocommerce_change_password]  (Superior: 'Mi cuenta').
Contenido de la página Cambio de contraseña: Muestra una ventana de edición donde puede introducir su nombre de usuario o la dirección de correo electrónico para recibir en su E-Mail un enlace para crear una contraseña nueva.

Página de: Cerrar Sesión [woocommerce_my_account].
Contenido de la página Cerrar Sesión: Cambiar el código-corto original [woocommerce_my_account] por este otro [woocommerce_logout] y saque esta página al menú de la tienda para poder, una vez terminado un pedido cerrar la sesión. Este código-corto actúa como un vinculo de cierre de sesión de un sólo clic.

Página de: Contraseña Perdida [woocommerce_lost_password]  (Superior: 'Mi cuenta').
Contenido de la página Contraseña Perdid: Esta página mostrará un formulario de recuperación de la contraseña perdida.

Códigos que se emplean en las páginas en la instalación de serie.

Página de: Mi compra: Mi compra [woocommerce_cart]
Página de: Realizar Pedido [woocommerce_checkout]
Página de: Realizar Pago [woocommerce_pay]
Página de: Agradecimientos [woocommerce_thankyou]
Página de: Mi Cuenta-Regístrese [woocommerce_my_account]
Página de: Editar Mi Dirección [woocommerce_edit_address]
Página de: Pedidos-Seguimiento [woocommerce_view_order]
Página de: Cambio De Contraseña [woocommerce_change_password]
Página de: Cerrar Sesión [woocommerce_my_account] cambiar por este otro [woocommerce_logout]
Página de: Contraseña Perdida [woocommerce_lost_password]

Códigos-cortos que no se usan en la instalación de serie.

Página Editar cuenta [woocommerce_edit_account]
Página Cierre de sesión del cliente [woocommerce_logout]
Página de seguimiento de pedidos [woocommerce_order_tracking]

Shortcodes incluidos con WooCommerce V2.0.20: Los siguientes códigos_cortos pueden utilizarse en cualquier lugar que quiera en la zona de edición de cualquier página.
WooCommerce viene con varios códigos cortos que se pueden utilizar para insertar contenido dentro de los mensajes, blog o en las páginas como elementos individuales. Estos códigos pueden presentar diverso contenido como... contenido del carrito, pedidos, seguimiento de pedidos, productos recientes, productos destacados, botón auxiliar añadir al carrito, categorías de productos... etc. cada uno con personalización propia.
Ver aquí los códigos incluidos.

NOTA: Los códigos_cortos que muestran productos, productos destacados, los más vendidos, categorías etc. no generan paginación.

Algunas de estas páginas con sus códigos-cortos que hamos visto anteriormente las puede sacar o no al menú principal en Apariencia > Menús de la tienda en función de sus necesidades o la configuración que Vd. quiera darle a la tienda.

También cabe señalar que algunos de estos códigos cortos pueden combinarse entre sí, por ejemplo y para mayor comodidad puede establecer una página y configurarla con:

[woocommerce_edit_address]
[woocommerce_change_password]
[woocommerce_logout]

y sacarla al menú principal de la tienda en Apariencia > Menús.

Colección de códigos (Snippets) para personalizar el nº de columnas y productos mostrados por página:

Fragmentos de código (Snippets) para su fichero functions.php de su tema o aún mejor en el Plugin Personalizado funciones.php que ha de crear y activar como un plugin normal. Estos fragmentos de código permiten entre otros, si su plantilla no lo trae por defecto, cambiar el número de columnas y productos presentados en la tienda.
Para que cuadre la rejilla tendrán que ser múltiplos de esta. Pej: Para 4 columnas se seleccionaran 4, 8, 12, 16, 20 etc. productos, para que desde aquí empiece la paginación.

Contenido:
.- Cambiar el número de columnas y productos mostrados por página.
.- Cambiar el número de productos relacionados y crea una nueva tab para mostrarlos en la presentación del  'Producto Principal'.
.- Cambiar el número de productos recomendados (Upsells).
.- Agregar un titulo y la descripción en las miniaturas de las categorías de productos para mejorar el SEO.
.- Agrega dos botones de 'Anular pedido' y 'Seguir comprando' en los sumarios de la página del carrito y en la de finalizar pedido.

Snippets para personalizar nuestra tienda online con Woocommerce


Recursos y funcionalidades adicionales.

Redirección a la página INDEX: Para modificar el regreso a la página index o principal de la tienda y no a la ‘página principal del catálogo’ (Escaparates) desde el botón del carrito cuando éste está vacío o se ha completado un pedido, implemente esta funcionalidad:
Botón de regreso a la tienda.

Ocultar el título de las páginas: Si quiere quitar u ocultar el título del cuerpo principal de de las páginas de la tienda (Mi compra, Ver pedido, Cerrar sesión etc.), puede instalar en el sistema este otro módulo:
Hide Title.

Formulario PROPER CONTACT FORM en nueva TAB: Muestra el formulario PROPER CONTACT FORM en una nueva tab en el producto principal SIN PLUGIN. Este pequeño fagmento de código mostrará el formulario que genera el plugin a través del código-corto [proper_contact_form] en una nueva etiqueta en el producto principal en todos los productos para que el usuario tenga la posibilidad de pedir una información más detallada sobre él.
PROPER CONTACT FORM en una nueva etiqueta en producto principal.
Formulario de contacto Proper Contact Form.

SEO Wordpress-Woocommerce sin plugin: Ver artículo de esta imprescindible y necesaria funcionalidad para indexar sus páginas y productos en los motores de búsqueda de una forma sencilla y sin plugin.

Stemap dinámico para Wordpress y Woocommerce sin plugin: Con la funcionalidad que se presenta en este artículo, se tiene la posibilidad de crear/actualizar un archivo sitemap.xml para el SEO de nuestra tienda online en el directorio raíz del sitio con la URLs de todas la páginas, post, categorías de productos y productos para Google, Bing y otros motores de búsqueda sin plugin, de forma dinámica y automatizada.
Con esta funcionalidad no habrá que preocuparse más de crearlo recursivamente ya que siempre estará actualizado.
Stemap dinámico para Wordpress y Woocommerce sin plugin

Compatibilidad: Cómo integrar WooCommerce en cualquier plantilla de Wordpress:
Compatibilidad Woocommerce – Estructura de la plantilla.

Códigos para personalizar nuestra tienda online.
Códigos-Cortos incluidos en las plantillas de Woothemes.
Otra alternativa a estos últimos pueden ser los incluidos en jshortcodes.




Configuración Woocommerce | Configuración de las páginas en Woocommerce | Páginas en Goggle Bing | Página de error 404 en Woocommerce | Terminos y Condiciones | WooCommerce: Ajustes de las páginas de la tienda y cerrar sesión | Página de Atención al Cliente | Página de Seguimiento de pedidos | Cerrar sesión logout en Woocommerce | Añadir botón-enlace login y logout entrar-salir en Wordpress-WooCommerce | Tiendas online con Wordpress y Woocommerce | Snippet recursos adicionales para Woocommerce | Tienda online en Wordpress | WooCommerce add login and logout link-buttons to Wordpress-Woocommerce menu | Shortcodes included with WooCommerce | Shop shortcodes pages in Woocommerce | Short codes order tracking | WooCommerce pages | How to setup WooCommerce pages | Woocommerce page setup blog and contact pages | Shortcodes included with WooCommerce | WooCommerce Page Setup - Blog and Contact Pages | Set Up a Webshop with WordPress and WooCommerce  | Woocommerce re create pages | How to Setup WooCommerce Pages Using Shortcodes | Recreate Woocommerce default Pages | Wordpress How to install missing woocommerce pages | Install Pages in WooCommerce | Install Pages in WooCommerce | How to Setup WooCommerce Pages Using Shortcodes | WooCommerce Page Setup - Blog and Contact Pages | Configure the pages and set the auxiliary index, customer service page, order, 404 error page, tracking page, close session in woocommerce | Установите страницы и установить вспомогательный INDEX, клиент, отслеживание заказа, стр 404, войти Т.Д. В WooCommerce..