Cargando...

Cómo subir imágenes en páginas de productos WooCommerce 2024

Actualizado el 31 de mayo de 2024

A veces, su tienda WooCommerce puede necesitar algunas funciones expertas para sus clientes, como cargar imágenes en las páginas de productos. Si vende productos impresos , administra una tienda de regalos personalizados o administra un servicio de impresión de fotografías, es esencial que sus clientes puedan cargar una imagen (o cualquier otro tipo de archivo ) directamente en la página del producto antes de agregar el producto a su carrito. .

En esta guía completa, lo guiaremos a través de todos los pasos sobre cómo agregar cargas de imágenes en las páginas de productos de su tienda WooCommerce . También cubriremos algunos casos de uso más avanzados, como editar imágenes antes de cargarlas o forzar tamaños de archivo, proporciones, etc.

Para evitar confusiones, tenga en cuenta que esta guía de WooCommerce está escrita para permitir que sus clientes carguen imágenes en las páginas de productos, ¡no para editar y cargar imágenes a granel a través del administrador de WordPress!

Tabla de contenido

Guía de WooCommerce para cargar imágenes en páginas de productos: lo que cubriremos

Esta guía completa contiene todo lo que necesita saber sobre cómo agregar cargas de imágenes a sus páginas de productos de WooCommerce. Dado que esta es una publicación de blog bastante extensa, tomemos un momento para repasar lo que cubriremos. Use los enlaces rápidos a continuación para saltar de una sección a otra si no tiene ganas de leer la publicación completa.

Esto es lo que escribiremos:

  • Cubre lo básico
    • Cómo agregar un campo de imagen de carga de WooCommerce a las páginas de productos
    • Muestre un cargador moderno con características adicionales
    • Limite qué tipos de archivos se pueden cargar por seguridad
    • Establecer un tamaño de archivo máximo permitido por seguridad
    • Agregue otros campos de formulario a las cargas de imágenes
  • Ajustar el precio del producto final
    • Cobra extra por subir imágenes
    • Aumentar el precio del producto por archivo subido
  • Sube varias imágenes
    • Sube varias imágenes (más de una, en bloque)
    • Limite a un número exacto de imágenes requeridas
  • Funciones avanzadas de carga de imágenes de WooCommerce
    • Cómo permitir que los clientes editen imágenes antes de subirlas
    • Forzar el tamaño y el formato de carga de la imagen
    • Agregue una vista previa en vivo: muestre la imagen cargada en la(s) imagen(es) de la galería de su producto
  • En el lado del administrador
    • Administrar imágenes cargadas en el panel de administración de WordPress

Cargas de imágenes de WooCommerce: ¿qué estamos construyendo?

Antes de comenzar, tomemos un minuto para ver lo que estamos construyendo para asegurarnos de que todos estén en la misma página.

Crearemos un producto configurable en WooCommerce que permita a sus clientes cargar una o varias imágenes. Como propietario de una tienda, podrá ver y descargar esa imagen desde la pantalla de administración de pedidos de WooCommerce. Por lo general, el propietario de la tienda necesita el archivo para imprimirlo o incrustarlo en el producto que vende.

Para hacer las cosas un poco más interesantes, ¡el cliente podrá editar la imagen directamente en el navegador! Pueden recortar, cambiar el tamaño o rotar la imagen antes de cargarla. También verán una vista previa en vivo del producto terminado antes de agregarlo al carrito.

Como ejemplo, crearemos un producto de marco de fotos personalizado. Es el producto perfecto para explicar todos los conceptos y casos de uso avanzados que vienen con el uso de WooCommerce para cargar imágenes en las páginas de productos. El cliente puede elegir un diseño de marco y cargar su foto para acompañarlo.

Aquí hay un ejemplo de lo que estamos construyendo:
Ejemplo de un campo de carga de archivos en una página de producto de WooCommerce

Ver demostración en vivo

Lo guiaremos a través de todos los pasos (y más) en esta guía completa de WooCommerce para cargar imágenes en las páginas de productos. ¡Empecemos desde el principio!

Uso de un plugin para extender WooCommerce para cargar imágenes en páginas de productos

Desafortunadamente, WooCommerce no tiene ninguna función lista para usar para cargar imágenes en las páginas de productos. Está fuera de su enfoque porque permitir la carga de imágenes en los productos se considera un caso de nicho.

