Uno de los elementos que nos ayudan a maximizar nuestra tienda online con Woocommerce es la posibilidad de incluir Shortcodes para mostrar los productos que queremos en cada momento.
¿Qué son los shortcodes?
Los shortcodes son códigos cortos que se utilizan en WordPress, para mostrar cierta información de forma sencilla en páginas, entradas o Widgets.
Estos shortcodes habitualmente están ligados a los plugin que estamos utilizando.
Shortcodes de Woocomerce
En este caso, los shortcodes de Woocommerce hacen que mostremos los productos o la información de Wocoommerce que necesitamos en cada lugar.
Shortcodes Básicos de Wocoommerce
Cuando creamos una tienda online con Woocommerce, por defecto nos crea cuatro páginas en las que automáticamente nos inserta un código corto en cada una:
Mi Cuenta
En la página de Mi Cuenta el usuario podrá ver toda la información de su cuenta, sus pedidos, direcciones, etc…
Para que esta página se muestre correctamente debe de contener el shortcode:
[woocommerce_my_account]
Esta página habitualmente se crea de forma automática durante el proceso de configuración de Woocommerce. Y en la sección de pedidos por defecto aparecerán los últimos 15 pedidos, si queremos que se muestre otro número de pedidos, tan sólo debemos indicarlo de la siguiente forma:
[woocommerce_my_account order_count="20"]
Si queremos que se muestren todos los pedidos, debemos indicar -1 en lugar del número exacto.
Carrito
En la página del carrito los clientes podrán ver un resumen de su pedido, incluir cupones de descuento e incluso calcular los gastos de envío si lo hemos configurado correctamente.
Para que esta página se muestre correctamente debe de tener el shortcode:
[woocommerce_cart]
Esta página habitualmente se crea de forma automática durante el proceso de configuración de Woocommerce.
Finalizar Compra
En la página de Finalizar Compra los usuarios realizarán todo el proceso de compra, introducir sus datos personales para la facturación y para el envío, elegirán el método de pago y realizarán la compra como tal.
Para mostrar correctamente esta página debe de contener el shortcode:
[woocommerce_checkout]
Esta página habitualmente se crea de forma automática durante el proceso de configuración de Woocommerce, en caso de no ser así además de crear la página desde la sección de ajustes de Woocommerce debemos indicar qué páginas son las que estamos destinando a cada finalidad.
Seguimiento de pedidos
Muy útil sobre todo si vamos a ofrecer a nuestros clientes la compra como invitados. Ya que no crearán una cuenta en nuestra tienda online y a través de esta página verán el estado de sus pedidos.
En esta página solicitaremos al cliente el id del pedido y el correo electrónico con el que ha realizado dicho pedido. Tras enviar estos datos verá automáticamente cuál es el Estado de su pedido.
Para que pueda verlo correctamente debemos recordar modificar los estados de los pedidos según los vayamos tramitando. De esta forma también recibirán correos electrónicos informando del estado en cada momento.
Para mostrar esta página debemos introducir el shortcode:
[woocommerce_order_tracking]
Esta página suele crearse de forma automática con la configuración de Woocommerce, si no es así y has activado los pedidos como invitado, puede resultarte interesante crearla.
Shortcodes útiles para Woocommerce
Además de estos shortcodes básicos que vimos, woocommerce ofrece miles de combinaciones de shortcodes con los que podemos mostrar prácticamente cualquier cosa… Un producto concreto, una selección de productos en oferta o de productos destacados…
Con estos Shortcode podemos jugar como queramos para mostrar en nuestra tienda online, los productos que queramos donde queramos.
Los podemos insertar en páginas, en entradas o en widgets y con ello crear espacios adecuados para cada situación.
Páginas de Productos
Si queremos mostrar en una página una selección de productos agrupados según nuestras necesidades, debemos de utilizar el shorcode:
[products]
Al que vamos a añadir atributos para mostrar lo que necesitamos en cada situación.
Algunos ejemplos:
Página de Productos en Oferta
[products on_sale="true" ]
Podemos además añadir el número de productos en oferta a mostrar :
[products limit="28" on_sale="true" ]
E incluso el número de columnas en que debe mostrarse:
[products limit="28" columns="4" on_sale="true" ]O el orden en que queremos que se muestren:
[products limit="28" columns="4" orderby="rand" on_sale="true" ]
Página de Productos Más Vendidos
[products best_selling="true" ]
Podemos además añadir el número de productos más vendidos a mostrar :
[products limit="28" best_selling="true" ]
E incluso el número de columnas en que debe mostrarse:
[products limit="28" columns="4" best_selling="true" ]O el orden en que queremos que se muestren:
[products limit="28" columns="4" orderby="popularity" best_selling="true" ]
Página de Productos Destacados
[products visibility="featured" ]
Podemos además añadir el número de productos en oferta a mostrar :
[products limit="28" visibility="featured"]
E incluso el número de columnas en que debe mostrarse:
[products limit="28" columns="4" visibility="featured" ]O el orden en que queremos que se muestren:
[products limit="28" columns="4" orderby="date" visibility="featured" ]
Atributos disponibles
Para crear nuestra página personalizada podemos usar todos los atributos que necesitemos dentro del shortcode dentro de los disponibles:
limit="número"
Indicamos el número de productos a mostrar . Si indicamos -1 mostrará todos los productos que cumplan los requisitos del resto de atributos.
columns="5"
Indicamos el número de columnas en el que aparecerán los productos.
paginate="false"
Indicamos «true» o «false» en función de si queremos o no que los productos se separen en páginas.
orderby="date"
Marcamos el orden en el que deben de mostrar se los productos. Las opciones disponibles son:
- «date» – La fecha de publicación
- «id» – Por el id del producto
- «menu_order» – El orden en el menú, si está definido.
- «popularity» – Por el número de ventas.
- «rand» – Orden aleatorio, cada vez se muestra en un orden diferente. Dependiendo de la configuración de la caché esta opción puede no funcionar correctamente.
- «rating» – Por las valoraciones del producto.
- «title» – Por el nombre del producto.
skus="152-T,256-S"
Listado de SKU o Códigos de Referencia de los productos que vamos a mostrar. Si queremos que se muestren solo una serie de productos, podemos identificarlos por la referencia de producto o SKU y podemos incluir todos los que necesitemos separados por coma.
category="ropa-mujer"
Podemos restringir que los productos que aparezcan en la página que estamos creando pertenezcan sólo a una categoría concreta o a varias. Si son más de una debemos de separarlas con comas. Para indicar la categoría debemos introducir el slug (trocito de url que identifica a la categoría).
order="ASC"
Marcamos el orden (ascendiente o descendiente) en el que se deben de mostrar los productos. Por defecto es ascendente, podemos indicar «ASC» para ascendente y «DESC» para descendente.
class="mi-clase-personalizada"
Para añadir nuestro estilo personalizado a través de CSS a la página que estamos creando, podemos añadirle una clase personalizada para luego darle forma en nuestra hoja de estilos.
on_sale="true"
Para mostrar los productos en oferta en nuestra tienda online. Marcaremos «true» para mostrarlos y «false» para no mostrarlos». No se puede usar junto con best_selling y/o top_rated.
best_selling="true"
Para mostrar los productos más vendidos. Marcaremos «true» para mostrarlos y «false» para no mostrarlos». No se puede usar junto con on_sale y/o top_rated.
top_rated="true"
Para mostrar los productos mejor valorados. Marcaremos «true» para mostrarlos y «false» para no mostrarlos». No se puede usar junto con on_sale y/o best_selling.
attribute="color"
Para mostrar los productos que tienen el atributo disponible
terms="rojo,azul,verde"
Se utiliza junto con atribute, para mostrar todos los productos que cumplen los términos de ciertos atributos. En este ejemplo los que son de color rojo, azul o verde.
terms_operator="AND"
Indicamos la forma en la que se comparan los términos de los atributos:
- «AND» – Muestra productos de todos los atributos seleccionados.
- «IN» – Muestra productos con el tributo seleccionado. (Este es el valor por defecto)
- «NOT IN» – Muestra los productos que no estén entre los atributos seleccionados.
visibility="catalog"
Para mostrar los productos que tengan un tipo de visibilidad específica:
- «visible» – Productos visibles en la tienda y en los resultados de la búsqueda. (Esta es la opción por defecto)
- «catalog» – Porductos visibles en la tienda, no en los resultados de la búsqueda.
- «search» – Productos visibles solo en los resultados de la búsqueda.
- «hidden» – Productos ocultos, solo accesibles mediante su url directa.
- «featured» – Productos marcados como destacados.
category="ropa-de-mujer"
Muestra los productos incluidos dentro de una o varias categorías. Debemos de incluir el SLUG de cada categoría separados por comas.
cat_operator="NOT IN"
Indicamos la forma en la que se comparan las categorías para mostrar los productos en el listado.
- «AND» – Muestra productos de todas las categorías seleccionadas.
- «IN» – Muestra productos de la categoría seleccionada. (Este es el valor por defecto)
- «NOT IN» – Muestra los productos que no estén en la categoría seleccionada.
ids="35,65,50"
Indicamos los id de los productos que queremos mostrar separados por comas. Si queremos mostrar unos productos concretos, solamente tenemos que buscar su id e incluirlo aquí.
Página de Producto
Si queremos mostrar un producto concreto en una página, entrada o widget, podemos usar un shortcode específico. Mostraremos la página completa del producto con toda la información de este. Y podemos seleccionar el producto que queremos mostrar, o por su id o por su sku o referencia
[product_page id="250"] [product_page sku="RS-5683"]
Productos Relacionados
Por defecto las páginas de producto traen los productos relacionados en el final de la página. Pero si además queremos mostrarlo en otro sitio de la página de producto podemos incluir un shortcode en el que podemos indicar el número de productos a mostrar, las columnas que queremos y el orden en el se van a mostrar.
Por ejemplo:
[related_products per_page="5" orderby="date" columns="5"]
Precio y Botón de Añadir al Carrito de un producto
Esto es muy útil si estamos creando una página de venta personalizada para un producto o servicio y no queremos integrarlo dentro de la tienda online, si no que queremos establecer una página de venta específica, que puede ser una landing page o página de aterrizaje para promocionar nuestro producto en Publicidad de pago o Redes sociales.
Seleccionamos el producto del que queremos que aparezcan los datos por su ID o por su SKU (Referencia de Producto).
[add_to_cart id="250"] [add_to_cart sku="SG-256984"]
Podemos añadirle style para darle un estilo propio al botón o podemos darle una clase para establecer los estilos en nuestra hoja css.
URL para Añadir al carrito
Si lo que queremos es hacer nuestro propio diseño completo de la página de venta que estamos creando este Shortcode es muy útil, porque al insertarlo devuelve la url de añadir ese producto directamente al carrito.
Así creamos nuestro propio botón con nuestro texto y la información que queramos, ponemos este shortcode y directamente cuando alguien pinche le introduce ese producto en el carrito.
Podemos seleccionar el producto por id o sku.
[add_to_cart_url id="250"] [add_to_cart_url sku="DS-256874"]
Mostrar Notificaciones en Páginas que no están dentro de la estructura de Woocommerce
Si quieres que las notificaciones de Woocommerce, como «Tu producto se ha añadido al carrito» se muestren en páginas que no estén dentro de la estructura de Woocommerce, puedes añadir el shortcode:
[shop_messages]
Así en páginas como la que comentábamos en el punto anterior, que son páginas venta de productos, pero creadas fuera de la estructura de Woocommerce aparecerán estos mensajes que ayudarán al comprador a saber que su producto o servicio ya está en el carrito.
Personalmente utilizo mucho estos shortcodes en las tiendas online con Woocommerce, porque me parece una forma sencilla y útil de mostrar en cada lugar lo que queremos destacar.
Espero que para tí también sean muy útiles!