Shortcodes de WooCommerce

En este tutorial veremos todos los shortcodes (códigos cortos) que WooCommerce trae por defecto, para qué sirven y cómo utilizarlos correctamente.

¿Qué son los shortcodes?

Por si no estáis familiarizado con los shortcodes, vamos a definirlos rápidamente. Un shortcode o código corto es simplemente una palabra entre corchetes, así:

  • [palabra]

En ocasiones el shortcode puede tener una etiqueta de abertura y de cierre, de este estilo:

  • [palabra] [/palabra]

Y en muchos casos también puede tener parámetros, así:

  • [palabra parametro1=”algo” parametro2=”algo más”]

La magia de esta palabra entre corchetes es que sólo debes escribirla en el editor de WordPress, y cuando alguien la mira en la web, automáticamente se convierte en otro contenido. Una imagen, un texto, un producto, un post, un bucle… cualquier cosa.

Por ejemplo, si yo escribo “nvideos” entre corchetes en el editor, esto se convierte en el número de vídeos que hay en mis cursos, o sea 3033.

1. Shortcodes de las páginas de WooCommerce

Estos 4 shortcodes son un poco especiales, porque coinciden con las 4 páginas que crea WooCommerce durante su proceso de instalación. Estos shortcodes suelen ser la única cosa que hay en cada una de esas páginas:

  • Tu carrito está vacío.

    Volver a la tienda

     – Muestra la página "Carrito".
     – Muestra la página de pago.

    Para hacer seguimiento de tu pedido, por favor introduce el ID de tu pedido en el cuadro de abajo y pulsa el botón «Seguir». Esto se envió en tu recibo y en el correo electrónico de confirmación que deberías haber recibido.

     – Muestra el estado del pedido.

    Acceder

     – Muestra la página "Mi Cuenta".

     

Como WooCommerce genera automáticamente estas páginas, lo más seguro es que no los tengamos que usar en la vida, pues una vez e ha establecido, no lo debemos tocar nunca más.

2. Shortcodes de productos de WooCommerce

Aunque WooCommerce ya tiene la página “tienda” en la que se muestran todos los productos, en algunas ocasiones queremos mostrar sólo ciertos productos en alguna página o entrada.

Empecemos por lo más fácil. Mostrar un producto en concreto, en cualquier página o entrada, con este shortcode:

  • 
    

     

Podemos indicar el producto que queremos mostrar tanto por su “id” como por su “sku”, por ejemplo:

  •  - Producto con el "id" 123
     - Producto con la referencia ref.abc

     

El shortcode nos muestra un producto

El shortcode nos muestra un producto con su imagen, precio y botón de añadir al carrito.

Esto mostrará sólo el producto en sí, pero si queremos podemos mostrar toda la página entera del producto, con el siguiente shortcode:

  •  - Página del producto con el "id" 123
     - Página del producto con la referencia ref.abc

     

Como veis, hasta el momento sólo hemos mostrado un producto, en singular. Pero también podemos mostrar un listado de productos. Para ello tenemos los siguientes shortcodes:

  •  - Listado de los 3 productos 123, 124 y 125.
     - Listado de los últimos productos.
     - Listado de productos destacados.
     - Listado de productos rebajados.
     - Listado de los productos más vendidos.
     - Listado de los productos mejor valorados.  - Listado de productos relacionados.

     

Con "recent_products" podemos ver los productos recientes

Con “recent_products” podemos ver los productos recientes

Aparte de los listados que nos propone WooCommerce, también podemos crear nuestros propios listados a partir de la clasificación que tenemos de categorías o atributos.

A nivel de categorías, podemos mostrar tanto los productos de una categoría, como las categorías en sí. Empecemos mostrando los productos de una categoría en concreto. Lo haremos con este shortcode:

  •  - Listado de productos de la categoría "Electrodomésticos".

     

Podemos mostrar los productos de una categoría en concreto

Podemos mostrar los productos de una categoría en concreto

Y si lo que queremos mostrar es un listado de las categorías de productos que tenemos en la tienda, podemos hacerlo con este otro shortcode:

  •  - Listado de las categorías de la tienda.

     

Con "product_categories" podemos mostrar todas las categorías de la tienda

Con “product_categories” podemos mostrar todas las categorías de la tienda

Otra forma de clasificar y mostrar los productos es a través de los atributos. Lo conseguiremos a través de este shortcode:

  •  - Listado de los productos de color negro

     

Todos los shortcodes de listados de productos tienen dos atributos muy interesante llamados “orderby” y “order”:

  • El atributo “orderby” nos permite indicar el criterio con el que queremos ordenar los productos. Tenemos las siguientes opciones:
    • menu_order: El número que se ha elegido en la ficha de producto
    • title: El nombre del artículo, alfabéticamente
    • date: La fecha de publicación del producto
    • rand: Orden aleatorio
    • id: El identificador del producto
  • El atributo “order” nos permite elegir entre ordenar de forma ascendente o descendente el criterio anterior.
    • asc: Orden ascendente
    • desc: Orden descendente

Vemos algunos ejemplos:

  • : Mostrará los productos de la categoría "ropa" ordenados por fecha, desde los más antiguos a los mas nuevos.
    : Mostrará los productos más vendidos en orden aleatorio.
    : Mostrará los productos más recientes ordenados inversamente por su nombre.

     

3. Shortcodes de carrito

Finalmente, tenemos los shortcodes de carrito. Estos son muy interesantes, porque nos permiten crear el típico botón de “Añadir al carrito” para cualquier producto. Tenemos dos variaciones: Botón y URL.

  •  - Este shortcode mostrará un botón para añadir al carrito el producto 123, estemos dónde estemos.
     - Este shortcode mostrará una URL que si se visita, añadirá al carrito el producto 123.

     

El shortcode add_to_cart nos muestra un botón para añadir al carrito

El shortcode add_to_cart nos muestra un botón para añadir al carrito

Estos son estupendos para CTAs inline, ya que en cualquier artículo que escribamos de nuestro blog, podemos colocar un enlace que meta directamente cualquier producto en el carrito. Y eso es facilitar mucho el trabajo al cliente.

Shortcodes de WooCommerce
5 (100%) 1 vote

2019-02-18T17:44:44+00:00 enero 10th, 2019|Estrategias Webs|

Deja un comentario