Afortunadamente, hay un plugin que se encarga de cargar archivos y adjuntarlos al carrito, pagar y ordenar. La solución más simple y poderosa para cargar imágenes es usar el plugin Campos de productos avanzados para WooCommerce .

Este plugin le permite agregar varios campos de formulario de entrada a las páginas de sus productos. ¡Desde campos de formulario simples hasta campos avanzados como carga de archivos, selectores de fechas y más! Además, el plugin tiene funciones poderosas para crear las páginas de productos más complejas. Puede mostrar u ocultar campos de entrada a través de la lógica condicional. También puede aumentar o disminuir el precio final del producto según lo que haya seleccionado su cliente.

En resumen, es el plugin perfecto para agregar campos de carga de imágenes a las páginas de productos.

 

 

Cómo agregar un campo de carga a un producto de WooCommerce

Agregar un campo de carga de imágenes a su producto WooCommerce suena avanzado, pero es bastante fácil. De hecho, solo se necesitan 2 pasos para completarse, por lo que se puede hacer en menos de 5 minutos. A continuación, describiremos estos pasos en detalle para que pueda comenzar a vender productos WooCommerce personalizables con campos de carga de imágenes.

Paso 1: instale Campos de productos avanzados para WooCommerce

Para comenzar, compre campos de productos avanzados para WooCommerce en la tienda de Studio Wombat:  studiowombat.com/advanced-product-fields-for-woocommerce

En su tablero de WordPress, vaya a Plugins → Agregar nuevo → Cargar plugin . Elija el archivo zip que descargó de su cuenta de Studio Wombat. Luego haga clic en Activar .

Ahora que tiene instalados Campos de productos avanzados, puede pasar a agregar un campo de carga de archivos a un producto en su tienda WooCommerce.

Paso 2: Cree su campo de carga de imágenes de WooCommerce

Vaya a Productos → Todos los productos y edite el producto al que desea agregar su carga de imagen. En la sección Datos del producto , haga clic en la pestaña Campos personalizados .
La pestaña Campos personalizados en el backend del producto WooCommerce
En esta sección, puede agregar todos los campos de entrada de formulario personalizados que deberían aparecer en la página de su producto WooCommerce. Haga clic en Agregar su primer campo . Aparece una nueva sección y aquí es donde puede definir todas las configuraciones para su campo de carga de archivos. Utilice la siguiente configuración:
Configuración del campo de carga de archivos en la pantalla de administración del producto WooCommerce

  • Establezca el Tipo en Carga de archivo. Esto generará un campo de entrada de carga de archivos en las páginas de productos de WooCommerce.
  • Agregar una etiqueta . Esto aparece encima del campo para informar a su usuario de qué se trata.
  • Puede optar por agregar Instrucciones para brindarles a sus clientes más contexto si es necesario.
  • Alterne la configuración Requerida . Esto asegura que se deba cargar una imagen antes de que el cliente pueda agregar el producto a su carrito.

Guarde su trabajo haciendo clic en Actualizar o Publicar en el cuadro Publicar de la pantalla.

Esto es todo lo que tiene que hacer para agregar cargas de imágenes de WooCommerce a las páginas de productos. Puede obtener una vista previa del resultado en su sitio:
Campo de entrada de archivo en el producto WooCommerce
Es funcional, pero parece un poco básico. Lo arreglaremos en las siguientes secciones.

Cómo usar un cargador moderno con la barra de progreso arrastrar/soltar

Como puede ver en la imagen de arriba, el campo de carga de archivos parece un poco básico. Esto se debe a que, de manera predeterminada, se usa el campo de entrada de archivo HTML estándar. Afortunadamente, el plugin Campos de productos avanzados (APF) tiene una forma de evitar esto.

Para habilitar la carga de archivos modernos en WordPress, vaya a WooCommerce → Configuración → Campos de productos y habilite el Cargador moderno .
Habilite el cargador de archivos moderno en la configuración de Campos de productos avanzados
Observe cómo esto cambia la apariencia de su campo de carga de archivos:
Ejemplo del campo de carga de archivos moderno en Campos de productos avanzados
El uso del campo de carga de archivos moderno para sus productos WooCommerce tiene algunas ventajas sobre el básico:

  • Mientras se cargan los archivos, verá una barra de progreso que indica cuánto del archivo se ha cargado. Esta es una mejor experiencia de uso porque puede ver que el proceso de carga se está llevando a cabo y puede deducir cuánto tiempo llevará. Esto es útil especialmente para archivos más grandes.
  • Puede arrastrar y soltar archivos fácilmente desde cualquier lugar de su computadora. No es necesario hacer clic y navegar (pero puede hacerlo si lo desea).
  • Elimine los archivos cargados haciendo clic en el icono X junto al nombre del archivo.
  • La experiencia del usuario para cargar varios archivos es mejor.

