Cuando se trata de configurar una tienda en línea, WooCommerce es el plugin . Es ridículamente simple 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 garantizar que se vea exactamente en el marco que tiene en mente.
Avada se trata de brindarle la capacidad de personalizar la apariencia de su sitio web, que no es diferente con la integración de WooCommerce. Usando 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.
Primero, debemos instalar wooCommerce en Avada.
- Instalación de WooCommerce: instrucciones paso a paso
- Cómo asignar una página de la tienda a su sitio web
- Creando sus productos
- Creación de un efecto de zoom del producto
- Ajustar la configuración del tamaño de la imagen del producto en WooCommerce.
Instalación de WooCommerce: instrucciones paso a paso
Ir a Avada> Plugin s / Add-ons y buscar la WooCommerce plugin , como se muestra en la siguiente imagen.
Paso 1 : instale el plugin WooCommerce .
Paso 2 : seleccione 'Instalar' en el menú desplegable.
El plugin se instalará y activará automáticamente.
Paso 3 : después de eso, se debe mostrar el asistente de configuración de WooCommerce. Si está importando una de nuestras demostraciones de Woo, como Modern Shop o Classic Shop, puede omitir este paso sin correr el riesgo de perder sus datos. Para saltar adelante, 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!' botón para comenzar el proceso de configuración.
Paso 4 : siga las indicaciones e instrucciones en pantalla para completar el proceso e ingrese la información necesaria sobre su tienda. Al hacer clic en el botón 'Crear su primer producto' cuando haya terminado, podrá proceder a crear su primer producto. Alternativamente, puede volver a su panel de WordPress haciendo clic en el enlace que se encuentra debajo de la ventana de configuración.
Cómo asignar una página de la 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 en cualquier página de WooCommerce, que se puede encontrar en la parte superior izquierda de la 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 sus productos
Paso 1 : en la barra lateral de administración de WordPress, vaya a la pestaña Productos > Agregar producto.
Paso 2 : en la parte superior de la página, ingrese el nombre de su 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 Datos producto ' con toda la información del producto. Por ejemplo , el precio, el SKU y el envío son todas opciones posibles amp
Paso 5 : en el Descripción breve del producto ', escriba una descripción sucinta de su producto que aparecerá junto a sus imágenes principales.
Paso 6 : la imagen destacada principal debe colocarse debajo del Imagen producto ' en el lado derecho de la página; Esto debe completarse para cada producto.
Paso 7 : agregue más imágenes al Galería productos ' si desea utilizar una galería de imágenes en lugar de una sola imagen.
Paso 8 : en el Categorías productos ', ingrese las categorías que se aplican a sus productos. A continuación, complete los espacios en blanco con las etiquetas adecuadas para su producto en el Etiquetas productos '.
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.
Creación de un 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 Zoom de imágenes de productos de WooCommerce pestaña General del elemento de imágenes de productos de Woo Zoom de imágenes de productos si está utilizando diseños de WooCommerce.
Ancho de las imágenes de productos de WooCommerce de su imagen principal (consulte la configuración a continuación) y el tamaño real de la imagen cargada deberán ser más grandes 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 de imágenes de productos de Woo. El ancho de la columna del contenedor para una sola galería de productos 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 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, vaya a Apariencia > Personalizar > WooCommerce > Imágenes de productos , donde encontrará la configuración de 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 configurado 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á los nuevos tamaños de imagen a cualquier imagen que ya se haya subido a su sitio web. Puede usar el plugin Regenerate Thumbnails para lograr esto.
Ajustar 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 los productos en las secciones Catálogo e Imágenes de un solo producto de la tienda. Además, existen configuraciones específicas de Avada que funcionan junto 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 las opciones globales de Avada. Repasaremos cada una de estas opciones con mayor detalle más adelante.
Suponga 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 su configuración de WooCommerce. En ese caso, es posible que observe algunas discrepancias de diseño visual en la parte frontal de las páginas de su 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 pensar en estas configuraciones como el ancho y alto máximo para 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 que se tengan en cuenta tanto la configuración del tamaño de la imagen de WooCommerce como el tamaño real de sus imágenes. En resumen, sus imágenes deben ser del mismo tamaño o más grandes que la configuración de tamaño de imagen en su tienda WooCommerce.
Cualquier cambio en la configuración del tamaño de la imagen requerirá que vuelva a generar sus miniaturas para que surtan efecto en las imágenes que ya se han subido a su sitio. Por lo tanto, se recomienda encarecidamente utilizar el plugin Regenerate Thumbnails. 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, navega por la pestaña " Apariencia " y luego por la pestaña " Personalizar " para comenzar a personalizar tu sitio.
Paso 2 : navegue 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 productos individuales se puede encontrar en la pestaña ' Imágenes productos
Paso 4 : cuando cargue imágenes en sus páginas de productos individuales, seleccione la opción de ancho de imagen principal. El ancho de la 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á usar el plugin , que se puede encontrar en la sección Plugin plugin Regenerar miniaturas y luego navegue a la WP Admin> Herramientas , donde puede optar por regenerar las miniaturas de sus imágenes, creando los nuevos tamaños de imagen.
