Opt In Image
DESCARGA GRATIS
1.- Guía para crear una tienda online de éxito
2.- Guía SEO para Prestashop
  • Recibe todos los domingos las últimas entradas del blog.
  • Recibe contenidos exclusivos.

Te puedes dar de baja en cualquier momento. Nada de spam

 

La plantilla Avada es la plantilla para wordpress más vendida a lo largo de la historia (con la excepción de Divi).

Avada dispone de uno de los mejores page builders y es perfectamente compatible con Woocommerce. De hecho tiene 3 elementos específicos de woocommerce en el Fusion Builder, que es el constructor de Avada.

 

QUIERO LA PLANTILLA AVADA

 

Cuando utilizamos el constructor de la plantilla Avada e instalamos el plugin Woocommerce, veremos que nos aparecen en el constructor 3 nuevos elementos: Woo Carousel, Woo Featured, Woo Shortcodes

 

Conoce la estructura, todos los elementos y aprende a utilizar el page builder de la plantilla Avada

 

Estos elementos los utilizaremos principalmente en la creación de la home o página de inicio de la tienda online junto con otros elementos habituales del page builder de Avada.

 

Conoce todas las características de la plantilla Avada en este post: Plantilla Avada y visita esta categoría específica de Avada en el blog horizonweb

 

Después veremos también las principales opciones de configuración (Fusion theme options) de la plantilla Avada relacionadas con Woocommerce

 

 

 

1.- Elemento Woo Shortcodes Avada (bloques de productos rejilla)

 

Este elemento nos permitirá mostrar productos individuales o bloques de productos clasificados o filtrados según diferentes parámetros. Hay algunos shortcodes que no muestran productos.

 

a.- Shortcode: aquí seleccionaremos el shortcode que queremos mostrar. Vamos a ver un poco más adelante los shortcodes más interesantes que son los que muestran bloques de productos

 

b.- Shortcode content: según el parámetro que hayamos seleccionado en el apartado anterior aquí aparecerá el código o shortcode correspondiente que se aplicará.

Una vez que hayamos guardado podremos modificar editar el elemento y modificar algunos de sus parámetros si fuera necesario para ajustar el funcionamiento del mismo.

En el siguiente ejemplo podremos modificar los atributos category, per_page, columns, orderby y order modificando de esta manera la forma y el contenido a mostrar por el bloque de productos.

 

 

shortcode woocommerce de avada

Ejemplo de shortcode elemento WooShortcode Avada

 

 

1.1.- Los Shortcodes woocommerce de Avada más utilizados

 

Vamos a ver ahora los shortcodes más utilizados para la creación de tiendas online con Woocommerce y Avada.

 

i.- Products by category slug (Productos por url de categoría): con este shortcode podremos mostrar un bloque con todos los productos que pertenezcan a una determinada categoría.

Una vez introducido el shortcode deberemos personalizar los siguientes atributos:

Category: aquí introduciremos el slug de la categoría cuyos productos queremos mostrar. Por ejemplo category=”zapatillas-deportivas”

Per_page: número de productos a mostrar

Columns: número de columnas en las que se mostrarán los productos en el bloque

Orderby: orden en el que aparecerán los productos en el bloque. Los valores que puedes utilizar en este atributo los puedes ver aquí

Order: establece si el tipo de ordenación elegida en el anterior apartado será descendente (desc) o ascendente (asc)

 

personalizar valores del shortcode avada y woocommerce

Parámetros del shortcode que se puede personalizar

 

ii.- Recent products (productos recientes): con este Shortcode se mostrarán en el bloque los últimos productos añadidos a la tienda. Los atributos que podemos personalizar en el shotcode son los de columns, orderby y order ya vistos en el apartado anterior. EJEMPLO PRODUCTOS RECIENTES

 

Mejora el SEO de tu tienda woocommerce añadiendo más texto en las categorías: texto categorías bajo productos

 

