El bloque Stock de productos muestra la disponibilidad de stock en tiempo real para cada producto WooCommerce en tus plantillas de producto único. Mostrar a los clientes exactamente cuántas unidades hay en stock crea urgencia y ayuda a los compradores a tomar decisiones de compra más rápidas.
Este bloque está diseñado exclusivamente para su uso en plantillas de producto único. Utiliza un código corto dinámico para extraer automáticamente el recuento de existencias de WooCommerce para cada producto, de modo que la información se mantiene precisa sin necesidad de actualizaciones manuales. También puedes combinar el código corto con texto personalizado, ajustar el tamaño y la alineación de la fuente, y dar estilo al resultado con tipografía, colores y efectos de sombra.
Añadir el bloque de stock de productos a tus páginas
Sigue estos pasos para añadir un bloque de stock de productos a tu plantilla de producto único de SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques > Etiquetas de plantilla de WooCommerce, arrastra y suelta el bloque Stock de productos en la sección deseada de tu plantilla de producto único.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque Stock del producto para abrir su configuración. En la pestaña Contenido, puedes editar el texto de visualización del stock, ajustar la alineación y establecer el tamaño de la fuente.
- Texto: El campo de contenido está prellenado con el
código corto, que obtiene dinámicamente el recuento de existencias de WooCommerce para cada producto. Puede añadir texto personalizado antes o después del código corto, por ejemplo, «¡Solo quedan en stock!», para crear un mensaje más atractivo. Alterne entre el Editor visual (texto enriquecido) y Editar HTML (código) modos utilizando el botón situado debajo del campo. - Alineación: Establezca la alineación horizontal del texto predeterminado: izquierda, centro o derecha. Admite la alineación por dispositivo para computadoras de escritorio, tabletas y dispositivos móviles.
- Tamaño de fuente: Establezca el tamaño de fuente del texto predeterminado utilizando el control deslizante (10-72 píxeles).
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar el aspecto del bloque y controlar su visibilidad en los distintos dispositivos.
Estilos:
- Tipografía: Establezca la familia de fuentes, el peso, la altura de línea, el espaciado entre letras y la transformación del texto para el texto predeterminado.
- Color: Establece el color del texto de la pantalla de existencias.
- Sombra de texto: añade un efecto de sombra directamente al texto original. Elige entre los tamaños preestablecidos (Ninguno, Muy fino, Pequeño, Mediano, Grande, Extragrande, 2X Extragrande) para añadir una profundidad sutil o dramática al texto.
- Sombra: añade una sombra de cuadro al elemento de bloque general para resaltarlo visualmente del fondo de la página.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque Stock de productos (superior, derecho, inferior, izquierdo). Esto determina cuánto espacio aparece entre la visualización del stock y los elementos circundantes en la página.
- Relleno: Ajusta el espacio interior dentro del bloque Stock de productos (Arriba, Derecha, Abajo, Izquierda). Esto crea un espacio entre el texto del stock y los bordes del bloque.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para tu bloque de stock de productos. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor (por ejemplo, datos-de-stock|disponible).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque de existencias del producto en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque de stock de productos en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque Stock del producto en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elija entre varios efectos de animación que se reproducen cuando el bloque Stock del producto aparece en pantalla. Las opciones incluyen Rebotar, Fundido de entrada, Acercar, Girar y muchas más.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Stock de productos y de personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de stock de productos a tu plantilla de producto único! El bloque muestra automáticamente el recuento de stock en tiempo real de WooCommerce para cada producto, lo que mantiene informados a los compradores sin que tengas que hacer nada manualmente. Experimenta con el texto circundante personalizado, el tamaño de la fuente y el color para crear un mensaje de disponibilidad de stock que genere urgencia y anime a los clientes a comprar antes de que se agote el stock.