Da clic en Diseño y selecciona Ancho completo o 100% Ancho completo porque es importante eliminar distracciones, si seleccionas uno con barras laterales cuando se visualice en móviles se mostrarán antes o después del producto según tú lo decidas.
En Resumen de producto único selecciona Mostrar navegación de producto para que junto al nombre del producto se muestren botones que permiten navegar entre productos de la misma categoría facilitando que el cliente encuentre el producto que busca.
Da clic en Navegación de producto.
En Redondez de los bordes puedes seleccionar 25 píxeles para que el botón se muestre redondo o dejarlo en 0 píxeles para que sea cuadrado. En Color de Fondo, Color y Color del borde selecciona los colores que representan la personalidad de tu tienda en línea. Los que tienen dos colores el segundo es cuando pasas el mouse por encima.
Da clic en el ícono < en la esquina superior izquierda del menú vertical para regresar al menú Producto único.
En Etiqueta del título H2 es adecuado pero si aplicarás un estilo personalizado a los títulos (css) o tienes motivos para pensar que necesitas otra etiqueta para ayudar a tu posicionamiento en buscadores (SEO) cámbiala.
En Ancho del resumen 44 % es adecuado pero si necesitas modificarlo hazlo considerando que afectará la posición dependiendo de la pantalla del dispositivo y largo del resumen.
Da clic en Contenido del resumen de producto.
Puedes cambiar el orden y deshabilitar los elementos que se incluyen en el resumen de producto, sólo da clic y mantén el mouse en el ícono del lado derecho para mover o da clic en el ícono del lado izquierdo para deshabilitar.
Da clic en Colores y Tipografía del resumen de producto.
En Título de producto y el Precio de producto cambia Tipografía, Peso, Tamaño, Altura de línea, Espacio entre letras y Decoración de texto del botón si consideras que esta sección debe ser diferente al diseño general de tu tienda en línea.
En Color del título, Color del precio, Color de precio anterior, Color de descripción, Color del borde de cantidad, Color de borde de cantidad enfocado, Color de cantidad, Color de cantidad más/menos, Color de cantidad más/menos Hover, Etiqueta: Color del título y Etiqueta: Color del vínculo selecciona los colores que representan la personalidad de tu tienda en línea. Los que tienen dos colores el segundo es cuando pasas el mouse por encima.
Da clic en el ícono < en la esquina superior izquierda del menú vertical para regresar al menú Producto único.
En Imagen de producto único en Ancho de imagen 52 % es adecuado pero puedes modificarlo y no te preocupes porque la imagen mantendrá la proporción pero considera que afectará la posición de otros elementos dependiendo de la pantalla del dispositivo.
En Disposición de las miniaturas Horizontal es lo adecuado para presentar las imágenes miniatura pero puedes probar Vertical si consideras que representa mejor tu tienda en línea y como quieres mostrar los productos.
En Agregar a carrito producto único selecciona Activar añadir al carrito con ajax para que el ícono del carrito actualice el número de productos al dar clic en el botón Añadir al carrito.
En Estilo del botón de añadir al carrito selecciona Normal que es lo adecuado, si quieres puedes cambiar el tamaño a Grande o Muy grande pero considera que afectará la posición de otros elementos dependiendo de la pantalla del dispositivo.
Da clic en Estilo de añadir al carrito, Tipografía y Color.
Para personalizar el botón Añadir al carrito en Estilo de borde selecciona entre Ninguno, Sólido, Doble, Línea discontinua y Punteado el que consideras representa la personalidad de tu tienda en línea.
En Ancho del borde selecciona el ancho en píxeles y en Redondez de los bordes puedes modificar la forma del botón, por ejemplo agrega 25 píxeles y mira el resultado 🙂
En Añadir al carrito producto cambia la Tipografía, Peso, Tamaño, Altura de línea, Espacio entre letras y Decoración de texto del botón si consideras que esta sección debe ser diferente al diseño general de tu tienda en línea.
En Color de Fondo, Color y Color del borde selecciona los colores del botón que representan la personalidad de tu tienda en línea. Los que tienen dos colores el segundo es cuando pasas el mouse por encima.
Da clic en el ícono < en la esquina superior izquierda del menú vertical para regresar al menú Producto único.
Da clic en Producto individual condicional.
No selecciones Mostrar el precio y Añadir a carrito porque sólo se mostrará a usuarios conectados salvo que en tu embudo de compra el cliente debe crear cuenta e ingresar a tu tienda en línea con usuario para poder comprar, por ejemplo para una tienda mayorista.
Pero si seleccionaste Mostrar el precio y Añadir a carrito en Mostrar el mensaje a los usuarios desconectados selecciona Sí.
En Mensaje de reemplazo del precio cambia el mensaje por uno que refleje la personalidad de tu tienda en línea pero tiene que ser corto porque se muestra en el espacio del precio y botón Añadir a carrito.
Si seleccionaste Mostrar el precio y Añadir a carrito selecciona Enlace a página de mi cuenta para agregar el enlace a cada producto e incentivar la creación de cuenta si es parte de tu estrategia de embudo de compra.
En Mensaje de producto modifica la Tipografía, Peso, Tamaño, Altura de línea, Espacio entre letras y Decoración de texto si consideras que esta sección debe ser diferente al diseño general de tu tienda en línea.
En Color del mensaje condicional selecciona los colores del botón que representan la personalidad de tu tienda en línea. Los que tienen dos colores el segundo es cuando pasas el mouse por encima.
Da clic en el ícono < en la esquina superior izquierda del menú vertical para regresar al menú Producto único.
En Opciones adicionales de producto único da clic en Pestañas.
En Disposición de las pestañas: Descripción, Información adicional y Valoraciones selecciona la forma de presentarlas entre Horizontal, Vertical o Sección.
En Posición de las pestañas selecciona entre Izquierda, Centro y Derecha para que se acomoden mejor en el diseño de tu tienda en línea.
En Color de Bordes, Color del Texto, Color del texto activo, Color del borde del texto activo, Color del título y Color de la descripción selecciona los colores del botón que representan la personalidad de tu tienda en línea. Los que tienen dos colores el segundo es cuando pasas el mouse por encima.
Da clic en el ícono < en la esquina superior izquierda del menú vertical para regresar al menú Producto único.
Da clic en Venta dirigida y Productos relacionados.
En Conteo de venta dirigida selecciona cuantos productos quieres mostrar de venta dirigida considerando la variedad de productos de tu tienda en línea. En Columna de venta dirigida selecciona el número de columnas en las que quieres dividir los productos que presentarás.
En Ítems relacionados en Mostrar elementos relacionados selecciona Sí para mostrar los productos que el algoritmo de WooCommerce considera están relacionados con base en categoría y etiquetas de los productos pero… si prefieres decidir cuáles mostrar selecciona No considerando que si tienes un inventario amplio y profundo será un trabajo adicional que el algoritmo puede hacer por ti.
En Conteo de ítems relacionados selecciona cuantos productos relacionados quieres y en Columna de productos relacionados selecciona el número de columnas en las que quieres dividir los productos que presentarás.
Da clic en el ícono < en la esquina superior izquierda del menú vertical para regresar al menú Producto único.
Da clic en Barra flotante.
En Mostrar barra flotante selecciona Sí para que el botón de añadir al carrito o botón para seleccionar opciones se muestre mientras el cliente se desplaza para abajo y pueda continuar el proceso de compra. En Color de Fondo, Color del título, Color del precio, Fondo del botón, Color del botón, Fondo cantidad más/menos, Color cantidad más/menos, Añadir al carrito: Fondo y Añadir al carrito: Color selecciona los colores del botón que representan la personalidad de tu tienda en línea. Los que tienen dos colores el segundo es cuando pasas el mouse por encima.
Da clic en el ícono < en la esquina superior izquierda del menú vertical para regresar al menú Producto único.
Da clic en Publicar en la esquina superior derecha del menú vertical para guardar los cambios.
Da clic en el ícono < en la esquina superior izquierda del menú vertical para regresar al menú WooCommerce.