Una presentación general de los elementos requeridos para la plantilla de página del producto de la división

Cada página del producto de comercio electrónico necesita algunos elementos básicos para funcionar correctamente. El excelente diseño de la página del producto incluye elementos esenciales y no esenciales. En este artículo, veremos una presentación general de los elementos necesarios para la plantilla de página del producto de la Divica, para ayudarlo a comprender lo que necesita incluir. También veremos los elementos de soporte y cómo agregarlos todos con la división del constructor. Vamos a empezar. Enfoque de WooCommerce a los sitios de comercio electrónico

Primero, hablemos sobre el enfoque de WooCommerce a los sitios comerciales electrónicos. WooCommerce crea un tipo de publicación personalizada que tiene varios tipos de información del producto. Estos incluyen imágenes de productos, descripciones, precios, información de ventas, botones y más. Cada publicación de producto se crea con un editor simple.

Estos son elementos individuales del tipo de publicación del producto WooCommerce. Los elementos dinámicos, como el título, las imágenes, la descripción y el precio, se agregan a sus campos en el editor de productos. El tipo de publicación de WooCommerce los muestra en el front-end. Los constructores, como la división, pueden usar estas personas para crear modelos interesantes. WooCommerce con div

Si ha activado WooCommerce, verá 25 módulos de WooCommerce agregados a Divi Builder. Estos módulos le permiten presentar los elementos de WooCommerce en cualquier lugar de sus diseños de la Divica. Son automáticamente dinámicos, por lo que mostrarán la información para el producto específico.
Podemos usarlos con los módulos de división habituales para crear páginas de productos increíbles. Se requieren algunos de estos módulos para que la página del producto funcione, mientras que otros ofrecen funciones adicionales. Incluso si tenemos acceso a 25 módulos de WooCommerce diferentes en Divi Builder, debemos comprender cuáles de estos elementos son necesarios para hacer la página del producto operativo y cuáles crean funciones de soporte. Para comprender esto, veremos una plantilla de plantilla de producto para ver cómo usa los módulos. Utilizo la plantilla de página de producto gratuita para el paquete de apariencia para estos ejemplos. El módulo WooCommerce y el diseño del producto Diseño Una página de producto bien diseñada mantendrá juntos los elementos necesarios y serán el punto central de la página. Esto crea una jerarquía para el diseño de la página. Esta jerarquía proporciona al usuario la información que necesita y lo ayuda a liderar al usuario a través del proceso de compra. Para ver esto, veamos la apariencia de una página.
Aquí está el diseño completo de la página del producto en mi ejemplo. Esto incluye elementos esenciales y no esenciales. Este aspecto incluye una sección superior, encabezado y secciones de soporte.

En general, los elementos esenciales están en la parte superior de la página e incluyen la sección superior y la sección del encabezado. Los elementos no esenciales están en la parte inferior bajo los elementos esenciales. Ayudan a apoyar los elementos principales y promover ventas adicionales u otras CTA. Elementos esenciales de la página del producto ahora, para ver más de cerca los elementos esenciales de la página del producto. Veremos cuáles son, por qué los necesitamos y cómo agregarlos al aspecto de nuestra página de productos de Divic. La sección de sostenimiento comienza desde la parte superior de la página. La sección superior de la página de la tienda de productos incluye módulos de notificación Pesmet Woo y Woo.
Así es como se ve en el frente. En este ejemplo, se colocan en su propia sección en la parte superior de la pantalla. La página del producto funcionará sin ellos. Sin embargo, esta es información importante y esta es la ubicación donde los usuarios esperarán verlos. Woo BreadRumbs: muestra al visitante donde están en la estructura de navegación. Los Pesmets son excelentes para navegar. La página funcionará bien sin ella, pero las migajas son excelentes para identificar la categoría actual. Aviso de Woo: muestra que se ha agregado un producto al carrito. Esto le da al usuario comentarios que la página ha respondido a su clicista. También ofrece un enlace al carrito.

La sección del encabezado

Siga la sección del encabezado en el aspecto de la página del producto. Esta es la sección principal de la página del producto y contiene todos los elementos esenciales para que la página funcione correctamente y sin problemas.
Aquí hay un vistazo al diseño de la página en el frente. La parte que destacé son los elementos esenciales. Estos artículos hacen que la página del producto funcione. Los elementos incluyen: Título del producto Woo: muestra el título del producto. Meta del producto Woo: este módulo muestra los metadatos del producto. Puede elegir qué elementos de metadatos se muestran. Imágenes de productos Woo: esto muestra todas las imágenes en la galería de productos. Agregue una insignia de venta si el producto tiene descuento. Descripción del producto: esta es la descripción del producto. Puede elegir entre descripciones cortas o largas. Precio del producto Woo: esto muestra el precio actual del producto. También muestra el precio inicial si está bajo descuento. Stock de productos WOO: este módulo muestra el número de stock disponible en el inventario. El producto Woo se suma a la canasta: este es el botón que agrega el producto a la canasta. Descripción del Producto