Cómo limitar qué tipos de archivos se pueden cargar

De forma predeterminada, el plugin Campos de productos avanzados permite a sus clientes cargar cualquier tipo de archivo que también permita WordPress . Dado que espera una imagen para su producto, debe limitar el tipo de archivo solo a imágenes. En otras palabras, debe aceptar solo jpg, jpeg, png, gif y tal vez pdf.

  • Edite el mismo producto anterior y vuelva a la pestaña Campos personalizados .
  • Busque el campo Carga de archivos y haga clic en él para volver al panel de configuración.
  • Busque la configuración Tipos de archivo aceptados e incluya solo los tipos de archivo permitidos.

Limite los tipos de archivos aceptados para el campo de carga de archivos en APF

Establezca el tamaño máximo de archivo para la carga de archivos de WooCommerce

Para evitar que sus clientes llenen el espacio en disco de su servidor con archivos grandes, puede limitar el tamaño de archivo máximo permitido con Campos de productos avanzados para WooCommerce. Sigue estos pasos:

  • Edite el mismo producto anterior y vuelva a la pestaña Campos personalizados .
  • Busque el campo Carga de archivos y haga clic en él para volver al panel de configuración.
  • Busque la configuración Tamaño máximo de archivo e ingrese un número.

El tamaño máximo de archivo se establece en megabytes. Asegúrese de establecerlo en un número realista. Por ejemplo, si espera imágenes para imprimir, no desea un archivo que sea demasiado pequeño (menos de 1 o 2 MB); de lo contrario, la calidad de impresión se verá afectada.

Use las cargas de imágenes de WooCommerce con otros campos de formulario

¿Recuerdas nuestro ejemplo de antes? Estamos vendiendo marcos de fotos personalizados. Además de permitir que los clientes carguen su foto, también queremos que elijan qué diseño de marco de imagen quieren. Para hacer eso, podemos agregar otro campo arriba del campo de carga de imágenes.

  • Edite el mismo producto anterior y vuelva a la pestaña Campos personalizados .
  • Haga clic en Agregar un campo . Esto abre el panel de configuración para un nuevo campo.
  • Establezca el Tipo en Muestras de imagen . Esto nos permite crear botones de imágenes en los que se puede hacer clic como opciones. Se ve más atractivo que la lista desplegable estándar.
  • Como Etiqueta , ingrese «Seleccione su marco».
  • Active la palanca Requerido .
  • en la sección Opciones , puede agregar tantas muestras de imágenes como desee. Cada imagen corresponde a una elección que tu visitante puede hacer. En nuestro ejemplo, agregamos 3 marcos: un marco clásico, un marco tribal y un marco elegante. Cada opción obtiene una etiqueta de opción . También puede aumentar el precio del producto cuando el cliente selecciona esta opción. A los efectos de esta demostración, dejamos esas configuraciones en blanco.
  • Busque la configuración Posición de la etiqueta y cámbiela a Como información sobre herramientas . De forma predeterminada, la etiqueta que ingresó para cada opción se muestra debajo de la imagen. Pero se ve un poco mejor como información sobre herramientas. La etiqueta solo es visible cuando el usuario pasa el cursor sobre la muestra de imagen.

Cuando haya terminado, su configuración debería verse así:
Configuración de backend para muestras de imágenes
En la página de su producto WooCommerce, se ve así:
Muestras de imagen para seleccionar marco de fotos

Cobra extra por subir imágenes (aumenta el precio del producto)

Puede ser que la carga de la imagen no sea un campo obligatorio de WooCommerce, pero si el usuario decide cargar una imagen, es posible que desee cobrar un cargo adicional. Los campos de productos avanzados para WooCommerce le permiten aumentar o disminuir el precio final del producto cuando se carga un archivo.

Siga estos pasos para habilitar un aumento de precio cuando se carga una imagen:

  • Encuentre su campo Carga de archivo anterior y haga clic en él para recuperar el panel de configuración.
  • Active la opción Ajustar precios .
  • Seleccione el Tipo de precio . Dado que solo queremos cobrar una tarifa adicional cuando se carga un archivo, seleccione Tarifa fija basada en la cantidad . Si está interesado en obtener más información sobre el cobro de costos adicionales, consulte nuestro artículo que enumera todos los tipos de precios disponibles en APF .
  • Ingrese el Monto por el precio adicional.

Verá que el precio adicional se mostrará en la página de su producto. También se muestra un resumen de precios en la parte inferior:
Carga de un archivo con costo extra
Si no desea mostrar sugerencias de precios o resúmenes de precios, vaya a WooCommerce Configuración Campos de productos y puede deshabilitar ambas configuraciones allí.

Cobra un costo extra por archivo subido

El método explicado anteriormente agrega un costo adicional independientemente de cuántos archivos se carguen. Cuando el usuario no carga archivos, no se agrega ningún costo adicional. Pero cuando el usuario carga 1 o 100 archivos, se agrega el mismo costo adicional de $5 al precio final del producto.

En cambio, podría tener más sentido cobrar por imagen cargada. La versión extendida de Campos de productos avanzados le permite agregar un costo adicional por archivo. Para implementarlo, debemos cambiar la configuración de precios que agregamos en el paso anterior:

  • Busque el campo Carga de archivos de antes y busque la configuración Ajustar precios .
  • Establezca el Tipo de precio en Precio basado en fórmula . Las fórmulas son formas poderosas y avanzadas de configurar esquemas de precios complejos para los plugins de sus productos. Casi cualquier escenario imaginable se puede resolver con precios basados ​​en fórmulas.
  • En el cuadro de fórmula, escribe la siguiente fórmula: files(62e4d28e38781)*5. 5es el precio unitario por archivo y 62e4d28e38781es el ID de su campo de carga de imágenes.

A continuación se muestra una vista previa de 2 archivos cargados, cada uno con un costo adicional de $ 5 (por lo tanto, $ 10 en total):
Carga de archivos agregando costos adicionales al producto

Permita que los clientes carguen múltiples imágenes en su página de producto de WooCommerce (carga masiva)

Hasta ahora, solo hemos hablado de cargar 1 imagen en la página del producto WooCommerce. Sin embargo, si desea aceptar varios archivos (permitir la carga masiva), esto también es posible. Para habilitar la carga múltiple de archivos (en bloque), siga estos pasos:

  • Busque el campo Carga de archivos y haga clic en él para volver al panel de configuración.
  • Active Permitir varios .

Habilitar la carga de varios archivos
Los clientes ahora pueden cargar tantos archivos como quieran. En la siguiente sección, también explicaremos cómo puede limitar la cantidad de archivos cargados.

Amplíe los campos de productos avanzados con plugins adicionales

El plugin de campos de productos avanzados (APF) también viene con algunos plugins adicionales potentes que amplían las características de APF de varias maneras.

¿Por qué creamos algunas funciones en plugins adicionales? ¡Buena pregunta! Al incluir funciones avanzadas en plugins adicionales, mantenemos el plugin principal lo más ligero posible. Si no necesita ciertas funciones, sería una pena que se cargaran en su sitio web de todos modos. Estos scripts adicionales ralentizarían la velocidad general de la página, lo cual es malo para el SEO .

Es por eso que construimos algunas características avanzadas, que no muchos de nuestros usuarios necesitarían a diario, en plugins adicionales (llamados plugins adicionales).

Puede ver todas las extensiones disponibles aquí y tener acceso inmediato a ellas si compra el Paquete de campos de productos avanzados. El paquete contiene todas las extensiones actuales y futuras por un precio muy razonable. Para algunas de las funciones avanzadas que se analizan más adelante en este artículo, necesitará un plugin adicional.

Limite la cantidad de imágenes cargadas en WooCommerce

En la mayoría de los casos, necesitará un número fijo de imágenes de sus clientes. Por ejemplo, cuando vende tarjetas de visita , necesita exactamente 2 archivos: uno para el anverso de la tarjeta y otro para el reverso.

Advanced Product Fields (APF) para WooCommerce le permite limitar la cantidad de imágenes cargadas cambiando 2 configuraciones: una cantidad mínima y máxima de archivos permitidos.

Para hacer esto, necesitará el plugin adicional Image Upload . Es un plugin liviano que agrega algunas funciones extra poderosas específicamente para cargar imágenes de WooCommerce en las páginas de productos.

Una vez que el plugin esté instalado, edite el campo de carga de su archivo y observe estas configuraciones adicionales:
Establecer los archivos subidos mínimos y máximos

  • El número mínimo de archivos es el número mínimo esperado de archivos. Si un usuario carga menos archivos, el producto no se agregará a su carrito.
  • El recuento máximo de archivos es el número máximo permitido de archivos. Los usuarios pueden cargar menos archivos que el número definido allí, pero no más. Establézcalo en -1 si permite un número ilimitado de archivos (aunque no se recomienda).

Cómo permitir que los usuarios editen cargas de imágenes con WooCommerce

¡Es posible que desee permitir que los usuarios editen las imágenes que cargan directamente en el navegador! Puede hacer esto con Campos de productos avanzados en combinación con la  extensión Carga de imágenes . Así es como se ve el editor en las páginas de productos de WooCommerce:
Edite las imágenes cargadas en el navegador en WooCommerce
Esto es lo que sus visitantes pueden hacer con el editor:

  • Recorta las imágenes cargadas. Como propietario de una tienda, puede forzar el recorte para que las imágenes siempre se reciban en el formato correcto.
  • Rotar imágenes. Especialmente cuando las imágenes se toman con un teléfono móvil, es útil rotarlas al formato correcto.
  • Voltear imágenes.
  • Cambie el tamaño de las imágenes acercándolas o alejándolas.

¿Qué es aún mejor? Como propietario de una tienda, puede habilitar o deshabilitar estas funciones del editor de imágenes. ¿No quieres que los usuarios voltee o roten sus imágenes? No hay problema, ¡solo apágalo!

Puede cambiar el tema del editor yendo a WooCommerce → Configuración → Campos de producto → Carga de imagen . Puede cambiar entre un tema claro u oscuro.

Cómo subir imágenes en páginas de productos WooCommerce 2024-apf-image-upload-addon-1-300x242-1
Extensión de carga de imágenes

Mejore sus cargas de archivos con un editor de imágenes completo. Permita que los clientes editen sus imágenes en el navegador

Saber más

Cómo forzar el tamaño y el formato de la imagen cargada (relación de aspecto)

En muchos escenarios, desea que la imagen cargada tenga un determinado formato (relación de aspecto) o tamaño (en píxeles). Dado que la imagen cargada a menudo se imprime en el producto que está vendiendo, es importante que obtenga la imagen exactamente como la necesita, para que no haya contratiempos durante la impresión.

Las extensiones de carga de imágenes discutidas anteriormente también ayudan con eso. Repasemos cada configuración para forzar el tamaño correcto (en píxeles) de su campo de carga de imágenes de WooCommerce:
Configuración para forzar el tamaño de la imagen cargada en WooCommerce

  • Ancho mínimo. Este es el ancho mínimo necesario en píxeles. Si la imagen cargada está por debajo del mínimo, el cliente no podrá agregar el producto a su carrito.
  • Altura mínima. Similar al ancho, esta es la altura mínima requerida en píxeles.
  • Cambiar el tamaño automáticamente. Actívelo si desea que nuestro plugin cambie automáticamente el tamaño de las imágenes cargadas al tamaño deseado. Si un cliente carga una imagen más grande que el máximo deseado, nuestro plugin cambiará el tamaño de la imagen. Las configuraciones máximas de ancho y alto que ve debajo de la palanca se usan para cambiar automáticamente el tamaño de la imagen. Deje el ancho o el alto en blanco para mantener la relación de aspecto.

El plugin también tiene configuraciones para forzar el formato de imagen correcto (relación de aspecto) al permitir a los usuarios recortar la imagen directamente en el navegador.
Configuraciones para forzar el formato correcto de la imagen cargada (proporción)
Active la configuración Habilitar editor de imágenes en el campo de carga de archivos. Cuando esté habilitado, verá aparecer algunas otras configuraciones:

  • Cómo abrir el editor de imágenes: aquí puede especificar cómo se debe abrir la ventana emergente del editor. Puede abrirlo automáticamente (esto obliga al usuario a editar la imagen en el formato correcto) o haciendo clic en el botón «editar», que permite a los usuarios cargar archivos no editados también.
  • Habilitar el recortador de imágenes: actívelo para permitir que los usuarios recorten la imagen en el formato que necesite.
  • Relación de aspecto: establezca en qué relación de aspecto debe estar la imagen cargada final. La relación de aspecto decide el formato de la imagen. Por ejemplo, si necesita una imagen cuadrada en lugar de un rectángulo, elija la relación Cuadrado 1:1 de la lista desplegable.

 

Muestre la imagen cargada en la imagen de la galería de su producto (vista previa en vivo)

La siguiente parte de este tutorial es más avanzada pero muestra una función muy útil. En nuestro ejemplo, estamos vendiendo marcos de fotos donde los clientes pueden cargar su foto para adjuntarla dentro del marco. ¿No sería genial si el usuario pudiera obtener una vista previa de la imagen cargada directamente en el marco?

Agregar una función de vista previa en vivo a sus productos WooCommerce mejora la experiencia del usuario y dará como resultado menos carritos abandonados. Sus clientes pueden obtener una vista previa de su producto terminado antes de realizar un pedido y es más probable que continúen si están satisfechos con el resultado final.

Para agregar una vista previa en vivo al campo de carga de imágenes de WooCommerce, vamos a utilizar otro potente plugin adicional para APF: Vista previa de contenido en vivo . Este plugin le permite obtener una vista previa en vivo de texto o imágenes en la imagen principal de su producto.

El caso de uso más común para una vista previa en vivo es la venta de carteles personalizados . Los usuarios pueden agregar texto personalizado a su póster y aparece inmediatamente en la imagen del producto a la izquierda.
Un póster de boda que puedes personalizar
Esta no solo es una excelente experiencia para el usuario, sino que también es ampliamente conocido que las imágenes más fuertes lo ayudan a vender más productos . El ejemplo anterior agrega una vista previa en vivo del texto, pero el plugin también puede hacer lo mismo con las imágenes cargadas. En concreto, esto es lo que estamos construyendo:
Carga de imágenes con vista previa en vivo en WooCommerce

Paso 1: instale la extensión de vista previa de contenido en vivo

Para empezar, compre la extensión de vista previa de contenido en vivo aquí:  studiowombat.com/live-content-preview

En su tablero de WordPress, vaya a Plugins → Agregar nuevo → Cargar plugin . Elija el archivo zip que descargó de su cuenta de Studio Wombat. Luego haga clic en Activar .

A continuación, vaya a WooCommerce → Configuración → Campos de producto → Vista previa de contenido en vivo e ingrese su clave de licencia. Haga clic en Activar licencia .

Ahora que tiene la extensión de vista previa de contenido en vivo en funcionamiento, puede comenzar a agregar una vista previa en vivo al campo de carga de imágenes de su producto WooCommerce.

Paso 2: Agrega una vista previa en vivo

Regrese y edite el producto del marco de fotos de antes. En la sección Datos del producto , seleccione la pestaña Campos personalizados , tal como lo hicimos anteriormente en esta guía. Desplácese hacia abajo hasta que vea la sección Vista previa de contenido en vivo y haga clic en Agregar nuevo .
Cómo subir imágenes en páginas de productos WooCommerce 2024-live-content-preview-section
Se abre una ventana emergente para guiarlo a través de la configuración de su vista previa en vivo. En el paso 1, puede seleccionar la imagen para mostrar el contenido. Puede elegir la imagen principal de su producto o cualquiera de las imágenes de la galería (si corresponde) que haya definido en la configuración del producto WooCommerce.

Seleccione la imagen y haga clic en Siguiente paso . Aparece el paso 2:
Configuración de una vista previa de contenido en vivo: paso 2
En este paso, puede seleccionar cuál de los campos de su formulario debe aparecer en la imagen. Puede seleccionar cualquiera de sus campos de carga de texto o archivos. Haz clic en Siguiente paso cuando hayas terminado.

En el último paso, puede dibujar un área en su imagen donde debería aparecer el contenido. En nuestro caso, queremos que la imagen se muestre dentro del marco, así que dibujamos un área (verifique el borde azul a continuación) dentro del marco:
Dibujar área de vista previa de contenido en vivo
Cuando haya terminado, haga clic en Listo . ¡Ya ha agregado su primera vista previa de contenido a su producto WooCommerce!