iii.- Featured products (Productos destacados): con este Shortcode se mostrarán en el bloque los productos destacados. Los productos destacados son los que están marcados con una estrella en la lista de productos de Woocommerce: EJEMPLO PRODUCTOS DESTACADO

Los atributos personalizables son per_page, columns, orderby y order que ya los hemos visto en apartados anteriores.

 

 

 

2.- Elemento Woo Carousel Avada (Carrusel de productos)

 

Con este elemento podremos mostrar un bloque con un Carrusel de productos filtrados por categoría.

Un carrusel de productos es un visor de productos en una sola fila y varias columnas en el cual se muestran diferentes productos de la tienda. Podremos hacer que aparezcan unas flechas laterales para mostrar más productos, pero siempre en una sola fila. Ejemplo de Carrusel Avada

Si quieres crear un carrusel para los productos destacados en vez de que aparezcan filtrados por categorías utiliza el elemento “Woo Featured”

 

elemento fusion builder Carrusel productos

Ejemplo de Carrusel de productos con Avada

 

Entre las opciones de configuración del elemento Woo Carousel destacan:

i.- Picture size (tamaño imagen): podremos elegir entre tamaño fijo (fixed) o dimensiones adaptadas al tamaño de la imagen (auto).

 

ii.- Categories (categorías): aquí seleccionaremos la categoría cuyos productos queremos mostrar en el Carrusel de productos de Avada.

Si no seleccionas ninguna categoría se mostrarán productos de todas las categorías.

Si quieres mostrar unos productos específicos deberás crearte una categoría específica con tal fin o utilizar los productos destacados con el elemento “Woo Featured”

 

iii.- Number of products (número de productos): aquí seleccionaremos el número de productos de la categoría antes seleccionada que queremos mostrar en el carrusel.

 

Aprende a configurar los gastos de envío con Woocommerce: Gastos de envío Woocommerce

 

iv.- Carousel layout (Diseño Carrusel): aquí elegiremos “Title below image” para que se muestren los datos del producto debajo de la imagen o la opción de “title on rollover” para que se muestren los datos del producto cuando se coloca el ratón sobre el producto.

 

v.- Carousel autoplay (Carrusel en movimiento): con esta opción el carrusel se moverá automáticamente. Si no marcamos esta opción podremos mostrar unas flechas para que sea el visitante el que desplace el Carrusel, que es el funcionamiento más habitual.

 

vi.- Maximum Columns (número de columnas): Número de columnas a mostrar en el carrusel de productos (entre 1 y 6 columnas). Ya sabemos que filas solo puede haber una

 

vii.- Column Spacing  (espacio entre columnas): aquí podremos establecer un espaciado específico entre columnas del carrusel.

 

viii.- Scroll Items (desplazamiento): deja esta opción en blanco para que los desplazamientos a través de las flechas sea del número visible de productos.

 

ix.- Show navigation (mostrar flechas): marca “YES” para que se muestren las flechas de desplazamiento del carrusel.

 

x.- Show categories (mostrar categorías): entre los datos del producto mostrar o no las categorías a las que pertenece el producto. Yo no la marcaría para que no aparezcan tantos datos en el carrusel.

 

xi.- Show Price (mostrar precio productos): para mostrar o no el precio de cada producto en el carrusel.

 

xii.- Show button (mostrar botones): mostrar o no los enlaces de “añadir al carrito” y “detalles” a los productos que se muestran en el carrusel.

 

xiii.- Element visibility (visibilidad de elementos): aquí seleccionaremos en qué tipos de dispositivos queremos que se muestre el carrusel.

 

 

3.- Elemento Woo Featured Avada (Productos destacados)

 

Este elemento es exactamente el mismo que el elemento “Woo Carousel” pero con la diferencia que en “Woo Featured” se mostrarán automáticamente los productos destacados en vez de productos filtrados por categoría como sucedía con el “Woo Carousel”.