La descripción del producto extiende la información del producto. Esto no es necesario para que la página funcione. En cambio, admite la venta del producto y los usuarios esperarán ver esta información. En general, cuanto más pueda agregar información, mejor.

Así es como se ve el frente. Destacé el área de descripción. Se crea con: Título del producto Woo: este es el mismo título del producto que en la sección del encabezado, pero el estilo es diferente para que coincida con su posición en la jerarquía de páginas. Descripción del producto Woo: elija mostrar la descripción larga o la descripción breve. Por lo general, es ideal para seleccionar la descripción corta en la sección del encabezado y la larga descripción en la sección Descripción. Esto le permite expandir la información. Información del producto WOO: esto muestra información adicional del producto. También incluye algunos módulos de texto para crear títulos. Elementos opcionales de la página del producto
A continuación, veremos los elementos opcionales de la página del producto. Hay muchos otros artículos de WooCommerce que puede agregar a la página del producto que mejora las ventas. Algunos están hechos con módulos de WooCommerce, y otros están hechos con módulos de división estándar. Estas secciones son opcionales, pero son buenas para incluirlas. Los vemos bajo los elementos más importantes de nuestro aspecto de ejemplo, como destacamos en la imagen de arriba. Incluyen: calificación de producto WOO: esto muestra las evaluaciones STAR que los usuarios han evaluado el producto. A veces se agrega a lo esencial o al lado de los testimonios.


Productos relacionados con WOO: esto muestra una lista de productos similares. Puede seleccionar los tipos y la cantidad de productos que se muestran. Elija las categorías, clasificación, número de columnas y elementos que muestran. Categorías de tiendas: los enlaces a diferentes categorías de tiendas a menudo se crean con imágenes y módulos de texto. Funcionan como CTA que llevan al usuario a las áreas favoritas de la tienda. Revistas de productos Woo: esto agrega una opción de revisión con un campo en el que el usuario puede escribir una revisión. También muestra las reseñas que otros usuarios han escrito. Puede tenerlo para mostrar una evaluación de estrellas. Testimonios: estos son los testimonios que los usuarios han enviado por correo electrónico o por otros medios. A menudo se crean con módulos de testimonio, diapositivas, módulos de texto, etc. CTA-Las exhortaciones se crean con módulos CTA, blurbas, imágenes, texto, botones y más. Son excelentes para presentar un descuento, un nuevo producto, un evento futuro, etc. Correo electrónico Optin: estos se crean con módulos de Optin de correo electrónico y son ideales para construir su lista de anuncios de información. Seguimiento social: se agregan íconos sociales con el módulo de seguimiento de las redes sociales. Soy una excelente manera de construir su búsqueda social. Ejemplos de módulo Se muestra secciones con productos y revisiones similares. Se crean con módulos WooCommerce y algunos módulos de soporte, incluidas imágenes y texto.

Estas secciones incluyen testimonios y un impulso a la acción. Los testimonios se crean con una imagen y una diapositiva. CTA fue creado con módulos de texto y un botón. También incluye una opción de correo electrónico. Cómo agregar módulos woo a la plantilla de página del producto
Cree o cargue una plantilla de producto accediendo al generador de temas Div> al tablero de WordPress. Para cargar, seleccione la portabilidad, elija Importar, navegar por su archivo JSON y haga clic en Importar plantillas Div Temo Builder. Corte una plantilla creando una plantilla de cuerpo y atribuyéndolo a todos los productos. Elija construir cuerpo personalizado y agregar sus módulos

Asegúrese de que haya activado WooCommerce para que los módulos estén disponibles. Para agregar sus módulos de WooCommerce, haga clic en el icono Dark Grey Plus y busque “Woo” en el campo de búsqueda. Verá todos los módulos de WooCommerce disponibles. Dónde obtener plantillas de página de producto gratuitas
Elegant Temas ofrece páginas gratuitas de páginas de diseño de productos para tiendas en línea. Puede encontrar páginas de productos gratuitas en el blog temas elegantes. Busque en el blog “plantilla de producto gratuita” o palabras clave similares. Descargue y descomprima los archivos de plantilla. Pensamientos finales Esta es nuestra presentación general sobre los elementos necesarios para la plantilla de la página del producto de la Divic. Es fácil ver cuáles son esenciales y cuáles son opcionales. Siempre mantenga juntos los elementos esenciales y asegúrese de que estos sean el punto central de la página. Seguir estas instrucciones lo ayudará a crear excelentes plantillas de páginas de productos. Queremos escuchar de ti. ¿Ha creado páginas de productos de WooCommerce con estos artículos necesarios? Cuéntanos sobre tu experiencia en comentarios. Imagen presentada por Letters-Shmeters / Shutterstock.com