En este documento utilizaremos el Complemento WooCommerece de Astra Pro le permiten diseñar la página Single Product de WooCommerce.
Pasos rápidos sobre cómo dar estilo a la página de producto único de WooCommerce utilizando el módulo WooCommerce
Paso 1: Asegúrese de que dispone del Tema Astre, Complemento Astra Pro y WooCommerce plugin instalado y activado. ¿Cómo instalar el complemento Astra Pro?
Segundo paso: Active el módulo WooCommerce desde las Opciones de Astra en la sección WordPress Dashboard > Apariencia > Opciones de Astra
Paso 3: Visita el personalizador [ Apariencia > Personalizar > WooCommerce > Producto único ] para editar la configuración del módulo
Disposición de los contenedores
Astra ofrece 4 tipos de diseños de contenedores. Estos contenedores se aplicarán a todas las páginas de productos de su sitio web de comercio electrónico. Sin embargo, puede establecer diferentes diseños de contenedores en función de sus necesidades. Si está interesado en saber más sobre cómo puede crear un sitio web WooCommerce de un solo producto consulte nuestra guía detallada.
Esta es la lista de diseños de contenedores disponibles.
- En caja
- Contenido en caja
- Ancho total / Contenido
- Ancho total / Estirado
Diseño de la barra lateral
En el diseño de la barra lateral, verá 4 opciones
- Por defecto
- Sin barra lateral
- Barra lateral izquierda
- Barra lateral derecha
Para que la barra lateral sea visible, deberá configurar el diseño a la derecha o a la izquierda, según sus necesidades.
Para desactivar la barra lateral, seleccione el diseño "Sin barra lateral".
Diseño de la galería
Puede configurar las imágenes de la galería de productos en las vistas vertical/ horizontal/ Primera imagen grande/ Deslizador vertical, Deslizador horizontal.
Además, puede activar la opción Efecto de zoom de la imagen en función de su elección. Al activar esta opción, la imagen del producto se ampliará al pasar el ratón por encima. Por el contrario, si la desactiva, se eliminará el efecto de zoom en las imágenes de sus productos. De esta manera, sus imágenes seguirán siendo las mismas cuando pase el ratón sobre ellas.
Anchura de la imagen
Puedes ajustar fácilmente la anchura de la imagen con el control deslizante.
Opciones de estructura del producto
Puede mostrar/ocultar las migas de pan/texto de envío en la página de un solo producto.
Activar el resumen de productos pegajosos
Esta opción le permite pegar el resumen del producto incluso si los usuarios se están desplazando hacia abajo para comprobar los detalles del producto o los productos relacionados.
Navegación por los productos
Tiene la opción de añadir un control de navegación de productos en la parte superior de la sección de resumen de productos. Esto le permitirá establecer diferentes diseños para las flechas de navegación del producto. Además, aquí puedes activar la opción de vista previa de navegación.
Variación de productos
Puede configurar el diseño de la variación de un solo producto para que se muestre en línea o apilado. Si desea obtener más información sobre añadir variaciones de producto y personalizar su pantalla, tenemos una guía útil que cubre todos los detalles.
Fichas de descripción del producto
Le permitirá mostrar/ocultar pestañas de descripción de productos. También puede establecer pestañas para mostrar vertical / horizontal / Acordeón / Distribuido.
Productos relacionados
Esto le permitirá mostrar/ocultar productos Relacionados y de Venta Adicional. Puede establecer una columna para mostrar estos productos. Además, puede elegir el número de productos relacionados que se mostrarán en la página.
Pegajoso Añadir a la cesta
Al activar esta opción, la página no se actualizará cuando se añada un producto al carrito.
Documento matriz -
