Shortcodes en WooCommerce, ¿qué son y para que valen en tu tienda online?

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email
(Votos: 2 Promedio: 5)

Un concepto bastante importante en esta serie de artículos donde estamos aprendiendo a montar una tienda online con WordPress y WooCommerce, es el de los shortcodes.

No son específicos de WooCommerce, al contrario. Se pueden utilizar en cualquier instalación de WordPress.

Pero hay una serie de ellos que sí son propios de las tiendas online, y esos son los que te quiero mostrar hoy.

Te enseñaré qué es un shortcode, para qué valen, cuáles son los más interesantes en WooCommerce y cómo se insertan desde el editor de bloques Gutenberg y desde el constructor visual Elementor.

¿Qué es un shortcode?

Un shortcode no es más que un pequeño trozo de código que te permite añadir alguna funcionalidad específica a una parte de tu página web sin la necesidad de programarla cada vez que la necesites.

Es, en resumen, una herramienta que te permite ahorrar tiempo y simplificar el desarrollo de tus proyectos web.

Una vez programada esa funcionalidad, la podrás ejecutar las veces que quieras llamándola a través de un shortcode.

A la hora de insertarlo en tu editor de WordPress, un shortcode tiene una apariencia parecida a una etiqueta de HTML, con la diferencia de que va entre corchetes [ ] y no entre signos de menor-qué y mayor-qué <>.

La pinta de un shortcode es tal que así:

[shortcode]

O, si acepta parámetros, algo así:

[shortcode parametro1=”valor” parametro2=”valor”]

¿Cuáles son los shortcodes en WooCommerce?

Existen bastantes shortcodes en WooCommerce y muchos de ellos aceptan diferentes parámetros.

Los utilizamos para mostrar productos, listas de productos o páginas especiales que no podemos configurar directamente desde el personalizador de WordPress.

A continuación te muestro los que creo que son los más interesantes, pero puedes encontrar toda la documentación en la página de WooCommerce.

Shortcodes de página

Existen 3 shortcodes que es obligatorio situar en algún sitio de tu web para que el WooCommerce funcione correctamente.

Son el Carrito, el Checkout y Mi Cuenta.

Existe un cuarto que es opcional, que sirve para que tus clientes puedan hacer seguimiento de sus pedidos.

Por lo general se crean automáticamente a la hora de configurar tu WooCommerce, pero de no ser así (o de no querer que sea así), los tendrás que poner a mano.

Carrito

No tiene mucho misterio. Es el utilizado para mostrar el carrito y todos sus elementos. No tiene atributos.

[woocommerce_cart]

Checkout

El checkout es la página de pago. En ella tu cliente debe introducir sus datos y elegir el método de pago que más le convenga.

No tiene atributos.

[woocommerce_checkout]

Mi cuenta

Si tienes activada la posibilidad de que tus clientes se hagan una cuenta, a través de este shortcode podrán ver sus pedidos anteriores y actualizar su información.

Tiene un atributo, que te permite establecer cuántos pedidos anteriores se le van a mostrar. Por defecto está en 15. Debes indicar -1 si quieres que aparezcan todos.

[woocommerce_my_account order_count="-1"]

Seguimiento de pedidos

Puedes activar un formulario que muestra el seguimiento de los pedidos a tus clientes, ingresando los detalles de sus pedidos.

No tiene atributos.

[woocommerce_order_tracking]

Shortcodes relacionados con los productos

Antes de continuar te diré que algunas de las funcionalidades que hacen los shortcodes que te enseño a continuación las puedes añadir en formato bloque de Gutenberg. Pero no todos, por el momento.

Así que allí van.

Productos

El shortcode de productos es:

[products]

Es uno de los más completos. Permite listar productos por su ID, código SKU, categorías, etiquetas, etc.

Tiene múltiples atributos que pueden acompañar al shortcode, como por ejemplo:

  • Limit: indica el número de productos a mostrar.
  • Columns: indica el número de columnas a mostrar.
  • Orderby: ordena los productos según la opción indicada.
  • Category: indica las categorías de productos a mostrar
  • Etc.

