Shortcodes de woocommerce: Como usarlos

Los shortcodes Woocommerce son muy importantes para poder crear páginas estáticas y de esta forma mostrar el contenido a modo de tienda online. Yo lo utilizo mucho a la hora de crear Landing pages de e-commerce muy optimizadas. Son muy recomendables. Consigues darle dinamismo y freshess a tu página web estática.

Un shortcode tiene esta forma: [shortcode]

Puntos importantes:

  1. hay que tener instalado woocommerce.
  2. Yo recomiendo insertarlos en la vista HTML para evitar que codigo de formato se te pueda colar si usas la vista visual del editor de WordPress. A veces se te cuelan dentro de un <pre> <span> <div> Y el shortcode no funciona igual.

Shortcodes Woocommerce:

1. Página de Checkout y Página de carrito

[woocommerce_checkout]
[woocommerce_cart]

Muestran el contenido de las páginas checkout y carrito en cualquier página, yo lo he usado a veces para crear una one page checkout combinando ambos shortocodes en la misma página, ojo esto no es tan fácil y requiere de retocar código y css así como de testear ya que puede dar problemas, pero en muchos casos yo lo he implementado con éxito.

2. Mostrar productos individuales y los productos de una categoría concreta.

Para mí esta es la parte más importante de los shortcodes de woocommerce, permite crear landings muy dinámicas y atractivas para la venta en un e-commerce. También se pueden utilizar para los TSA de Romuald Fons.

Hay mucha varedad entre los shortcodes que te ayudan a mostrar los productos como te convenca, vamos a ver las más comunes y usadas:

a. Mostrar un producto.

Para hacer esto necesitamos o bien el id del producto (puedes verlo en el backend de woocommerce) o el SKU que es la referencia que identifica de forma única el producto.

ID ejemplo: [product id=»1234″]
SKU ejemplo: [product sku=»REF001″]


b. Mostrar varios productos eligiendo cuales mostrar.

Este shortcode también funciona con los campos ID y SKU y te permite crear una lista de productos elegida por ti. El aspecto de la lista depende del tema que uses. Has de separar cada producto con comas.

ID ejemplo: [products ids = «1, 2, 3»]
SKU ejemplo: [products skus = «REF001, REF002, REF003»]


c. Mostrar los productos destacados

Como sabrás woocommerce te permite seleccionar una serie de productos destacados, normalmente se utiliza para los productos que están en temporada y es muy común usarlo en la home de tu tienda online. Con este shortcode puedes añadirlo a la página que desees.

Para ello usamos el shortcode [featured_products]  además se puede configurar con los argumentos  per_page y columns. Para adaptarlo al layout de tu tienda eligiendo así cuantos productos mostrar y en cuantas columnas hacerlo.

Para usarlo

ejemplo: Mostrar 15 productos destacados en 3 columnas

[featured_products per_page=»15″ columns=»3″]


d. Mostrar los productos nuevos

Si lo que quieres es mostrar las novedades de tu tienda puedes hacerlo sencillamente gracias al siguiente shortocde [recent_products] además admite configurarlo con los argumentos: per_page y columns. Para adaptarlo al layout de tu tienda eligiendo así cuantos productos mostrar y en cuantas columnas hacerlo.

ejemplo: Mostrar los últimos 30 productos de tu tienda en 3 columnas

[recent_products per_page=»10″ columns=»3″]


e. Mostrara una página de producto completa

Es como mostrar una pagina de producto completa, puedes mostrar un producto utilizando su ID de wordpress o su SKU.

ID ejemplo: [product_page id=»25″]

SKU ejemplo: [product_page sku=»25″]


f. Mostrar una categoría de productos completa

Puedes mostrar todos los productos de una categoría completa. Usando el shortcode:  [product_category] . Puedes configurar el shortcode con los siguientes 5 argumentos:

  • per_page – número de productos a mostrar.
  • columns – número de columnas en el que mostrar los productos.
  • orderby – Ordenar por titulo, fecha, precio…
  • order – Orden descendente o ascendente (de mayor a menor o de menor a mayor).
  • category – Categoría de producto de la cual que quieres mostrar sus productos. Usar el nombre del Slug de la categoría para que funcione.

ejemplo: Mostrar 16 productos de la categoría portátiles ordenados por fechas, de menor a mayor y mostrado en 4 columnas.

[product_category category=»portatiles» columns=»4″ per_page=»16″ orderby=»date» order=»asc»]


g. Mostrar los productos mejor vendidos

Mostrar los productos más vendidos.  Puedes mostrarlos con el shortcode [best_selling_products] Además acepta el argumento per_page para elegir cuantos productos mostrar.

ejemplo: Mostrar los 15 productos mejor vendidos de tu tienda online

[best_selling_products per_page=»15″]


h. Mostrar los productos en oferta

[sale_products] – Mostrará los productos en oferta de tu tienda. Acepta 4 argumentos para personalizarlo.

  • per_page
  • columns
  • orderby
  • order

Ejemplo: mostrar 20 productos en oferta ordenados por titulo en orden descendiente y mostrado en 2 columnas

[sale_products per_page=»20″ orderby=»title» order=»desc» columns=»2″]


4. Botón de Añadir al carrito y URL

Éste es un shortcode muy importante, puede ayudarte a personalizar el estilo del botón de añadir al carrito e incluso utilizarlo para hacer test A/B con una landing page y luego aplicarlo al sitio completo…

Puedes colocarlo en Posts o en páginas de tu sitio  para optimizar el proceso de venta o generar ventas en los post del blog de tu tienda online.

Utilizaremos el shortcode [add_to_cart] que permite el uso de 3 argumentos: id, style y sku.

Ejemplo: Mostrar el botón de añadir al carrito el producto con ID 25 con los siguientes estilos css {border:2px solid #ccc; background:#999; color:#000; 12px;}

[add_to_cart id=”25″ style=”border:2px solid #ccc; background:#999; color:#000; 12px;” sku=”pro”]

 

Al hacer click el producto automáticamente será añadido al carrito de la compra.

seo en wontalia

9 Comments

  1. mauro marzo 27, 2017 Responde
    • Miguel Ángel marzo 29, 2017 Responde
  2. Miguel abril 10, 2017 Responde
    • Miguel Ángel abril 20, 2017 Responde
  3. mara junio 1, 2017 Responde
    • Miguel Ángel junio 1, 2017 Responde
  4. juan abril 19, 2018 Responde
    • Miguel Ángel mayo 30, 2018 Responde
  5. Tommy diciembre 9, 2018 Responde

Leave a Reply

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