En este documento utilizaremos el Complemento WooCommerece from Astra Pro to allow you to design a Single Product page of 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, Astra Pro Addon, 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 offers 4 types of Container Layouts. These container layouts will be applied to your website’s overall e-commerce single product pages. But you can set different container layouts depending on your requirements. If you are interested more in learning about how you can 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
Under the sidebar layout, you will notice 4 options
- Por defecto
- Sin barra lateral
- Barra lateral izquierda
- Barra lateral derecha
To make your sidebar visible, you will need to set the layout to either Right or Left, depending on your requirements.
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.
Also, you can enable the Image Zoom effect option depending on your choice. Enabling this option will zoom the product image on hover. Contrary, if you disable it, the zoom effect will be removed from your product images. This way, your images will remain the same when you hover over them.
Enable Sticky Product Image
This option allows you to keep the featured image visible on your WooCommerce product pages as users scroll down.
The “Sticky Image Top Offset” allows you to adjust the top offset of the sticky product image that will appear once the user scrolls down.
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
You have the option to add a product navigation control at the top of the product summary section. This will allow you to set different designs for product navigation arrows. Also, you can enable the navigation preview option here.
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.
Related & Upsell Products
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.
That’s it with this guide! We hope it helps. For any doubt, contact us by leaving a comment below.
Getting Started with WooCommerce:
