Cómo personalizar las páginas de productos de WooCommerce

Sus productos son únicos: las páginas de productos que los muestran también deberían serlo. La plantilla de página de producto predeterminada de WooCommerce es ideal para muchas tiendas en línea, pero es posible que desee algo que refleje el estilo y los beneficios individuales de sus productos.

No tienes que ser un desarrollador para poner tu propio sello en las páginas de productos gracias a algunas extensiones de WooCommerce (y una función principal de WooCommerce).

Complementos de productos

La extensión Complementos de productos agrega más campos a las páginas de sus productos para que los compradores puedan personalizar sus compras. Diseñe opciones usando cuadros de texto, casillas de verificación o menús desplegables y agregue variaciones con imágenes de muestra; inclúyalas para productos individuales o para todo su catálogo.

Perfecto para: tiendas de comercio electrónico que ofrecen opciones adicionales como envoltura de regalos y monogramas.

• Si tiene una tienda de ropa que ofrece bordados, permita que los clientes escriban el texto que desean bordar antes de pagar para que no tenga que comunicarse después de la compra.
• Si vende almohadas decorativas, ofrezca opciones de tela, tamaño o estilo.
• Si vende joyas, deje que los clientes elijan la cita que les gustaría grabar en la pieza.
• Si ofrece productos para regalar, incluya opciones para envolver regalos o una nota de agradecimiento.
• Si vende productos electrónicos, permita que los compradores adquieran una garantía que proteja su artículo.
• Si es una organización sin fines de lucro, permita que las personas que lo apoyan incluyan una donación con la compra de su mercancía.

Elija cobrar por cada complemento u ofrecer personalizaciones de forma gratuita. Es una manera flexible de dar a los compradores las opciones que necesitan.

Obtenga más información sobre los complementos de productos.

Muestras de variación y fotos

Si su producto tiene variaciones de color o patrón, los compradores quieren verlos en acción. La extensión Variation Swatchs and Photos muestra variaciones (estilos, tamaños, patrones, colores, etc.) con una imagen o muestra de color para dar a los clientes una mejor idea de lo que están comprando exactamente y mejorar el diseño de las páginas de sus productos.

Perfecto para: tiendas de comercio electrónico con productos variables.

• Si vende camisetas, muestre las opciones de color.
• Si vende anteojos, muestre todas sus opciones de marcos.
• Si vende joyas, destaque los colgantes entre los que los clientes pueden elegir.
• Si vende patinetas, incluya imágenes de los patrones que ofrece.

Obtenga más información sobre Muestras de variación y Fotos y véalo en acción.

Imagen WooCommerce 360

Con WooCommerce 360 ​​Image, puede agregar una rotación de imagen dinámica y personalizada de 360 ​​a las páginas de productos para que los compradores puedan concentrarse en los detalles del producto. Agregue un grupo de imágenes a la galería de un producto y la imagen destacada se reemplazará con una hermosa imagen de 360° que los clientes pueden rotar para ver todos los aspectos del producto. También es completamente receptivo, por lo que los compradores en dispositivos móviles tienen la misma excelente experiencia.

Perfecto para: tiendas de comercio electrónico que desean brindarles a los clientes una experiencia como sostener físicamente un producto.

• Si vende muebles, los clientes pueden entender su estilo desde todos los ángulos.
• Si vende repuestos para automóviles, los clientes pueden examinar de cerca los detalles que les importan.
• Si vende relojes, los clientes pueden acercarse a cada matiz, grabado y característica.

Obtenga más información sobre la imagen de WooCommerce 360.

Vídeo del producto para WooCommerce

Los videos son una forma poderosa de mostrar sus productos en acción. Use la extensión Product Video for WooCommerce para agregar videos a la galería de imágenes de su producto o para reemplazar las imágenes destacadas con videos. Cargue los videos a su biblioteca de medios de WordPress o insértelos desde servicios de terceros como Vimeo o YouTube.

Perfecto para: tiendas de comercio electrónico con productos que se muestran mejor en acción