Es decir, el “Woo Featured” es un carrusel de productos destacados en vez de un carrusel de productos filtrados por categorías como sucedía con el Woo Carousel.

Las opciones de configuración del elemento “Woo Featured” son las mismas que vimos en el “Woo Carousel” en el apartado 2.-

 

 

4.-  Fusion theme options – sobre Woocommerce

 

El bloque más importante de opciones de personalización de la plantilla Avada es el Fusion Theme Options.

Vamos a centrarnos únicamente en las opciones relacionadas con Woocommerce.

Para acceder al Fusion Theme Options iremos a: “Avada > Theme Options”. Hecho esto y para ver las opciones de Avada relacionadas con Woocommerce haremos clic en “Woocommerce” en el menú lateral.

Veremos dos submenús uno con opciones generales sobre Avada y Woocommerce (General Woocommerce) y otro con Opciones de diseño (Woocommerce Styling).

 

 

4.1.- General Woocommerce Avada

 

Entre las opciones encontramos estas:

i.- Woocommerce number of Products per page (número de productos por página): con esta opción podremos establecer de manera general el número de productos que aparecerán por categoría de la tienda (en cada página) y en la página /tienda/. Podremos seleccionar entre 1 – 50

 

Cómo añadir una lista de deseos o wishlist en Woocommerce: Wishlist woocommerce

 

ii.- Woocommerce number of product Columns (número de columnas de productos): desde aquí podremos establecer el número de columnas de productos que mostrará la página principal de la tienda /tienda/. Entre 1 – 6

Aunque podremos utilizar el Fusion builder y los Elemento específicos para Woocommerce que hemos visto en apartados anteriores.

 

iii.- Woocommerce Related / Up-sell /Cross-sell Product number of Columns  (columnas productos relacionados): en la parte inferior de cada ficha de producto verás que aparece productos de la misma categoría y productos complementarios. Pues bien, aquí vamos a establecer cuantas columnas tendrá la retícula que muestra los productos relacionados y de la misma categoría.

 

iv.- Woocommmerce archive Number of Product Columns (columnas de productos páginas archive): número de columnas en los cuales se mostrarán los productos en las categorías de la tienda.

 

v.- Avada’s WooCommerce Product Gallery slider (activar slider galería en ficha de product): con esta opción podremos activar o desactivar el slider de imágenes que aparece en la imagen de la ficha de producto.

 

quitar o no el slider en la ficha de producto de avada

Slider ficha de producto de Avada

 

vi.- Woocommerce product gallery size (tamaño imagen producto): desde aquí podremos establecer el tamaño de la imagen de la ficha de producto en Woocommerce con Avada. Desde aquí establecemos el tamaño máximo del contenedor que contiene la imagen de la ficha de producto, no directamente el tamaño

 

vii.- Woocommerce Shop page Ordering Boxes (filtros ordenar productos): con esta opción podremos activar o desactivar los filtros para que el cliente pueda ordenar los productos que se visualizan en la página de tienda -> /tienda/

 

filtro plantilla avada para ordenar productos

Filtros visuales para mostrar los productos con Avada

 

viii.- Woocommerce Shop page Crossfade Image Effect (efecto crossfade): si lo dejamos en ON activaremos este efecto que muestra otra imagen del producto cuando ponemos el cursor sobre un producto en la página /tienda/, en caso contrario lo desactivamos.

 

ix.- Woocommerce one page checkout (checkout en una sola página): con esta opción podremos elegir entre un checkout (página de pago) en una sola página o un checkout con varias pestañas.

 

ejemplo pagina de checkout con avada y woocommerce

Página de checkout woocommerce plantilla Avada

 

x.- Woocommerce My account Link in Main Menu (enlace mi cuenta en menú): Si activamos esta opción aparecerá automáticamente un enlace para inicio de sesión o registro en el menú principal (mi cuenta). También lo podríamos añadir manualmente y además será mejor para poner mi cuenta en vez de que aparezca my account.

 