Productos destacados

Muestra los productos que hayas marcado como destacados. El shortcode puede tener varios atributos y es de la siguiente manera:

[featured_products]

Aún que a partir de la versión 3.2 de WooCommerce, los productos destacados se pueden mostrar a través del shortcode general de productos junto a un atributo.

Sería de esta forma:

[products visibility=”featured”]

Productos Recientes

De igual manera se pueden mostrar los productos agregados recientemente. Puede tener varios atributos y mostraría de la siguiente manera:

[recent_products]

Aún así, posteriormente a la versión 3.2 de WooCommerce, los podrías mostrar como:

[products orderby = "id" order="DESC"]

Productos más valorados

Se podrían utilizar dos shortcodes para ello. Por un lado, uno específico y, si trabajamos con una versión de WooCommerce mayor que la 3.2, con el shortcode general de productos.

[top_rated_products]

ó

[products top_rated]

Productos más vendidos:

De igual forma que los anteriores, tiene dos maneras de mostrarse:

[best_selling_products]

ó

[products best_selling]

Productos por categoría

O bien puedes listar los productos que están en una misma categoría.

[products category=”nombre-de-categoria”]

Producto único

También existe un shortcode para mostrar un producto único, identificado por su ID o por su SKU.

[product id="número"]

Bloque de Shortcode. Shortcodes para WooCommerce y Gutenberg

Insertar un shortcode en el editor de bloques de WordPress Gutenberg es muy fácil, ya que existe un bloque específico que lo hace todo por nosotros.

Simplemente debes seleccionar el bloque shortcode y escribir dentro el que quieras utilizar.

Cómo insertar un shortcode en Gutenberg
Puedes añadir shortcodes con un bloque de Gutenberg

Shortcodes para WooCommerce en Elementor

En el constructor visual Elementor es parecido.

Existe un widget llamado Shortcode que simplemente debes arrastrar al lugar donde quieras que se muestre y escribir el shortcode en él.

Cómo insertar un shortcode en Elementor
En el constructor visual Elementor existe un widget que puedes utilizar

Conclusión

Hay algunos shortcodes más y, como habrás podido imaginar, muchísimas combinaciones gracias a los atributos.

Recuerda visitar la documentación de WooCommerce si quieres verlos todos.

Te he querido mostrar algunos de los más habituales y que conozcas su existencia, porque te pueden ser útiles en algunas situaciones.

Y tú, ¿los has utilizado alguna vez?

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

Los últimos artículos

Deja un comentario



2 comentarios

  1. Me ha parecido muy interesante el artículo. Yo utilizo los bloques de WordPress que hacen lo mismo que muchos shorcodes y se pueden utilizar para hacer tiendas online muy potentes. Mi pregunta sería de que como haces rtu las tiendas online, con shorcodes??!!!

    Responder
    • Muchas gracias por pasarte, Pedro. Pues las suelo hacer con GeneratePress + Elementor, mediante el constructor visual y las opciones que trae el tema. Aun así, también he probado construir la tienda con bloques de Gutenberg y la verdad que también se pueden hacer cosas muu chulas!

      Responder

· Descarga ahora la masterclass gratis ·

Las claves de una web profesional y rentable

Responsable:

Anxo Sánchez García (yo mismo).
Tlf: (+34) 678 373 399.
Email: info(@)anxosanchez.com.

Finalidad:

Gestionar, atender y responder las solicitudes de información o cualquiera comunicación hecha a través de este formulario.

Legitimación:

Consentimiento del usuario que hace uso de la herramienta.

Destinatarios:

Los datos que me envías están almacenados en los servidores de Raiola Networks. Puedes ver aquí  su política de privacidad.

Derechos:

Puedes acceder, rectificar y suprimir tus datos.

Más información:

Échale un vistazo a mi política de privacidad.

Anxo Sánchez en formato tablet