Método completo para añadir WooCommerce Mini Cart a Astra Pro

El icono del carrito de la compra desempeña una doble función: muestra visualmente el estado de los productos añadidos y guía eficazmente a los usuarios a través del proceso de compra.Astra Pro El plugin amplía el módulo WooCommerce que permite añadir minicarros en distintas zonas (Minicarro), que se pueden incrustar de forma flexible en cualquier posición de la página mediante códigos cortos para lograr requisitos de diseño personalizados. El siguiente contenido le mostrará cómo configurar el mini carrito de la compra en Astra, incluyendoantigua cabeceraynuevo constructoryllamada con código cortoy ajustes de estilo comunes.

Las versiones antiguas de Astra añaden el icono del carrito de la compra a la cabecera

Cuando el sitio utiliza la antigua estructura de cabecera Astra, el icono del carrito de la compra puede añadirse al final del menú principal. La forma de hacerlo es la siguiente:

• active WooCommerce Complementos;
• Vaya al backend y haga clic enestado exterior > Personalizar > Encabezado > Menú principal;
• Busque el elemento "Último elemento en el menú" en la configuración del menú y seleccione WooCommerce;

Una vez completada la configuración, aparece el icono de la cesta de la compra en el extremo derecho del menú principal, que muestra el número de productos y permite saltar a la página de la cesta de la compra.

El nuevo creador de cabeceras añade el icono del carrito de la compra

La nueva versión de Astra proporciona la función Header & Footer Builder que permite colocar los iconos del carrito de la compra en la zona del menú principal, en la cabecera superior o en la cabecera inferior. El modo de uso es el siguiente:

• empezar a utilizar Astra Pro Complementos;
• Active el módulo Secciones de cabecera en el panel de control de Astra;
• Ir a Apariencia > Personalizar > Cabecera > Cabecera superior.;
• Seleccione WooCommerce en la Sección 1 o Sección 2;

Una vez añadido, el icono de la cesta de la compra se mostrará en el área designada, y contenidos como el estilo del icono, el título y la cantidad se pueden configurar de forma independiente.

Insertar icono de carrito de la compra usando shortcode

Si necesita mostrar el icono del carrito en algún lugar de la página, como en el contenido del artículo, el pie de página o la barra lateral, puede utilizar la función Astra Pro La función de código corto proporcionada.

El código corto base es:[astra_woo_mini_cart]

El shortcode permite configurar la dirección del cuadro emergente, por ejemplo:

[astra_woo_mini_cart direction="arriba a la izquierda"]

[astra_woo_mini_cart direction="abajo a la derecha"]

[astra_woo_mini_cart direction="arriba a la derecha"]

Si desea insertar un carro de la compra deslizante en la página, utilice:[astra_woo_slide_in_cart]

El código corto anterior puede colocarse en el Gutenberg Bloque,Elementor Página, área de widgets de la barra lateral o cualquier lugar que admita shortcodes.

Antes de utilizar el shortcode, debe activar la función Astra Pro y abra el módulo WooCommerce en Opciones de Astra.

Producto Cantidad Ajuste de color

Es posible que el número de artículos situado junto al icono de la cesta de la compra no se muestre debido a un problema de coincidencia de colores. Una razón común para ello es que el color del número es demasiado parecido al color de fondo, lo que provoca confusión visual.

El tratamiento es el siguiente:

• Vaya a Apariencia > Personalizar > Constructor de cabecera > Carrito > Diseño.;
• Busque la opción "Contar color";
• Ajusta el color a un color de mayor contraste;
• Guarda los cambios;

Esta función está disponible desde Astra Pro Compatible desde la versión 3.5.9 del plugin, con la posibilidad de personalizar los colores de los números para evitar anomalías de visualización.

resúmenes

Astra Pro (utilizado como expresión nominal) WooCommerce Mini Cart es muy flexible y permite añadir iconos a la estructura de cabecera o incrustarlos en cualquier zona de la página mediante códigos cortos. Combinado con el estilo de los iconos y la configuración del color, puede satisfacer las necesidades de diferentes tipos de sitios para la disposición del proceso de compra. El uso adecuado de estas funciones puede ayudar a mejorar el efecto general de la página y la facilidad de manejo.