Lo que NO TE DICEN en las Guías del Plugin AAWP

por | 7 Comentarios

Guías hay muchas y muy buenas, yo mismo tengo una amplia información del plugin AAWP de WordPress, pero todas se quedan en lo básico, como instalar y configurar los aspectos generales para mostrar un producto sobre una máscara prediseñada.

Pero este complemento puede ofrecer mucho más, para poder replicar el siguiente proceso necesitarás disponer del plugin AAWP y haber leído la guía para tener todo configurado correctamente.

Plugin AAWP

Crear un diseño personalizado con el plugin AAWP

Ya sabrás que el plugin AAWP funciona insertando un pequeño código, llamado shortcode, que extrae la información de Amazon y la coloca en nuestra página a través de una clave API.

Estos códigos cortos podemos personalizarlos añadiendo unas variables, para mostrar varias columnas, visualizar el producto en vertical u horizontal, mostrar listados o comparaciones, y una serie de factores más que ya conoceréis si habéis leído cualquiera de las guías que hay en internet.

No voy a entretenerme en explicar algo que ya hice en la guía del plugin en un artículo anterior. ¿Aún no lo has consultado?, a que esperas, yo te espero en este mismo punto a que termines.

Los shortcodes individuales de AAWP

Cada elemento que se muestra y que se extrae de Amazon puede configurarse con un código exclusivo de ese dato concreto.

Conociendo esos shortcodes podemos ir generando nuestro propio diseño, único y diferente a los que podamos encontrar en cualquier otra página y así crear una identidad propia y personal.

Se trata de un tema avanzado, en el que necesitaremos conocer y manejar un poco de CSS para conseguir un aspecto espectacular de cada producto insertado con el plugin AAWP, pero esto ya lo veremos más adelante.

Existen muchos códigos, algunos que modifican el shortcode básico y otros que insertan elementos sueltos. Vamos a fijarnos sólo en los más interesantes y si queréis experimentar con el resto podéis consultar la ayuda y soporte de AAWP.

Vamos a realizar los cambios sobre un producto cualquiera de Amazon.

Caja de producto horizontal de Amazon Affiliate WordPress
Formato de caja horizontal inicial

[amazon box="B0863G2M7F"]

Caja de producto vertical de Amazon Affiliate WordPress
Formato de caja vertical inicial

[amazon box="B0863G2M7F" template="vertical"]

Shortcodes AAWP para título y enlaces

title
Sobrescribe el título original del producto:
[amazon link="B0863G2M7F" title="Apple MacBook Air de 13 pulgadas"]
title_length
Indica el número máximo de caracteres en el título:
[amazon link="B0863G2M7F" title_length="20"]
link_title
Sobrescribe el atributo «título» de la etiqueta HTML
[amazon link="B0863G2M7F" link_title="Compra Apple MacBook Air"]
link_type
Especifica el tipo de enlace dirigido a:
basic – reviews – cart
[amazon link="B0863G2M7F" title="cart" link_type="cart"]
link_icon
Especifica el tipo de logo a usar:
none – amazon – amazon-logo – cart
[amazon link="B0863G2M7F" link_icon="amazon-logo"]
link_class
Especifica la clase CSS del enlace:
[amazon link="B0863G2M7F" link_class="estiloenlace"]

Shortcodes AAWP para descripciones

description
Utiliza una descripción personalizada:
[amazon box="B0863G2M7F" description="Aquí tu texto personalizado."]
description_items
Indica el número máximo de items a mostrar:
[amazon fields="B0863G2M7F" description_items="3"]
description_length
Limita la longitud de la descripción hasta 255 caracteres:
[amazon fields="B0863G2M7F" description_length="120"]
description_text
Añade una descripción adicional a la de Amazon:
[amazon fields="B0863G2M7F" value="description" description_text="Aquí tu texto adicional"]

Shortcodes AAWP para imágenes

image
Muestra otra imagen de la galería:
[amazon fields="B0863G2M7F" value="thumb" image="6"]
image_size
Tamaño de la imagen (máximo 500px):
small – medium – large
[amazon fields="B0863G2M7F" value="thumb" image_size="large"]
image_align
Alineación de la imagen:
left – center – right
[amazon fields="B0863G2M7F" value="thumb" image_align="center"]
image_class
Especifica la clase CSS de la imagen:
[amazon fields="B0863G2M7F" value="thumb" image_class="estiloimagen"]

Shortcodes AAWP para botones

button_tex
Sobrescribe el texto del botón:
[amazon fields="B0863G2M7F" value="button" button_text="Echa un vistazo"]
button_detail_target
Se abre en una nueva ventana:
[amazon fields="B0863G2M7F" value="button" button_detail_target="_blank"]

Shortcodes AAWP para precio

price
Muestra el campo de precio:
[amazon fields="B0863G2M7F" value="price"]
prime
Muestra el logo Prime:
[amazon fields="B0863G2M7F" value="prime"]
amount_saved
Muestra la diferencia de precio:
[amazon fields="B0863G2M7F" value="amount_saved"]
percentage_saved
Muestra el porcentaje de descuento:
[amazon fields="B0863G2M7F" value="percentage_saved"]

Shortcodes AAWP para valoraciones