• Si vende herramientas eléctricas, demuestre el tamaño de la herramienta y cómo funciona.
• Si vende ropa, muestre cómo un artículo se adapta a una variedad de tipos de cuerpo y se combina con otras piezas.
• Si vende juguetes, incluya clips de niños jugando con sus productos y testimonios de padres felices.

Obtenga más información sobre el video del producto para WooCommerce.

Tabla de tallas para WooCommerce

Si vende productos que vienen en varios tamaños, un gráfico ayuda a los clientes a saber cuál comprar y reduce la cantidad de devoluciones. La extensión Tabla de tallas para WooCommerce agrega tablas de tallas a las páginas de productos: cargue la suya propia o cree una en su tablero. Puede optar por mostrar gráficos en los detalles del producto o como una ventana emergente.

Perfecto para: tiendas de comercio electrónico que venden productos en varios tamaños

Ejemplos:

• Si vende camisetas, agregue una tabla de tallas con las medidas de hombros, pecho y altura.
• Si vende muebles, agregue una tabla de tallas con medidas de longitud, altura y profundidad.
• Si vende calcomanías, agregue una tabla de tallas con las medidas de alto y ancho.

Obtenga más información sobre la Tabla de tallas para WooCommerce.

Recomendaciones de productos

Las ventas adicionales y cruzadas son formas efectivas de aumentar el tamaño de los carritos de los clientes y sus ventas generales. Use Recomendaciones de productos para mostrar a los clientes más de lo que les interesa. Agregue productos recomendados en función de lo que es popular, lo que es nuevo, lo que está en oferta, lo que completa un look y más. O muéstrelos en función de lo que ya está en el carrito de su cliente.

Perfecto para: tiendas de comercio electrónico con más de un producto

• Si vende zapatos, recomiende calcetines o cordones.
• Si vendes aretes, recomienda pulseras y collares de la misma colección.
• Si vende juguetes, recomiende rompecabezas similares al que tiene un cliente en su carrito.
• Si vende plantas, recomiende otras variedades populares o complementos de suelo.

Obtenga más información sobre las recomendaciones de productos.

Cambios simples de CSS, no se requiere extensión

CSS es un lenguaje de codificación que controla el diseño de su sitio web, desde fuentes y colores hasta tamaños de botones y fondos. Si tiene algunos conocimientos básicos de CSS, vaya a Apariencia → Personalizar → CSS adicional en su tablero y realice los siguientes cambios:

Cambiar el tamaño de fuente de los títulos de productos

Use el código a continuación para cambiar el tamaño de los títulos de sus productos a 36px. Reemplace el "36" con el número que desee.

 .woocommerce div.product .product_title { font-size: 36px; }

Cambiar el color de los títulos de los productos

Un código hexadecimal es un código de seis dígitos que representa un color específico en línea. Utilice el siguiente código para cambiar el color del título de su producto al código hexadecimal #FF5733. Reemplace el código hexadecimal con cualquier cosa que desee; puede usar el selector de color HTML para obtener el código de cualquier color que desee.

 .woocommerce div.product .product_title { color: #FF5733; }

Poner las etiquetas de variación en negrita

Utilice el siguiente código para mostrar los títulos de sus variantes en negrita.

 .woocommerce div.product form.cart .variations label { font-weight: bold; }

Poner en cursiva las etiquetas de variación

Utilice el siguiente código para poner en cursiva las etiquetas de variación.

 .woocommerce div.product form.cart .variations label { font-style: italic; }

Cambia los colores del botón Comprar ahora:

Use este código para cambiar el color de fondo de su botón Comprar ahora. Nuevamente, use el selector de color HTML para obtener el código hexadecimal del color que le gustaría usar.

 .woocommerce div.product .button { background: #000000; }

Comienza a personalizar las páginas de tus productos

WooCommerce tiene que ver con la flexibilidad y la personalización, por lo que proporciona todas las herramientas que necesita para editar el diseño y la funcionalidad de las páginas de productos. Al agregar campos, videos, tablas de tallas y más, sus páginas pueden ser tan únicas como los productos que presentan.

Consulte nuestra biblioteca de extensiones completa para obtener aún más opciones.