Cómo personalizar la galería de productos de WooCommerce
Publicado: 2022-01-25Personalizar una galería de productos en su tienda en línea puede ser una excelente manera de mejorar la experiencia del visitante, la visibilidad del producto y las tasas de conversión. Para ayudarte a hacer esto, te traemos nuestra guía sobre cómo personalizar la galería de productos en WooCommerce .
Pero antes de pasar al proceso de hacerlo, veamos brevemente por qué necesita personalizar la galería de productos en WooCommerce.
¿Por qué personalizar la galería de productos en WooCommerce?
Uno de los principales puntos de venta de un negocio en línea son las imágenes del producto. Y si añades y personalizas la galería de productos, realzas la apariencia de tu tienda online . Cuando actualiza la apariencia visual, atrae a más compradores potenciales .
De manera similar, un cliente también podría querer evaluar un producto desde varios ángulos. Es posible que deseen tener una perspectiva más clara antes de comprarlos, en lo que una galería de productos puede ser útil. Por lo tanto, personalizar la galería de productos también puede ayudar a mantener una mejor experiencia del cliente.
Entonces, si desea aumentar sus ingresos, le recomendamos que personalice su galería de productos de WooCommerce. Ahora que tiene una idea sobre su importancia, veamos cómo podemos personalizarlos para su sitio web de WooCommerce.
¿Cómo personalizar la galería de productos de WooCommerce?
Puede personalizar la galería de productos en WooCommerce usando 2 métodos :
- Desde el panel de control de WooCommerce
- Usar un complemento
Revisaremos cada paso en detalle en ambos métodos a continuación para que pueda elegir su forma preferida. Antes de eso, asegúrese de configurar WooCommerce correctamente e instale uno de los temas compatibles con WooCommerce.
1. Personaliza la galería de productos desde el panel de control de WooCommerce
WooCommerce es la plataforma más popular para crear una tienda en línea. Parte de la razón por la que WooCommerce es tan popular es por la infinita personalización , el control sobre el diseño y la gestión de tu tienda virtual.
Puede personalizar fácilmente el producto en la galería de productos desde el panel de control de WooCommerce. Pero primero, debe abrir la página de edición del producto donde desea personalizar la galería de productos.
Por lo tanto, vaya a Productos > Todos los productos desde su panel de administración de WordPress. Podrá ver la lista de todos los productos en su sitio web. Aquí, puede agregar nuevos productos o eliminar uno existente, importar o exportar los productos y también puede personalizar individualmente uno o varios productos a la vez.
Luego, haga clic en Editar para el producto en el que desea personalizar la galería de productos.
Se le redirigirá a la página de edición del producto del producto en particular. Ahora, puede comenzar a personalizar la galería de productos de WooComemrce. La galería de productos se puede agregar, reordenar o eliminar de este editor desde aquí.
1.1. Agregar una galería de productos en WooCommerce
Después de abrir la página de edición del producto, si se desplaza más, puede ver la sección Galería de productos en la barra lateral derecha. Haga clic en el enlace Agregar imágenes de la galería de productos para agregar una galería de productos.
Cuando haga clic en eso, será redirigido a un modal donde puede cargar nuevas imágenes o seleccionar las existentes de la biblioteca de medios.
Puede seleccionar uno o varios productos para agregar a la galería de productos. Simplemente seleccione las imágenes que desea agregar a la galería y haga clic en Agregar a la galería .
Una vez que haya terminado de agregar la galería de productos, continúe y actualice la página del producto.
Cuando actualice la página del producto, podrá ver su nueva galería de productos.
1.2. Reordenar productos en la galería
En algunos casos, es posible que desee cambiar el orden de los productos. Para hacerlo, abra la página de edición del producto desde su panel de WordPress una vez más. Luego, simplemente arrastre y suelte los productos en las posiciones donde desea que se muestre el producto.
Finalmente, haga clic en el botón Actualizar una vez que haya reordenado los productos.
1.3. Eliminar productos de la galería
También puede eliminar los productos de la galería con solo un clic del mouse. Simplemente navegue a las miniaturas de las imágenes en la página de edición del producto desde su tablero una vez más.
Tan pronto como navegue hasta la miniatura, verá un icono de cruz encima de la miniatura. Haga clic en el icono de eliminar imagen para eliminar cualquier producto de la galería de productos.
Sin embargo, si desea eliminar toda la galería de productos, deberá eliminar todos los productos de la galería uno por uno.
¡Eso es! Estas son todas las personalizaciones básicas que puede implementar para su sitio web utilizando el panel de control predeterminado de WooCommerce.
2. Personalice la galería de productos de WooCommerce usando el complemento
Ahora sabemos que es realmente fácil agregar, eliminar y reordenar los productos en la galería de productos. Pero estas son solo algunas personalizaciones básicas que ofrece WooCommerce. Tienen opciones de personalización muy limitadas y es posible que no siempre sean suficientes para su sitio web.
Sin embargo, si desea personalizaciones adicionales para la galería de productos, podemos usar algunos complementos de filtro de productos increíbles.
Aquí hemos enumerado algunos complementos para personalizar la galería de productos en WooCommerce. Cada uno de ellos tiene una característica y funcionalidad única.
Deslizador de galería de productos para WooCommerce
Product Gallery Slider para WooCommerce es el mejor complemento freemium. Como su nombre lo indica, este complemento le permite agregar un carrusel en la sección de galería de WooCommerce. Ofrece más de 10 opciones de personalización y este complemento funciona con la mayoría de los temas de WordPress.
Además, este complemento es compatible con el generador de páginas Elementor y Visual Composer, lo que le brinda un control total sobre el diseño de su sitio WooCommerce. También puede obtener un módulo de caja de luz que le permite agregar efectos de diapositivas, ampliar imágenes y mostrar miniaturas para atraer clientes.
Características clave
- 3 diseños de galería diferentes están disponibles
- Soporta video en la galería de productos.
- Soporta lenguaje RTL
- Código corto listo
Precio
Product Gallery Slider for WooCommerce es un complemento gratuito que le costará 39 USD por año.
Galería de videos de productos de WooCommerce
Con la ayuda de la Galería de videos de productos de WooCommerce , puede incrustar videos en la galería de productos junto con imágenes. Admite videos de Youtube y Vimeo, así como videos con formatos MP4, WebM y Ogg. Tiene una excelente interfaz fácil de usar para incrustar el video en el sitio de WooCommerce.
Pero el problema es que solo puede usar un video por galería de productos. Además, también puede permitir que el video se reproduzca en modo de repetición, lo que crea un bucle de video.
Características clave
- Diseño de deslizador vertical y horizontal
- Adaptar la altura en función de las imágenes
- Código corto listo
- Compatible con el constructor Elementor y Divi
Precio
WooCommerce Product Video Gallery es una herramienta gratuita. Tiene una versión gratuita con funciones básicas y 3 planes premium que comienzan en 25 USD por año.
Ahora que hemos enumerado un par de opciones, sigamos adelante e instalemos una de ellas para personalizar la galería de productos en WooCommerce.
Para esta demostración, usaremos Product Gallery Slider para WooCommerce desarrollado por Codeixer. Este es un complemento freemium que garantiza la exhibición de sus productos con un estilo hermoso.
2.1. Instalar el complemento
Para instalar el complemento, vaya al Panel de administración de WP y navegue a Complementos> Agregar nuevo.
Busque las palabras clave del complemento Product Slider for WooCommerce Luego, haga clic en el botón Instalar ahora para instalar el complemento. Finalmente, actívelo después de que se complete la instalación.
Si desea utilizar un complemento premium, deberá cargar el archivo zip e instalarlo en su sitio web. Puede encontrar más información al respecto en nuestra guía para instalar un complemento de WordPress manualmente.
2.2. Personaliza la galería de productos
Después de activar el complemento, puede comenzar a usarlo para personalizar la galería de productos. Simplemente vaya a Codeixer> Opciones de galería desde su panel de WordPress.
Debería poder ver dos configuraciones aquí, Opciones generales y Opciones de Lightbox .
Si bien todas las opciones no están disponibles en la versión gratuita del complemento, le brinda suficiente para personalizar todo según sus necesidades.
2.2.1. Opciones generales
Las opciones generales incluyen todas las personalizaciones básicas que puede realizar en la galería de productos.
Agregar un control deslizante de carrusel
En las Opciones generales, podrá ver la reproducción automática del control deslizante . Seleccione Sí en el menú desplegable para agregar automáticamente un control deslizante de carrusel sin ajustes adicionales.
Zoom de la foto del producto
Tener una función de zoom en su producto le permite a su cliente ver una vista detallada de sus productos y también brinda una mejor presentación visual .
Para habilitar la función de zoom para sus productos en la galería de productos, simplemente seleccione Sí en el menú desplegable de la opción Zoom de imagen .
Botón y flechas deslizantes
También puede personalizar las flechas del control deslizante y el botón cambiando el color para que coincida con su sitio web de WooCommerce.
Para ello, encontrarás Icon Color dentro de la opción General. Elija cualquier color de su elección del selector de color.
Una vez que haya seleccionado un color, asegúrese de guardar los cambios .
Además de estos, también puede configurar lo siguiente en la configuración general:
- Habilitar/deshabilitar icono de navegación
- Número de miniaturas que se mostrarán
- Deslice infinitamente el producto
- Mover la imagen al arrastrar el mouse
2.2.2. Opciones de caja de luz
En la pestaña de la caja de luz, hay dos configuraciones en la versión gratuita.
Puede elegir mostrar u ocultar los atributos de la imagen como un título en la configuración de la caja de luz. Del mismo modo, también puede establecer el color de fondo de la caja de luz para dar a sus productos un aspecto profesional.
Puede ver todos estos cambios en la galería de productos después de obtener una vista previa de la página del producto.
¡Buen trabajo! Así es como personalizas la galería de productos en WooCommerce.
Bonificación: agregue tamaños de imagen personalizados en WordPress
Agregar imágenes a las publicaciones y páginas de su blog es fácil con WordPress. Sin embargo, debe elegir el tamaño de imagen correcto para que el diseño general de su sitio web se vea bien.
Es muy importante comprender cómo funcionan los tamaños de imagen en los sitios web de WordPress y cómo agregar tamaños de imagen personalizados a su sitio. Si elige el tamaño incorrecto, sus imágenes pueden verse borrosas y si sus imágenes son demasiado grandes, pueden ralentizar su sitio web. Los tamaños de imagen incorrectos también pueden estropear el diseño de su página o publicación de blog y provocar un desplazamiento lateral innecesario.
Pero WordPress tiene una configuración integrada para varios tamaños de imagen. Ellos son:
Tamaño de la miniatura: 150 x 150 píxeles
Tamaño mediano: 300 x 300 píxeles
Tamaño más grande: 1024 x 1024 píxeles
Tamaño completo: el valor predeterminado es el tamaño original de la imagen cargada.
Cuando carga una imagen en WordPress, estos cuatro tamaños de imagen diferentes se crean de forma predeterminada.
La razón por la que WordPress crea estos tamaños de imagen es doble. En primer lugar, no tiene que cambiar el tamaño de las imágenes manualmente. En segundo lugar, garantiza que se seleccione el tamaño de imagen correcto para diferentes ubicaciones en su sitio.
Cómo cambiar el tamaño y editar imágenes en WordPress
Afortunadamente, WordPress también te permite cambiar el tamaño de las imágenes predeterminadas. Para hacerlo, simplemente vaya a Configuración > Medios .
Como puede ver en la captura de pantalla, todos los tamaños de imagen estándar se enumeran allí. Puede personalizarlos fácilmente ingresando sus medidas preferidas.
Una vez que haya ajustado los tamaños de imagen predeterminados de WordPress a sus dimensiones preferidas, haga clic en Guardar cambios . En el futuro, todas las imágenes que subas a tu web se ajustarán a las nuevas dimensiones.
¡Eso es todo! Ahora puede cambiar el tamaño de las imágenes en su sitio web de WordPress. Pero si desea obtener más información al respecto, consulte nuestra publicación completa sobre cómo agregar tamaños de imagen personalizados en WordPress.
Conclusión
Personalizar la galería de productos de WooCommerce es una de las mejores formas de captar la atención de los clientes y convertirlos en compradores potenciales. Por lo tanto, si necesita personalizar la galería de productos, debe hacerlo de inmediato para aumentar la conversión .
Para resumir, puede personalizar la galería de productos en WooCommerce de dos formas principales:
- Desde el panel de control de WooCommerce
- Usar un complemento
Puede usar un complemento si necesita una personalización avanzada para la galera del producto porque WooCommerce ofrece pocas y muy básicas opciones de personalización. Para algunas personas, esas funciones pueden ser suficientes si solo desea agregar o eliminar productos en la galería de productos.
No obstante, todo se reduce a su preferencia y necesidad, ya que ambos métodos se pueden usar para personalizar la galería de productos. Pero para nosotros, Product Slider for WooCommerce es mejor cuando se trata de personalizar galerías de productos usando un complemento, ya que tiene muchas funciones útiles incluso en la versión gratuita.
Esperamos que pueda personalizar la galería de productos de WooCommerce con facilidad. Si esta guía le resultó útil, aquí hay algunos artículos más que pueden ser de su interés:
- Cómo personalizar la página de productos de WooCommerce
- Los mejores complementos para personalizar la página de productos de WooCommerce
- Cómo personalizar la plantilla de página de producto de WooCommerce
¡Eso es todo por este artículo! Esperamos haberte ayudado a personalizar la galería de productos en WooCommerce. Si hubo algún problema, háganoslo saber en la sección de comentarios. Estaremos encantados de ayudarte.