Guía práctica de Astra Pro: Consejos de configuración para optimizar las páginas de tienda y pago de WooCommerce

Al crear un sitio web de comercio electrónico, el diseño de la presentación de los productos y de las páginas de pago afecta directamente a la intención de compra. Con la ayuda de Astra Pro Plug-ins para una personalización flexible WooCommerce La estructura y los detalles visuales de la tienda optimizan la experiencia del usuario, mejorando la estética de la página y la fluidez de la compra, lo que impulsa una mayor intención de compra.

Este artículo le mostraráPágina de listado de productosresponder cantandopágina de pagoLas principales opciones de configuración en esta sección y explica exactamente lo que hace cada característica, para los webmasters que quieren crear una interfaz de comercio electrónico profesional.

Prepararse para la salida

Por favor, complete la instalación del plug-in antes de utilizar las siguientes funciones:

Instalación de Astra Themes
Activación del complemento Astra Pro
Instalar y habilitar WooCommerce plug-in (componente de software)

Una vez que el plugin esté listo, vaya a WordPress En el backend, activa el módulo WooCommerce en el módulo Astra.

Instrucciones de configuración de la página de listado de productos

Visualización de la información de la página

La página de listado de productos permite activar u ocultar los siguientes elementos de información:

Título de la página: controla si se muestra el título en la parte superior de la página.
Navegación de migas de pan: muestra dónde se encuentra la página actual en la jerarquía del sitio, facilitando el regreso al nivel superior.
Barra de herramientas: La parte superior de la página muestra la cantidad actual de productos y un menú desplegable de clasificación, que incluyecarácterypuntuación (del trabajo del alumno)ynuevo productoypreciosy otros métodos de clasificación

Estructura del contenido de la tarjeta

Cada unidad de producto admite la flexibilidad de combinar los siguientes módulos de contenido:

Nombre de la clasificación: Indica la clasificación a la que pertenece el producto
Título del producto: Muestra el nombre del producto establecido
Valoraciones: mostrar valoraciones con estrellas de otros compradores
Información sobre el precio: si se establece un precio promocional, el precio original se mostrará tachado y el nuevo precio aparecerá resaltado y en negrita.
Descripción breve: Presente los argumentos de venta del producto en un lenguaje sencillo.
Botón Añadir a la cesta: Permite añadir artículos directamente a la cesta.carroacceso directo

Configuración del estilo de visualización del producto

Para añadir atractivo visual a las tarjetas de mercancías, elAstra Pro Están disponibles las siguientes opciones de estilo:

Alineación del contenido: compatibilidad con alineaciones a la izquierda, al centro y a la derecha.

Efecto hover de imagen: puede añadir zoom in, fade in y otros efectos de animación, para que la página tenga una sensación más interactiva.

Sombra de caja: añada sombras tridimensionales a la tarjeta para mejorar la jerarquía visual.

Configuración del botón: Puede ajustar el margen interior del botón Añadir a la cesta o personalizarlo. CSS Ajustar los estilos de color

Instrucciones de configuración de la página de pago

Astra Pro WooCommerce El módulo también permite optimizar el diseño y el contenido de los formularios de la página de pago, lo que ayuda a los compradores a realizar sus pedidos con mayor facilidad.

Funciones de configuración disponibles

Proceso de pago paso a paso: presentación en dos fases de la información de facturación y de pago

Casilla de introducción de notas de pedido: para que los clientes rellenen los requisitos de entrega u otra información.

Campos de entrada de cupones: Controla si las áreas de entrada de cupones se muestran en la página de pago.

Modo de pago limpio: elimine las zonas de cabecera y pie de página para reducir las distracciones.

Etiquetas como marcadores de posición: las etiquetas de los campos se muestran dentro del cuadro de entrada para ahorrar espacio vertical.
Conservación de los datos del formulario: aunque se actualice la página, se conservan los datos rellenados anteriormente.

resúmenes

hacer uso de Astra Pro adelante WooCommerce El ajuste del diseño de la página puede hacer que la tienda esté más unificada en su conjunto, que la información de la página sea más clara y que el proceso de compra sea más natural. No hay operación de código complejo, sólo una simple garrapata y ajustar, se puede construir rápidamente una estética visual y la funcionalidad de la pantalla del producto y el proceso de pago.

Si necesita seguir mejorando el rendimiento de la página, se recomienda ajustar aún más el color, la tipografía, las fuentes y otros detalles junto con el posicionamiento de la tienda, para que el sitio de comercio electrónico consiga tanto estilo como practicidad.