rating
Muestra las estrellas de las valoraciones:
[amazon fields="B0863G2M7F" value="rating"]
star_rating_size
Cambia el tamaño de las estrellas:
small – medium – large
[amazon fields="B0863G2M7F" value="rating" image_size="medium"]
reviews
Alineación de la imagen:
left – center – right
[amazon fields="B0863G2M7F" value="reviews"]
image_class
Especifica la clase CSS de la imagen:
[amazon fields="B0863G2M7F" value="thumb" image_class="estiloimagen"]

Modificación sobre las cajas de productos

Utilizando el producto de más arriba, añadiendo algunas variables de las tablas sobre el formato de caja (box) y usando el código CSS que adjunto más abajo, conseguimos este nuevo aspecto.

Modificacion de la caja de producto de AAWP
Formato de caja horizontal modificada
Vista vertical de la caja box de AAWP
Formato de caja vertical modificada

[amazon box="B0863G2M7F" title="Apple MacBook Air de 13 pulgadas" link_title="Comprar Apple MacBook Air" link_type="cart" link_icon="none" description_text="Disfruta de toda la potencia y belleza de Apple con la nueva versión de MacBook Air de 13 pulgadas y disco SSD ultrarrápido." image_size="large" image="3" button_text="Echa un vistazo" button_detail_target="_blank"]

Para añadir el código CSS, encontramos dentro de los ajustes del plugin, en la pestaña «Salida», una casilla donde podemos añadirlo para modificar el aspecto que tendrá nuestro producto.

Estos cambios se aplican a todos los productos que añadamos o que estén ya añadidos.

Casilla del plugin AAWP para añadir código CSS
Cambio de aspecto con CSS personalizado

Con ayuda del navegador para localizar las etiquetas CSS adecuadas, pegamos los cambios para personalizar el producto.

Este es el código que he aplicado para conseguir mi personalización.

Configurar un diseño propio con el plugin AAWP

Con el modelo anterior hay que respetar la posición de cada elemento, pero utilizando las variables por separado podemos colocarlos donde queramos.

Si combinamos este plugin con un framework de WordPress como Divi o Elemetor, la configuración es muy sencilla, ya que disponemos de módulos donde podemos combinar cada elemento del producto y manejarlos de forma visual.

Pero, aunque es aún un poco limitado, también podemos crear nuestra personalización con Gutemberg.

Bloques de Gutemberg y AAWP
Bloques de Gutemberg y shortcodes de AAWP

Los bloques utilizados son del tipo «HTML», donde se han ido añadiendo los shortcodes del plugin AAWP dentro de una capa «div», con una clase (class) que identifica cada elemento para luego añadir un código CSS.

Una vez elegidas las variables a utilizar del plugin AAWP, se agrupan todos los bloques y se aplica una clase principal que he llamado «productonuevo».

El código CSS utilizado para dar un aspecto personal es el siguiente:

Y conseguimos un resultado como este:

Resultado personalizado del plugin AAWP
Resultado personalizado del plugin AAWP

Por esto y por algún detalle más me encanta este plugin, llevo usándolo desde hace años y lo recomiendo por encima de otras opciones.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

7 Comentarios

  1. Quierounjardin

    Gracias por el post! Es de gran ayuda y utilidad. En mi caso tengo un problema, que no aparecen los logos de amazon y de prime a pesar de estar por defecto en la pestaña salida del dashboard… No se si será por algún tema de incompatibilidad con el theme que usamos (Orbital Theme).
    Gracias de antemano. Saludos!

    Responder
    • Juan

      Hola Quierounjardín,

      El tema que esrás utilizando es un tema optimizado para SEO, donde se han eliminado muchas cosas que su desarrollador RF no consideraba necesario. Desconozco como funciona el tema, pues considero que la mejor forma de posicionar es ofrecer un buen contenido único y que aporte valor. El resto ayuda, pero no sirve si ofreces lo mismo que otras mil personas.

      En tu caso probaría varias cosas para saber el problema que lo genera, instalar el plugin en un tema diferente en una instalación local, desactivar el resto de plugins y comprobar que no interfieren con AAWP, reinstalar el plugin desde cero y por último consultar al soporte de Orbital Theme, que es un tema premium y pagas precisamente para que te ayuden.

      Responder
      • Richard

        Hola! Tenía el mismo problema descrito y además también uso Orbital, probé con otro tema y ahora si me muestra los iconos de amazon y de Prime. Tu artículo me fue de mucha ayuda y adicionalmente encontré la solución en los comentarios. ¿Qué tema gratis puedes sugerir? Mil gracias y saludos.

        Responder
        • Juan

          Hola Richard,

          Parece que este problema se repite mucho con el tema Orbital últimamente, es preocupante cuando en principio se creó para generar ingresos con Adsense y afiliación.

          Como temas alternativos que estén bien optimizados puedes probar Astra, su versión gratuita la puedes instalar desde el mismo WordPress. También puedes probar Sydney que utiliza Elementor para construir páginas.

          Responder
  2. Emili

    Como siempre Juan, tu información va más allá de la que ofrecen el resto de webs con sus tutoriales.
    Muchas gracias! Eres una gran ayuda!

    Respecto a AAWP y sus posibilidades, me pregunto si hay algún modo de añadir la opción «Mejores Ofertas» de cualquier familia de producto, como hacemos con «Los mas vendidos» con la opción Betsellers.
    Lo he intentado pero no veo la opción.

    Ya me dirás sí se puede.

    Saludos y mucha Salud!!!

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido