El bloque de Stock de Producto muestra la disponibilidad de stock en tiempo real para cada producto de WooCommerce en tus Plantillas de Producto Único. Mostrar a los clientes cuántas unidades quedan 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 shortcode dinámico para extraer automáticamente el recuento de stock de WooCommerce para cada producto, por lo que la información se mantiene precisa sin actualizaciones manuales. También puedes combinar el shortcode con texto personalizado, ajustar el tamaño de fuente y la alineación, y dar estilo a la salida con tipografía, colores y efectos de sombra.
Añadir el bloque de Stock de Producto a tus páginas
Sigue estos pasos para añadir un bloque de Stock de Producto 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 Producto 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 de Stock de 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 fuente.
- Texto: El campo de contenido está pre-rellenado con el shortcode
, que obtiene dinámicamente el recuento de stock de WooCommerce para cada producto. Puedes añadir texto personalizado antes o después del shortcode — por ejemplo, “¡Solo quedan en stock!” — para crear un mensaje más convincente. Cambia entre el Editor Visual (texto enriquecido) y los modos Editar HTML (código) usando el botón debajo del campo. - Alineación: Establece la alineación horizontal del texto de stock: Izquierda, Centro o Derecha. Admite alineación por dispositivo para escritorio, tableta y móvil.
- Tamaño de fuente: Establece el tamaño de fuente del texto de stock usando el deslizador (10–72px).
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes dar estilo a la apariencia del bloque y controlar su visibilidad en diferentes dispositivos.
Estilos:
- Tipografía: Establece la familia de fuentes, el grosor, la altura de línea, el espaciado entre letras y la transformación del texto para el texto de stock.
- Color: Establece el color del texto de la visualización de stock.
- Sombra de texto: Añade un efecto de sombra directamente al texto de stock. Elige entre tamaños preestablecidos (Ninguno, Delgado, Pequeño, Mediano, Grande, X Grande, 2X Grande) para añadir profundidad sutil o dramática al texto.
- Sombra: Añade una sombra de caja al elemento de bloque general para levantarlo visualmente del fondo de la página.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de Stock de Producto (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre la visualización de stock y los elementos circundantes en la página.
- Relleno: Ajusta el espaciado interior de tu bloque de Stock de Producto (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el texto de stock y los bordes del bloque.
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para tu bloque de Stock de Producto. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos Personalizados: Añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea usando el formato: nombre-atributo|valor (ej. data-stock|available).
Visibilidad del Dispositivo:
- Ocultar en Escritorio: Oculta el bloque de Stock de Producto en pantallas de escritorio.
- Ocultar en Tableta: Oculta el bloque de Stock de Producto en dispositivos tableta.
- Ocultar en Móvil: Oculta el bloque de Stock de Producto en dispositivos móviles.
Efectos de Animación:
- Animación de Entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque de Stock de Producto entra en la vista. Las opciones incluyen Bounce, Fade In, Zoom In, Rotate In y muchas más.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Stock de Producto y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Stock de Producto a tu Plantilla de Producto Único! El bloque muestra automáticamente el recuento de stock en vivo de WooCommerce para cada producto, manteniendo a los compradores informados sin ningún esfuerzo manual por tu parte. Experimenta con texto circundante personalizado, tamaño de fuente y 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.