Una guía de diseñadores para WooCommerce

Si está diseñando una tienda de WooCommerce como Shopify o desarrollando un tema de WooCommerce existente, este artículo Guía para diseñadores de WooCommerce es para usted. Esta composición brinda un poco más de información sobre el estilo, el cambio de diseños y otra información que cubre las páginas relacionadas con WooCommerce.

Este complemento es una herramienta fácil de usar y muy flexible; sin embargo, no todos los sitios web serán compatibles. Al utilizar las funciones y los enfoques compatibles con WooCommerce, puede acelerar el proceso de diseño y desarrollo.

Permite a los usuarios personalizar modificaciones pero con costo adicional. La forma más rápida de ver qué características hay es visitar la demostración de Storefront dentro de WooCommerce. Si necesita alguna forma de aprender a usar Woocommerce en general, consulte las guías de domo para ayudarlo a comenzar. WooCommerce crea las siguientes páginas nuevas. Hay tipos de páginas para las que necesitará diseñar.

El primero son las páginas de productos. Estas páginas tienen dos tipos, a saber: Páginas de archivo de productos y Páginas individuales de productos.

Las páginas de archivo de productos muestran miniaturas de las categorías de productos disponibles. Estos muestran otra página de archivo de productos cuando hace clic en la miniatura de la categoría. Luego, muestra el producto individual cuando hace clic en la miniatura de un producto.

El otro tipo son las páginas individuales de productos. Aquí, estos muestran productos individuales y combinan imágenes de productos, información del encabezado del producto, información detallada del producto y productos relacionados, ventas cruzadas y ventas adicionales.

También cuenta con Páginas Especiales , que incluyen Carrito de Compras y Pagar . Los carritos de compras generalmente se muestran en forma condensada como un widget de barra lateral, a veces en forma expandida en la página del carrito junto con la información de entrega. El pago, por otro lado, es cuando el cliente está pagando y requiere información de dirección.

Diferentes tipos de productos

Esta herramienta cuenta con diferentes tipos de Productos;

Primero está el encabezado del producto que se divide en cinco partes. Estos son:

1. Nombre del producto: se muestran en las páginas de resumen/archivo y páginas individuales
2. Característica del producto: verá en las páginas de resumen/archivo y páginas individuales
3. Imagen: las imágenes destacadas se muestran en el resumen e imágenes adicionales en la página de un solo producto.
4. Descripción larga: se muestra en el área de descripción del producto en la parte inferior de la página de un solo producto.
5. Descripción breve: se muestra en la parte superior de la página de un solo producto.

Esta herramienta también permitirá a un usuario acceder al producto.

Cada categoría necesita una imagen de categoría suministrada y una descripción, y también puede tener subcategorías. Por ejemplo, Zapato es una categoría y la marca de zapatos es una subcategoría. Los archivos de categorías de productos se generan automáticamente con las siguientes secciones: título o nombre de la categoría, descripción de la categoría, miniatura de una categoría para cada subcategoría de la categoría actual, miniaturas de productos opcionales que incluyen el título, el precio y Agregar al carrito para cada producto en la categoría actual. Al hacer clic en una categoría, se abre una nueva categoría; al hacer clic en la miniatura de un producto, se abre el producto.

Además, en las Páginas de productos, estas se generan automáticamente con lo siguiente:

Imágenes del producto: estas son imágenes destacadas e imágenes complementarias para el producto. Título del producto, precio del producto, descripción breve del producto, cantidad para agregar al carrito (con + y controles), botón Agregar al carrito, categorías de SKU (unidad de mantenimiento de existencias) del producto y etiquetas.

Las pestañas del producto incluyen la descripción larga del producto, incluida la galería de imágenes opcional, información adicional como el ticket de atributos del producto para mostrar en la página del producto y las revisiones opcionales del producto. Al hacer clic en una categoría, se abre una nueva categoría; al hacer clic en la miniatura de un producto, se abre el producto.

Upsells: estos son los "también te pueden gustar" seguidos de pulgares/títulos para upsells.

Ventas cruzadas: estos son los productos relacionados seguidos de las miniaturas.

La presentación del producto, las opciones son la presentación Estándar y Opcional. El estándar muestra la imagen destacada en la parte superior de la página del producto, con las miniaturas de imágenes complementarias debajo en 3 columnas de miniaturas. Por el contrario, la presentación Opcional muestra la imagen destacada sin miniaturas debajo y muestra todas las imágenes en la pestaña Descripción.

Otra parte de la herramienta son los widgets de búsqueda de productos que están disponibles para colocar en los widgets de la barra lateral o en los widgets de pie de página. Si desea buscar cualquier sitio web, tiene las opciones de búsqueda en todo el sitio. Debajo está el cuadro de búsqueda de productos que le permite buscar un nombre de producto, una descripción corta y una descripción larga. La otra división de las opciones de búsqueda amplia se denomina desglose de categorías. Es un campo desplegable que permite la selección de cualquier categoría o subcategoría. El kit de nube de etiquetas Proud tiene un menú desplegable que le permitirá seleccionar etiquetas de precio.

Los widgets de búsqueda de opciones de búsqueda de categorías de productos solo aparecerán cuando se muestren archivos de categorías de productos generados automáticamente. Primero está la navegación en capas. Esto permite al usuario refinar los productos en función de los atributos y ayuda de manera efectiva al usuario en lo que está buscando. Filtro de precio del producto: muestra una escala móvil que permite filtrar los productos según un rango de precios. Los más vendidos: esto muestra el título/miniatura/precio de una lista seleccionada automáticamente de los productos más vendidos. El producto destacado muestra el título/miniatura/precio de los productos marcados como Productos destacados. En oferta: Muestra los productos que tienen un Precio de Venta ingresado además de su precio.

Si un usuario quiere diseñar su WooCommerce, tenemos opciones como Product thumbs. Cuando los productos aparecen como miniaturas de productos, se muestran 4 elementos, estos incluyen miniatura, título, precio, agregar al carrito. Estilo CSS que se puede usar para el fondo del producto, el borde del producto, el relleno y el margen. Lo siguiente es la miniatura. Estos incluyen borde, relleno y márgenes. El título incluye fuente, peso, color y tamaño, al igual que el precio. Debajo de agregar al carrito se incluye el color del botón, el color de la etiqueta, el borde y el radio.

En la herramienta también se muestra la etiqueta de venta, la palabra "venta" aparece sobre los pulgares del producto en venta; se puede usar el estilo CSS: color de fondo, color de fuente, color de borde. Ancho del borde, borde sólido/discontinuo, radio del borde.

Las variaciones de productos permiten a un cliente configurar un producto de ropa que está disponible en diferentes colores o diferentes diseños. Cuando se utilizan variaciones de productos, las páginas de archivo de productos mostrarán un botón "Elegir opciones" en lugar de un botón Agregar al carrito.

En resumen, hemos establecido los elementos principales en los que deberá pensar al diseñar una tienda WooCommerce. Hemos explicado los diferentes tipos de páginas, la información del producto, así como las opciones de búsqueda y estilo. Diviértete construyendo tu tienda WooCommerce.

Lea más sobre los temas de WordPress de Woocommerce aquí.