Los códigos cortos de WooCommerce son las etiquetas con las que puedes añadir cualquier parte de tu tienda donde quieras. [woocommerce_cart], [woocommerce_checkout], [woocommerce_my_account] y [woocommerce_order_tracking] para páginas completas, y [products], [product_category] o [product_categories] para listados. Estos últimos aceptan parámetros como limit, columns, orderby, category, ids o on_sale para personalizar qué productos se muestran.
Los códigos cortos juegan un papel importante tanto en WordPress como en WooCommerce.
Existen códigos cortos en la documentación de WooCommerce los cuales podemos usar para cargar ciertos elementos de la tienda donde queramos. De hecho, usando estos plugins y los constructores de páginas adecuados, podemos personalizar el diseño de nuestros sitios web de una manera enorme.
Mientras que las principales plataformas de creación de páginas han comenzado a utilizar widgets y bloques nativos en lugar de los shortcodes de WooCommerce, los shortcodes todavía van a ofrecer más flexibilidad y van a llegar más lejos cuando los uses.
En efecto, me gusta usar códigos cortos junto con los widgets de Dynamic.ooo o eAddons. Esto hace que mi trabajo sea flexible cuando trabajo con plantillas y posicionar elementos en la página dinámica.
En esta entrada vamos a ver los códigos cortos de WooCommerce que vienen en su núcleo y que están documentados en su sitio web, aunque voy a intentar explicarlos en español ;).
Shortcodes de página de WooCommerce
Estos códigos cortos se usan para páginas enteras. Sin embargo, mientras que en algunos casos se pueden usar junto con un lateral u otra cosa, estos códigos cortos de WooCommerce están hechos para ser usados para crear páginas.
Shortcode de carrito o cart de WooCommerce
Empezamos por los más simples.
La página de tu sitio web donde quieras que aparezca el carrito debe tener este código corto:
[woocommerce_cart]
Esto es para una página completa, lo que significa que no se pretende colocar el carro en una región de una sola página sino más bien insertarlo dentro de una página completa del sitio web.
Shortcode de checkout o finalizar venta en WooCommerce
Otro código corto extremadamente simple que se utiliza para agregar la página de pago o la página final de la compra a una página en particular.
[woocommerce_checkout]
Este código corto es similar al anterior ya que funciona solo en una página, la página de pago o de «pago» que ya hemos configurado o que tendremos que configurar en la configuración de WooCommerce.
Shortcode de «Mi cuenta» en WooCommerce
Y este código corto te permite mostrar la página «Mi cuenta». Al igual que los demás códigos cortos de los que hemos hablado, este también es un código corto de página, no un código corto de bloque.
Por otro lado, este es el primer código corto donde tenemos argumentos.
[woocommerce_my_account]
Tenga presente que el código corto obtiene el ID del usuario actual y recupera sus detalles, por lo tanto no puede funcionar si el usuario no está autenticado.
Shortcode de tracking de pedido
Siempre ha existido en WooCommerce una opción que permite a un usuario rastrear un pedido usando el número del pedido.
Todo lo que tienes que hacer para ponerlo es escribir este código corto:
[woocommerce_order_tracking]
El siguiente código corto funciona para una página, similar a los demás pero he encontrado que también puede funcionar para otros sitios web también.
Shortcodes de producto de WooCommerce
Los códigos cortos se usan para mostrar los productos en el frente de la tienda web. Lo bueno de los códigos cortos es que son muy flexibles porque se pueden usar para mostrar un producto específico o una lista de productos con atributos particulares.
[products]
El shortcode de WooCommerce para agregar productos es bastante básico como se puede ver aunque existen formas de personalizarlo.
Un código corto para un producto de WooCommerce podría ser:
[products limit=»4″ columns=»4″ orderby=»popularity» class=»quick-sale» on_sale=»true» ]
Nuestra experiencia en la web en el lado del cliente sería esta:
La apariencia depende del theme que uses.
Esto es solo un ejemplo y los parámetros que se pueden usar para el código corto del producto son:
- limit: Límite de productos a mostrar. Si quieres mostrar todos los productos, debes poner «-1».
- columns: Esto es solo visual, son las columnas en las que se mostrarán los productos.
- paginate: Se puede poner «true» o «false» en función del parámetro limit.
- orderby: Nos permite definir el orden de los productos en función de distintos parámetros.
- skus: Separados por comas, podemos poner los «sku» de los productos específicos que queremos mostrar.
- category: Podemos listar, separadas por comas, las categorías de los productos que queremos mostrar.
- tag: Lo mismo que la anterior, pero para las etiquetas.
- order: Podemos definir ASC o DESC en función de si el orden del «orderby» debe ser ascendente o descendente.
- class: Nos permite añadir al elemento del front-end una clase para darle forma a la apariencia con CSS fácilmente.
- on_sale: Nos permite listar los productos en oferta, pero no se puede usar con los parámetros «best_selling» o «top_rated».
- best_selling: Si ponemos «true», muestra los productos más vendidos. El límite lo pone el parámetro «limit».
- top_rated: Si ponemos «true», muestra los productos mejor valorados. El límite lo pone el parámetro «limit».
- attribute: Nos permite hacer un listado con los productos relacionados con un determinado atributo de producto.
- terms: Nos permite mostrar los productos relacionados con el valor de un atributo.
- terms_operator: Nos permite utilizar una serie de operadores para comparar valores de atributos.
- tag_operator: Nos permite utilizar una serie de operadores para comparar valores de etiquetas.
- visibility: Nos permite listar productos en función de su configuración de visibilidad.
- category: Nos permite mostrar los productos de una determinada categoría.
- tag: Nos permite mostrar los productos de un tag determinado.
- cat_operator: Nos permite usar operadores para comparar categorías.
- ids: Nos permite listar, con comas, IDs de posts relacionados con productos que queramos mostrar en el front-end con el shortcode.
- skus: Lo mismo que con las IDs pero con los SKU de producto.
El tema de los parámetros de los códigos cortos puede parecer complicado pero simplemente es cuestión de acostumbrarse a ellos.
Dado que no había constructores de páginas ni editores visuales en WordPress, usamos códigos cortos donde podíamos sacar los datos hacia el frente muy fácilmente, aunque después tuvimos que darle estilo con Hojas de estilo en cascada en la mayoría de los casos. Ahora todo eso se ha vuelto muy sencillo.
Shortcodes de categoría en WooCommerce
Existen dos códigos cortos de categorías en WooCommerce y ambos tienen su propio propósito.
Por un lado, si usted desea listar productos para una categoría en particular, puede usar este código corto:
[product_category]
[product_categories]
En ambos casos son códigos cortos con parámetros. Aquí están los parámetros que puedes usar en estos dos códigos cortos de WooCommerce:
- ids: Podemos listar las categorías cuya ID coincida con estas. Podemos meterlas separadas por comas.
- limit: Permite especificar el límite de categorías que se van a mostrar al insertar el shortcode.
- columns: Nos permite indicarle al shortcode cuántas columnas saldrán a nivel visual.
- hide_empty: Nos permite ocultar las categorías vacías. Debemos poner «1» para activarlo y «0» para desactivarlo.
- parent: Nos permite mostrar las categorías hijas de una categoría padre, cuyo ID deberemos especificar.
- orderby: Nos permite ordenar las categorías que salen con el shortcode en función de su nombre, slug, id, etc.
- order: Podemos poner ASC o DESC para ordenar los resultados en ascendente o descendente al utilizar el parámetro «orderby».
Este es un ejemplo de cómo se pueden usar estos códigos cortos:
[product_categories number=»0″ limit=»10″ hide_empyy=»1″]
Son bastante fáciles de usar pero en ciertas situaciones hay que tener presente que los parámetros importan para evitar cargas innecesarias.
Shortcode de página de producto en WooCommerce
Es posible agregar una lista de productos para cualquier producto que esté listado en nuestro WooCommerce usando cualquiera de estos dos códigos cortos:
[product_page id=»99″]
[product_page sku=»FOO»]
Como puedes ver en un caso utilizamos el filtrado por número de identificación y en otro caso utilizamos el filtrado por número de SKU. Tanto el número de identificación como el número de SKU son únicos en el establecimiento.
Estos códigos cortos se usan muy poco pero puede haber ocasiones en las que necesites mostrar la página de tu producto en un lugar en particular. Pero recuerda… No crees contenido duplicado, es terrible para el SEO!
Shortcode de productos relacionados en WooCommerce
Para incluir un grupo de productos relacionados dentro de un diseño de producto el siguiente código corto funcionará:
[related_products]
Únicamente cuenta con los siguientes parámetros:
- limit: Nos permite indicar el límite de productos que se van a mostrar con el shortcode.
- columns: Podemos indicar el número de columnas en las que se mostrarán los productos al insertar el shortcode.
- orderby: Podemos escoger qué se empleará para ordenar los productos.
Aquí hay un ejemplo real de la aplicación de este corto código de WooCommerce:
[related_products limit=»3″ columns=»3″]
Entre todos los acortadores de código que tiene WooCommerce creo que este es uno de mis favoritos para usar en un ambiente real. Esto se debe a que la mayoría de los demás acortadores de código se pueden usar de otras maneras dependiendo del tema y del constructor visual. Sin embargo, me gusta el sistema de «productos relacionados» de WooCommerce.
Shortcode de «Add to Cart URL» en WooCommerce
Utilizando el código corto de «Agregar al Carrito» podremos crear un botón de «Agregar al Carrito» de nuestro producto elegido por su Identificador, es decir incluso una página de aterrizaje personalizada se puede crear sin una página completa del producto.
[add_to_cart id=»99″]
Permita algunos parámetros aunque la apariencia del botón dependerá mucho del tema elegido.
Aquí hay un ejemplo de uso de un código corto con sus atributos:
[add_to_cart_url id=»99″]
- id: Nos permite indicar el ID del producto que añadiremos al carrito.
- style: Podemos indicar algo de CSS entre comillas, aunque lo ideal es emplear una clase.
- sku: Podemos indicar el SKU para identificar el producto que añadimos al carrito.
- class: Podemos indicar una clase CSS para darle la apariencia visual al botón.
Shortcode de notificaciones de WooCommerce
Es muy interesante cómo funciona el código corto de Notificación de WooCommerce y sería muy perfecto para usar con constructores de páginas y creadores de páginas visuales.
[shop_messages]
Lo que hace el shortcode es que permite la visualización de mensajes de WooCommerce como «Producto agregado al carrito con éxito» en la interfaz web donde insertamos ese shortcode.
La gran ventaja de este shortcode es que se puede agregar en cualquier parte pero no en ventanas emergentes o elementos similares ya que no hay un disparador para activar el shortcode.
Este código corto es muy sencillo y no tiene ningún parámetro en absoluto y se puede incluir en cualquier página del sitio web, no solamente en las de la parte de WooCommerce del sitio.
Shortcodes de WooCommerce con Elementor Pro
Como ya he mencionado antes, los shortcodes han sido ampliamente utilizados en el pasado debido a la ausencia de constructores de páginas como Elementor Pro.
El primer constructor de páginas que introdujo los bloques de WooCommerce fue Visual Composer (anteriormente conocido como WP Bakery), pero no inmediatamente después de su lanzamiento. Después de algunos años se creó un plugin que incluía los widgets de WooCommerce para Visual Composer, fue entonces cuando las cosas cambiaron.
Dicho esto, debido a como está estructurado WooCommerce, vemos que cada vez que usamos un widget de WooCommerce el diseño insertado tiende a ser el mismo.
Elementor Pro ha agregado más widgets de WooCommerce en su versión 3.6 que en la versión 3.5. Sin embargo, existen varios plugins muy capaces como JetWoobuilder o WooLentor que podemos usar para darle una forma visual a nuestro sitio de WooCommerce y brindar a nuestros clientes una experiencia de usuario increíble.
La mejor manera de usar los constructores de páginas es utilizando los widgets y bloques específicos, pero en la mayoría de los casos podemos ir un paso más allá y usar los códigos cortos discutidos en este artículo.
Preguntas Frecuentes
¿Dónde puedo consultar la lista completa de shortcodes de WooCommerce?
El enlace correcto se proporciona en la documentación de WooCommerce, en la parte de los shortcodes. Aquí podrás encontrar shortcodes para el carrito, el pago, mi cuenta, pedidos y productos junto con sus atributos. Sólo ten presente que la lista varía de versión en versión, por lo tanto asegúrate de revisar la tuya antes de copiar algún código.
¿Los shortcodes de las reseñas de WooCommerce vienen incluidos por defecto?
3. No. No existe un código corto nativo disponible para mostrar solo las reseñas del plugin WooCommerce. El método tradicional es utilizar el código corto de pestañas o el código corto de producto que viene con las reseñas junto con la descripción del producto. Para un bloque separado de reseñas tienes que utilizar un plugin o una plantilla personalizada.
¿Cuántos shortcodes de WooCommerce son gratuitos y cuáles requieren extensión?
Los códigos cortos básicos, todos los cuales son gratuitos, incluyen carrito, pago, mi cuenta, pedidos y productos. Sin embargo, los códigos cortos para cosas como las suscripciones y los membresías se proporcionan a través de extensiones premium. Asegúrate de saber qué complemento respalda el código corto deseado antes de incluirlo en tu publicación/página.
