Cuando se trata de configurar una tienda en línea, WooCommerce es el plugin ideal. Es ridículamente sencillo configurar una tienda en línea y comenzar a vender sus productos tan pronto como haya terminado. Avada brinda soporte integral e integración de diseño para WooCommerce, lo que le permite crear la tienda de sus sueños y al mismo tiempo garantiza que se vea exactamente en el marco que tiene en mente.
Avada se trata de brindarle la posibilidad de personalizar la apariencia de su sitio web, lo cual no es diferente con la integración de WooCommerce. Al utilizar nuestra popular red de opciones avanzadas, puede seleccionar entre una amplia gama de personalizaciones para una variedad de posibilidades de diseño, que incluyen:
- WooCommerce tiene su propio Panel de Opciones Globales de Avada, separado del Panel de Opciones Globales de Avada principal.
- Las opciones de página de Avada están disponibles para cada producto.
- Avada Builder le permite crear diseños de páginas de productos arrastrando y soltando elementos.
Para construir su sitio de comercio electrónico con Avada.
En primer lugar, debemos instalar wooCommerce en Avada.
- Instalación de WooCommerce: instrucciones paso a paso
- Cómo asignar una página de tienda a su sitio web
- Creando tus productos
- Creando efecto de zoom del producto
- Ajuste de la configuración del tamaño de la imagen del producto en WooCommerce.
Instalación de WooCommerce: instrucciones paso a paso
Vaya a Avada > Plugin /Complementos y busque el plugin , como se muestra en la captura de pantalla siguiente.
Paso 1 : instale el plugin .
Paso 2 : seleccione 'Instalar' en el menú desplegable.
El plugin se instalará y activará automáticamente.
Paso 3 : después de eso, debería aparecer el asistente de configuración de WooCommerce. Si estás importando una de nuestras demostraciones de Woo, como Modern Shop o Classic Shop, puedes omitir este paso sin riesgo de perder tus datos. Para avanzar, seleccione "Ahora no" en el menú desplegable. Si no está importando una de nuestras demostraciones de Woo, continúe con el siguiente paso haciendo clic en '¡Vamos!' para comenzar el proceso de configuración.
Paso 4 : siga las indicaciones e instrucciones que aparecen en pantalla para completar el proceso e ingresar la información necesaria sobre su tienda. Al hacer clic en el botón "Crear su primer producto" cuando haya terminado, podrá continuar con la creación de su primer producto. Alternativamente, puede regresar a su Panel de WordPress haciendo clic en el enlace ubicado debajo de la ventana de configuración.
Cómo asignar una página de tienda a su sitio web
Como parte del proceso normal de instalación de WooCommerce, se debe iniciar el asistente de configuración, que le permitirá configurar su tienda y asignar las páginas de su tienda a los clientes. Puede encontrar más información sobre las páginas que crea el asistente de configuración en este documento de WooCommerce.
Alternativamente, si el Asistente de configuración no aparece, o si lo cancela por cualquier motivo, siempre puede volver al Asistente de configuración seleccionando Asistente de configuración en el menú Ayuda de cualquier página de WooCommerce, que se puede encontrar en la parte superior izquierda de la página. ventana.
Puede configurar manualmente la página de la tienda yendo a la pestaña Productos en la Configuración de WooCommerce – WooCommerce > Configuración > Productos – y seleccionando la página que será la página principal de la tienda en el menú desplegable. WooCommerce luego mostrará sus productos en esta página como resultado de su acción.
Las páginas restantes se pueden configurar en la pestaña Avanzado, que se encuentra en WooCommerce > Configuración > Avanzado .
Creando tus productos
Paso 1 : en la barra lateral de administración de WordPress, navegue hasta la pestaña Productos > Agregar producto.
Paso 2 : en la parte superior de la página, ingresa el nombre de tu producto.
Paso 3 : complete el campo de contenido de la publicación con el texto de la descripción del producto. Toda la información del producto se mostrará en esta sección.
Paso 4 : complete el cuadro ' Datos del producto ' con toda la información del producto. Por ejemplo amp el precio, el SKU y el envío son todas opciones posibles.
Paso 5 : en el cuadro ' Descripción breve del producto ', escriba una descripción sucinta de su producto que aparecerá junto a las imágenes principales.
Paso 6 : la imagen principal destacada debe colocarse debajo del cuadro ' Imagen del producto ' en el lado derecho de la página; Esto debe completarse para cada producto.
Paso 7: agregue más imágenes al cuadro ' Galería de productos ' si desea utilizar una galería de imágenes en lugar de una sola imagen.
Paso 8 : en el cuadro ' Categorías de productos ', ingrese las categorías que se aplican a sus productos. A continuación, complete los espacios en blanco con las etiquetas apropiadas para su producto en el cuadro ' Etiquetas de producto '.
Paso 9 : una vez que haya ingresado toda la información necesaria, haga clic en el botón ' Publicar ' y el artículo aparecerá en la página principal de su tienda.
Creando efecto de zoom del producto
Si está utilizando Avada Layouts, deberá asegurarse de que la opción Zoom de imágenes de productos de WooCommerce esté habilitada en Avada > Opciones > WooCommerce > WooCommerce general > Opción de zoom de imágenes de productos de WooCommerce , o en la pestaña General del elemento Imágenes de productos de Woo > Imágenes del producto Zoom si está utilizando diseños de WooCommerce.
Ancho de las imágenes de productos de WooCommerce : el ancho de su imagen principal (consulte la configuración a continuación) y el tamaño real de la imagen cargada deberán ser mayores que Avada > Opciones > WooCommerce > WooCommerce general > Ancho de imágenes de productos de WooCommerce o la configuración de Ancho máximo de imágenes de productos en el elemento Imágenes del producto Woo. El ancho de la columna del contenedor para una galería de un solo producto estará determinado por la configuración que elija. Una vez que haya realizado los ajustes necesarios, estará listo para establecer el ancho de su imagen principal de WooCommerce.
Ancho de la imagen principal de WordPress : la configuración del Ancho de la imagen principal de WooCommerce se puede encontrar en el Personalizador de su sitio web de WordPress. Desde el panel de WordPress, navegue hasta Apariencia > Personalizar > WooCommerce > Imágenes del producto , donde encontrará la configuración Ancho de la imagen principal; Esto determinará el tamaño real de la imagen que se muestra en la galería.
Cuanto más detallado sea el efecto de zoom, mayor será el tamaño de imagen que haya establecido para su imagen. Para aclarar, si el tamaño de la imagen en la configuración de WooCommerce coincide con el ancho de la imagen en las opciones globales de Avada, no se verá ningún zoom cuando el mouse pase sobre la imagen en la página. Además, el tamaño de la imagen real que cargue debe ser igual o mayor que la configuración de Ancho de imagen principal en el diseño de su sitio web.
Asegúrese de regenerar sus miniaturas después de cambiar los tamaños de imagen de WooCommerce; Esto aplicará sus nuevos tamaños de imagen a cualquier imagen que ya se haya subido a su sitio web. Puede utilizar el plugin Regenerar miniaturas para lograr esto.
Ajuste de la configuración del tamaño de la imagen del producto en WooCommerce.
WooCommerce incluye opciones para ajustar el tamaño de las imágenes de productos en las secciones Catálogo de la tienda e Imágenes de producto único. Además, existen configuraciones específicas de Avada que funcionan en conjunto con los tamaños de imagen utilizados por su tienda WooCommerce. Al configurar estos ajustes de tamaño de imagen, es importante recordar que también se deben considerar los ajustes de opciones globales de Avada. Repasaremos cada una de estas opciones con mayor detalle más adelante.
Supongamos que las imágenes que carga para sus productos son más pequeñas en la fuente que los tamaños de imagen especificados en la configuración de WooCommerce. En ese caso, es posible que notes algunas discrepancias en el diseño visual en la parte frontal de las páginas de tu tienda; Esto no es un error de ninguna manera. Es simplemente porque sus imágenes eran demasiado pequeñas para que la configuración de WooCommerce las afectara. Puede considerar estas configuraciones como el ancho y alto máximos de sus imágenes en términos de dimensiones de la imagen. Todo lo que esté por debajo del límite especificado no cambiará de tamaño.
Al configurar su tienda, asegúrese de tener en cuenta tanto la configuración de tamaño de imagen de WooCommerce como el tamaño real de sus imágenes. En resumen, sus imágenes deben tener el mismo tamaño o más que la configuración de tamaño de imagen en su tienda WooCommerce.
Cualquier cambio en la configuración del tamaño de su imagen requerirá que vuelva a generar sus miniaturas para que entren en vigor en las imágenes que ya se han subido a su sitio. Por lo tanto, se recomienda encarecidamente utilizar el plugin Regenerar miniaturas. Además, los tamaños de las imágenes se pueden ajustar siguiendo los pasos a continuación:
Paso 1 : en la barra lateral de administración, navegue por la pestaña ' Apariencia ' y luego por la pestaña ' Personalizar ' para comenzar a personalizar su sitio.
Paso 2 : navega a la pestaña ' WooCommerce ' en la parte superior de la página.
Paso 3 : la configuración de Imágenes para Imágenes de un solo producto se puede encontrar en la pestaña ' Imágenes de producto ' de la ventana de configuración.
Paso 4 : cuando cargue imágenes en las páginas de un solo producto, seleccione la opción de ancho de la imagen principal. El ancho de miniatura es el ancho de las miniaturas de sus productos en el catálogo. Complete los espacios en blanco con el valor de ancho deseado.
Paso 5 : para regenerar miniaturas después de haber cambiado el tamaño de las imágenes y guardarlas, deberá utilizar el plugin , que se puede encontrar en la sección Plugin Primero, instale el plugin y luego navegue hasta la WP Admin > Herramientas , donde puede elegir regenerar las miniaturas de sus imágenes, creando los nuevos tamaños de imagen.