xi.- Woocommerce Menu cart icon in main menu (icono carrito en menu): con esta opción de Avada podremos mostrar u ocultar el icono del carrito en el menú principal de la web.

 

xii.- Woocommerce social icons: Con esta opción podremos activar o desactivar los iconos para compartir en redes sociales que aparecen en la ficha de producto.

 

Iconos en la ficha de producto de woocommerce con avada

Iconos de compartir en redes sociales ficha producto Avada wordpress

 

xiii.- Woocommerce Product Grid / List view: con esta opción podremos mostrar u ocultar los dos iconos que sirven para que el visitante pueda elegir si quiere que se muestren los productos en las categorías y página /tienda/ en rejilla o en lista.

 

xiv.- Woocommerce Account Area Message 1: desde aquí podremos personalizar el texto que aparece en la parte superior cuando el cliente accede a la finalización de compra o checkout.

 

xv.- Woocommerce Account Area Message 2: desde aquí podremos personalizar el Segundo texto que aparece junto al anterior.

 

wordpress y woocommerce areas de mensaje con avada

Area message 1 y 2 con avada y woocommerce

 

 

4.2.- Woocommerce Styling Avada

 

Entre las opciones de personalización de diseño específico para Woocommerce que podemos encontrar en el Fusion theme options apartado Woocommerce Styling encontramos:

 

i.- Woocommerce product Box Design (diseño de cajas de producto): aquí podremos elegir entre el tipo de diseño de caja de producto que es utilizando por Avada en Woocommerce. Podremos elegir entre “Classic” o “Clean”.

 

elegir diseño para mostrar productos en cateogorías y con elementos fusion builder

Diseño para visualización de productos tipo Classic y Clean de AVADA

 

ii.- Woocommerce tab design (diseño de pestañas): desde aquí seleccionaremos si queremos que las pestañas utilizadas en Woocommerce sean de tipo vertical u horizontal.

 

iii.- Woocommerce Quantity box background color (color fondo de elementos cantidad): desde aquí estableceremos el color de fondo de los bloques “+” y “-“ para añadir más o menos unidades en la ficha de producto.

colore bloque para añadir unidades en ficha de producto avada

Diseño del bloque de unidades de producto con Woocommerce y Avada

 

iv.-  Woocommerce Quantity box hover background color (color hover fondo de elementos cantidad): aquí estableceremos el color al pasar el ratón por los bloques “+” Y “-“para añadir o quitar unidades de la ficha de producto.

 

v.- Woocommerce Order Dropdown background color: desde aquí estableceremos el color de fondo de algunos desplegables en woocommerce como es el caso de los selectores para que el cliente ordene los productos que le aparecen en las categorías o en la página tienda.

 

diseño filtros productos categorías con avada

Filtros para visualización de productos woocommerce y Avada

 

vi.- Woocommerce Order Dropdown text color: igual que el apartado anterior pero aquí seleccionaremos el color de los textos

 

vii.- Woocommerce Order Dropdown border color: igual que en el apartado anterior pero aquí estableceremos el color del borde.

 

viii.- Woocommerce Cart Menu Background Color: al poner el ratón sobre el carrito situado en la barra de menú se despliega un panel con los elementos del carrito. Pues bien, desde aquí podremos personalizar el color de fondo de la parte inferior de ese desplegable.

 

ix.- Woocommerce icon Font size: desde aquí podremos modificar el tamaño de algunos iconos como los que aparecen en la parte inferior de los productos cuando estamos en la vista “classic”.

 

Bloguer especializado en Woocommerce / WordPress, Divi y Prestashop. Me dedico a impatir formación y a la creación de páginas web, blogs y tiendas online.Mi otro blog, especializado en WordPress y Divi: horizonweb.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información Aquí,plugin cookies

ACEPTAR
Aviso de cookies