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.
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.
[amazon box="B0863G2M7F"]
[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" value="description" description_items="3"] |
| description_length |
| Limita la longitud de la descripción hasta 255 caracteres: [amazon fields="B0863G2M7F" value="description" 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.
[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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | .aawp .aawp-product--ribbon { background: #f5f5f5 !important; } .aawp-product--horizontal { font-size: 14px !important; line-height: 1.4 !important; border-top: 3px solid lime !important; border-bottom: 4px solid lime !important; border-left: none lime !important; border-right: none !important; } .aawp-product__ribbon { top: -3px !important; left: 0px !important; width: 150px; height: 40px; background: #001aff !important; text-align: center; font-size: 18px; padding: 7px 25px 7px 15px !important; border-radius: 0 0 100px 0; border-bottom: 3px solid lime; border-right: 3px solid lime; } .aawp-product--horizontal .aawp-product__image, .aawp-product__image-spacer { max-height: 300px !important; border: none !important; box-shadow: 0px 10px 20px rgba(0,0,0,0.3) !important; } .aawp-product__image-spacer { background-color: transparent !important; } .aawp-product__title { font-size: 28px !important; font-weight: normal !important; color: #000000; font-variant: all-petite-caps; line-height: 1em; text-align: center; border-bottom: 1px solid black !important; } .aawp-product__price--current { font-size: 30px !important; color: #db0505 !important; } .aawp-product__pricing { margin-bottom: 15px; } .aawp-button.aawp-button--amazon { border: none !important; border-radius: 0px; box-shadow: none; background: #27ae5f !important; color: #ffffff !important; text-transform: uppercase; } .aawp-button.aawp-button--amazon:hover { background: lime !important; color: black !important; } |
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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | .productonuevo { max-width: 720px; width: 100%; border-bottom: 2px solid lime; margin-bottom: 20px; background: #f1f1f1; } .productonuevo .tituloproducto { background-color: lime; padding: 10px; text-align: center; width: 100%; } .productonuevo .tituloproducto a { color: #000000 !important; text-transform: uppercase; } .productonuevo .imgproducto { margin: 10px 12px !important; } .productonuevo .imgproducto img { border: 3px solid lime !important; } .productonuevo .precioproducto { font-size: 30px; text-align: right !important; padding: 15px; } .productonuevo .botonproducto a { font-size: 20px; padding: 15px; } .productonuevo .textoproducto { font-size: 14px; text-align: left; margin-top: 15px; } |
Y conseguimos un resultado como este:
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.
La mejor forma de instalar WordPress en el ordenador con MAMP- Como activar "breadcrumbs" o migas de pan en Divi
- Cómo limpiar la base de datos de WordPress
- Dónde está el archivo .htaccess en mi servidor
- Como conseguir una lista de suscriptores para hacer email marketing
- Cómo crear un blog con el tema EXTRA de WordPress
Muchas gracias Juan, por este post tan completo y claro que has compartido. Un saludo.
Yo tengo la duda si para ser de Amazon afiliados es necesario poner o no lo típico de "ver en Amazon" o "Comprar en Amazon", según tengo entendido esto lo requiere Amazon para que la comisión sea legal, pero si que es cierto que veo muchos que ponen otras cosas, tal y como muestras en en este gran artículo. No sé si alguien puede resolverme esa duda. Un saludo.
Hola Eduardo,
No es necesario que aparezca la palabra Amazon en el botón, pero si tiene que quedar claro que cuando el comprador pique, sepa que va a ser redirigido a Amazon con un enlace de afiliado. Puedes poner una nota al pie de la página donde están los enlaces o productos, o añadir en el footer un párrafo informando que eres afiliado de Amazon. No está de más que en los textos legales, que toda web debe tener, también se indique esta condición de afiliado.
Muchas gracias, muy útil saber este detalle para poder diferenciarme mis webs de otras.
Hola! Me ha dejado de funcionar el aawp. No me muestra ningún producto. Parece que la api está conectada. No he generado ninguna venta en los últimos 45 días . Será por eso?
Es necesario tener siempre como mínimo 3 ventas en las últimos 30 días.
Muy buenas!
Esataba revisando los shorcodes (por enésima vez! 🙂 ) y he visto uno que no me ha funcionado. no sé si es una errata...
En el apartado de las descripciones, en description_items, pone:
[amazon fields="B0863G2M7F" description_items="3"]
A mi con ese código no me pinta nada. Lo he sustituido por:
[amazon box="B0863G2M7F" description_items="3"]
Y he ma funcionado perfectamente! 🙂
Por si ayuda!
Gracias por el blog, Juan!
Hola Jota,
Efectivamente el código está mal, primero hay que especificar el valor y luego añadir la propiedad. En este caso falta indicar sobre que valor hay que modificar los items a mostrar. Quedaría así
[amazon fields="B0863G2M7F" value="description" description_items="3"]
Aaaah! Vale vale! Perfecto!
Muchas gracias Juan! 🙂
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!
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.
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.
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.
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!!!
Hola Emili, hay una serie de variables que permiten filtrar los productos para mostrar sólo las ofertas. En este artículo lo explico. https://www.ingresosviaweb.com/productos-en-oferta-con-aawp/
Muy buena publicación. Aplicaré todos los detalles a ver si hay suerte.