Paso 3: establezca la proporción correcta

Gracias a la vista previa de la imagen en vivo, cualquier imagen cargada ahora se mostrará dentro del marco. El problema es que cuando el usuario carga una imagen súper ancha, se aplastará dentro de los límites del área que dibujamos arriba. Esto no es ideal. En lugar de aplastar la imagen dentro de los límites, sería mejor obligar al usuario a cargar la relación de aspecto correcta. Recuerde, podemos hacer eso con el plugin de carga de imágenes que discutimos en algunas secciones anteriores en «Cómo forzar el tamaño y el formato de la imagen cargada (relación de aspecto)».

Administre las cargas de imágenes en el área de administración de WordPress

Como propietario de una tienda, es importante que pueda acceder fácilmente a los archivos cargados de sus clientes. Hay 2 lugares donde puede acceder a las cargas de imágenes de sus clientes en la sección de administración de WooCommerce de su sitio de WordPress:
Acceda a las cargas de los clientes en el administrador de WooCommerce

  1. En la pantalla de administración de pedidos, podrá hacer clic en los archivos del cliente.
  2. En la misma pantalla, hay un botón Descargar archivos que le permite descargar todos los archivos en un paquete zip. Esto es útil si sus clientes pueden cargar varios archivos y desea descargarlos todos de una sola vez.

¿Qué tan seguro es cargar imágenes en las páginas de productos de WooCommerce?

Hasta ahora, hemos hablado principalmente sobre cómo crear un cargador de imágenes y qué puede hacer con él en WooCommerce. Pero ¿qué pasa con la seguridad?

La carga de archivos puede considerarse un riesgo de seguridad si no configura correctamente la carga de archivos. Hay 3 cosas que puede hacer para minimizar el riesgo de seguridad:

  1. Limite los tipos de archivos permitidos al mínimo absoluto. Si espera imágenes, no permita documentos de Word o archivos de Excel. Hemos hablado de esto anteriormente en esta guía.
  2. Limite el tamaño de archivo permitido. Si espera imágenes simples, no necesita permitir archivos de más de 5 megabytes. Esta guía también explicó cómo hacer esto.
  3. Una tercera opción es permitir que solo los usuarios registrados carguen archivos. Esto es especialmente útil si está vendiendo B2B, donde sus clientes requieren una cuenta para comprar en su tienda. Vaya a WooCommerce → Configuración → Campos de productos y habilite la configuración allí.

Los campos de productos avanzados para WooCommerce utilizan las capacidades integradas de WordPress para cargar archivos, por lo que ya es bastante seguro desde el primer momento porque WordPress bloqueará los archivos maliciosos con todas sus fuerzas (al no permitir tipos de archivos sospechosos). Además de eso, hemos creado una capa adicional de seguridad en nuestro plugin.

Recomendamos encarecidamente mantenerse actualizado con sus versiones de WordPress, WooCommerce y APF para minimizar el riesgo de problemas de seguridad en el futuro.

Guía de WooCommerce para cargar imágenes en páginas de productos: palabras finales

Como puede ver en la extensión de esta publicación de blog, hay muchos temas que cubrir al permitir que sus clientes carguen imágenes en sus páginas de productos de WooCommerce. ¡Pero, junto con el plugin Campos de productos avanzados, puede convertir WooCommerce en una potencia de carga!

 

El plugin también ayuda con otras funciones relacionadas con la carga:

  • Lógica condicional para mostrar u ocultar campos de carga en función de los valores de otras entradas de formulario.
  • Aumente el precio final del producto en función de las imágenes cargadas. Agregue una tarifa adicional por imagen o por varias imágenes.

Con la ayuda de extensiones adicionales, puede crear flujos de carga aún más avanzados. Su cliente puede cargar imágenes en las páginas de productos de WooCommerce, editar las imágenes en su navegador, recortar, cambiar el tamaño y más. Puede establecer una amplia variedad de parámetros para configurar la carga de imágenes según las necesidades de su tienda:

  • Limite el tamaño y los tipos de archivos.
  • Cambia automáticamente el tamaño de las imágenes según tus necesidades.
  • Forzar un determinado formato (cuadrado, rectángulo o cualquier otra proporción).
  • Permitir un número exacto de imágenes (archivos mínimos y máximos).
  • Muestra una vista previa en vivo de la imagen cargada.
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments