¿Has creado una tienda con WooCommerce y no se han creado automáticamente las páginas predeterminadas de la tienda (tienda, mi cuenta, finalizar compra y carrito)? ¿Tal vez las has eliminado por error? ¿Te gustaría administrar los productos de tu ecommerce con shortcodes específicos de WooCommerce? ¡Estás en el sitio correcto! Si te gusta el plugin para tiendas online WooCommerce tanto como a mí, estarás buscando la manera de mejorar todo lo que puedas la funcionalidad de tu tienda online. Por ello, en esta guía te muestro todos los shortcodes de WooCommerce y cómo utilizarlos.

shortcodes woocommerce codigos cortos tienda online wordpress como insertarlos

Estos códigos cortos de WooCommerce te ayudan a ahorrar tiempo, ya que te permiten mostrar productos y acciones específicas del comercio electrónico en cualquier sitio de tu página webblog o tienda online. De esta forma, sin necesidad de instalar plugins o saber de programación, tendrás un montón de posibilidades para aplicar ciertas funciones a tu ecommerce, haciéndola más atractiva y fácil de usar para tus clientes. Deja que te muestre la lista de shortcodes de WooCommerce.

Si miras tu sitio web te vas a dar cuenta que tal vez tienes contenido o acciones que se repiten en las páginas o entradas, quizá un botón de llamada a la acción, iconos de redes sociales para compartir tus entradas o estrellas de valoración al finalizar un artículo. ¿No sería genial poder insertar estos contenidos repetitivos de una manera rápida? Pues con los Shortcodes lo puedes hacer. Los shortcodes son códigos entre corchetes ([ ]) que permiten agregar funcionalidades de manera sencilla y se pueden utilizar en toda la web.

Todos los shortcodes tienen que llevar corchetes al principio y al final, su estructura se ve así [ejemploshortcode] a veces pueden tener etiqueta de abertura y de cierre [shortcode]ejemplo[/shortcode] y también puedes añadirles parámetros, por ejemplo [shortcode unparametro=”ítem” otroparametro=”otro ítem].

Existen muchos plugins que generan shortcodes como parte de su funcionalidad, uno de ellos es WooCommerce que viene con una serie de shortcodes que te facilitarán la vida, con estos códigos cortos puedes decirle a WooCommerce que muestre un elemento donde tú quieras. Por ejemplo, si escribiste un artículo en el blog de tu tienda online y quieres que en esa entrada se vean algunos de tus productos, los puedes insertar mediante shortcodes. Ahora que sabes lo que son y cómo funcionan, te explico cuáles son los más importantes que trae disponible el plugin WooCommerce y como los puedes usar.

Shortcodes de WooCommerce más importantes

WooCommerce tiene shortcodes por defecto que te ayudan con visualizaciones especiales para añadir en las diferentes secciones de tu tienda online. Estos códigos que te muestro a continuación son fáciles de utilizar, te recomiendo que los apuntes para que los tengas siempre a mano, así puedes personalizarlos ajustándolos a las necesidades que tengas en tu sitio web. Woocommerce trae consigo cientos de shortcodes al instalarlo, de los cuales nos podemos beneficiar para aplicar ciertas funciones sin necesidad de plugins o un maquetador visual en cualquier lugar de nuestra tienda online.

Shortcodes de las páginas de WooCommerce

Cuando instalas WooCommerce crea automáticamente cuatro páginas que serán esenciales para que tu tienda online funcione correctamente. Esas páginas son: tienda, mi cuenta, carrito y finalizar compra. Como WooCommerce genera automáticamente estas páginas, lo más seguro es que no los tengas que usar en la vida, pues una vez se ha establecido, no lo debemos tocar nunca más. En el caso de que el plugin no te haya creado estas páginas, tienes dos maneras de hacerlas: automáticamente o manualmente mediante shortcodes. Ya sea porque no se te crearon al momento de instalar WooCommerce o porque las eliminaste por error, puedes hacerlo a través de los siguientes shortcodes:

  • [woocommerce_cart]: Evidentemente su situación será en la página del carrito pero también puede ser interesante que lo presentes en algún lugar estratégico dependiendo de factores como tema o estructuras de desarrollo. Con este código corto puedes presentar el contenido del carrito, cupones y elementos o funciones relacionadas con el carrito o cesta de la compra. También muestra un enlace de retorno a la tienda.

  • [woocommerce_checkout]: El shortcode checkout se presenta en la página de pago de la tienda y facilita las funciones necesarias para ofrecer un proceso de pago a tu usuario, que se visualizará dependiendo de la configuración realizada en WooCommerce en relación a «finalizar compra». Puedes añadir cupones, una función extra que resultará interesante al comprador.

  • [woocommerce_order_tracking]: Código corto que facilita a tu usuario un formulario de acceso a los datos de seguimiento de sus pedidos. Para acceder, tu cliente tiene que ingresar en un campo el ID de pedido y correo electrónico de facturación que utilizó en el pago del pedido.

  • [woocommerce_my_account]: Con el shortcode de Mi Cuenta «woocommerce_my_account» puedes presentar una completa sección para que tus usuarios dispongan de un escritorio desde el que podrán acceder a sus pedidos, descargas, direcciones, detalles de la cuenta y un enlace para cerrar la sesión.

Shortcodes de producto de WooCommerce

El shortcode [products] es uno de los más completos y extensos de WooCommerce, utilizándolo así, mostrará una página con todos los productos que tengas, pero agregándole atributos te permite mostrar los productos por ID de publicación, SKU, categorías, atributos, con soporte para paginación, clasificación aleatoria y etiquetas de productos. Con estos parámetros conseguirás un montón de funcionalidades para los productos de tu tienda online. Aunque WooCommerce ya tiene la página «tienda» en la que se muestran todos los productos, en algunas ocasiones quieres mostrar sólo ciertos productos en alguna página o entrada.

  • [product id=»15″]: Este es uno de los más sencillo y utilizados con atributo, sirve para mostrar un producto específico al poner el número de su id (para ver el id de los productos ve a el panel de WooCommerce, productos y pasa el curso por encima) insertando este código te aparecerá el nombre, la imagen, el precio y el botón de compra.

  • [products skus=»ejemplo, ejemplo»]: Sirve para mostrar productos basados ​​en una lista de skus, separados por comas. Es muy útil cuando tienes gran cantidad de productos.

  • [product_page id=»1″]: El shortcode product_page te permite presentar una página del producto y es especialmente interesante para facilitar una zona de conversión con todos los detalles del producto. Se puede insertar por ID o SKU.

  • [products ids=”15, 16, 17″]: Separa las ids con comas, de esta manera puedes mostrar varios productos a la vez. Se mostrarán los 3 productos indicados

  • [recent_products]: El código corto de productos recientes «recent_products» es muy interesante para la maquetación de la portada porque permite mostrar los últimos productos publicados en la tienda. Muestra una lista de los productos más recientes, algo muy útil en la portada de la tienda.

  • [top_rated_products]: Con top_rated_products puedes presentar al visitante una lista de los productos activos mejor valorados por los usuarios.

  • [best_selling_products]: Los usuarios siempre quieren encontrar los productos más vendidos, enséñalos utilizando este código. De esta manera, puedes facilitar a tu usuario encontrar los productos que más le convenga comprar

  • [sale_products]: ¿Tienes productos en ofertas? Muéstralos con este shortcode. Es especialmente interesante para crear zonas de promoción.  Este shortcode nos muestra todos los productos con el precio rebajado.

  • [related_products]: Usa este shortcode si quieres que a tus clientes le parezcan productos similares al que está mirando. Esto facilita a tu usuario encontrar productos similares en el caso de que el que está buscando esté agotado.

Para clasificar los productos por categorías

Aparte de los listados que nos propone WooCommerce, también puedes crear tus propios listados a partir de la clasificación que tienes de categorías o atributos. Con los siguientes shortcodes puedes clasificar los productos por categorías, ya sea que muestres solo una página con una sola categoría o todas las categorías de tu sitio web, esto te ayudará a mantener tu tienda online ordenada y a que los clientes siempre encontrarán lo que buscan.

  • [product_categories]: El código corto product_categories es interesante para crear portadas o zonas, porque presenta las categorías de productos y te permite ordenar la estructura que se presenta tu visitante

  • [product_category category=”ejemplo”]: El código product_category es interesante porque nos permite presentar los productos de una categoría. Permite mostrar varios productos de una categoría por el slug de la misma.

Para clasificar los productos por atributos

Como mencionaba anteriormente puedes añadir atributos al shortcode [products] que te ayudan a clasificar tus productos. Presta atención porque puede parecer complicado, pero solo es cuestión de que estés atento. Mira la lista con todas las opciones que tienes para clasificar tus productos. Todos los shortcodes de listados de productos tienen atributos muy interesante llamados «orderby» y «order». Puedes utilizar también los siguientes atributios en tu tienda virtual sin instalar plugins o añadir código.

  • Limit: Indica el número de productos que se muestra. Por defecto muestra todos.

  • Columns: Número de columnas que se muestran. Por defecto es 4.

  • Orderby: Ordena los productos mostrados según la opción introducida. Se pueden pasar uno o más argumentos añadiendo ambos slugs con un espacio entre ellos. Las opciones disponibles son:

    Title: ordenar alfabéticamente por los nombres de productos.
    Date: se organiza por la fecha de publicación en el sitio web.
    Rand: los productos aparecerán de forma aleatoria.
    Id: Se ordenará el listado por el número de id de cada producto.

  • Order: Para clasificar los productos de manera ascendente o descendente.

Ejemplo: Quieres mostrar cuatro columnas en el inicio de tu tienda online con la categoría vestidos y ordenarlos desde los más recientes porque es una nueva colección, el shortcode que utilizas se ve así [products columns=»4″ category=»vestidos» orderby=»date»]. Como puedes ver el código corto incluye las columnas, la categoría y lo estás ordenando por fecha.

Shortcodes de carrito en WooCommerce

El plugin WooCommerce crea por defecto una página con el carrito de compra y corresponde al shortcode [woocommerce_cart], si no la creó o la eliminaste por error ya sabes que insertando este shortcode puedes tenerla otra vez, si quieres mejorar tu tienda online y hacer que el proceso de compra para tus clientes sea muy fácil, añade un botón de comprar a cualquier sitio de tu web utilizando los siguientes shortcodes:

  • [add_to_cart id=»15″]: Con add_to_cart puedes mostrar el precio de un producto junto a un botón de añadir al carrito, un producto por su ID. Cambia la ID de ejemplo por la ID del producto que quieras mostrar.

  • [add_to_cart_url id=»15″]: Este shortcode mostrará una URL que, si se visita, añadirá al carrito el producto.

Cómo insertar shortcodes en WordPress correctamente

¿Alguna vez ha visto un texto entre corchetes en WordPress? Entonces, has visto un shortcode. Ya sabes qué son y para qué sirven, añadirlos a tu sitio web es sencillo. Tienes tres opciones, los puedes agregar en páginas o entradas desde el editor WordPress que utilices, puedes añadirlos desde el área de widgets y por último instalando el WooCommerce shortcodes. A continuación voy a explicarte las opciones que tienes y tú decides con cual te quedas:

#1 Desde el editor WordPress

Instalar shortcodes puede parecer mucho más complejo de lo que es en realidad. La primera forma que tienes para añadir un Shortcode (y la más fácil) será entradas o páginas, si escribiste un artículo en tu blog y quieres insertar por ejemplo un producto en ese post, desde esa misma entrada añade un bloque de código y pega el shortcode que necesites. Si quieres añadirlo a una página, ve a tu editor visual de WordPress, añade un bloque de texto y en el pega el shortcode que quieras usar.

#2 Desde el área de widgets

Por defecto, cualquier texto que ingreses en el widget de texto pasa por los filtros de WordPress, los cuales no te permiten ejecutar shortcodes. Si te sientes cómodo añadiendo código a tu tema, puedes habilitar los códigos cortos para trabajar en los widgets de texto. Para ello ve al panel de administración “Apariencia” / Widgets en tu sitio web. Ahí elegirás el Widget de texto y añadirás el shortcode que quieras utilizar en tu tienda online. Visita tu sitio web para ver como funciona el código corto en el interior del widget de texto.

#3 Instalando un plugin

La última opción que tienes para añadir shortcodes, es instalando un plugin. Existen muchos plugins que añaden packs de shortcodes preconfigurados con los que puedes mejorar el aspecto de tu página web insertando nuevos elementos visuales. Los hay gratis y de pago, el más utilizado en este caso es WooCommerce shortcodes. Podrás encontrar más de 50 shortcodes preparados para optimizar tanto la estética como la funcionalidad de tu web. Este plugin añadirá una serie de botones a tu barra de herramientas que hará muy fácil insertar los shortcodes y sus modificadores.

Conclusión: Personaliza tu tienda con los shortcodes de WooCommerce

Como has podido comprobar WooCommerce tiene multitud de Shortcodes que te sirven para mostrar páginas, productos y botones de añadir al carrito donde quieras. Lo primero que debes hacer es conocer los shortcodes de WooCommerce, puedes hacer una lista y guardarlos para tenerlos siempre a la mano. Una vez hecho, el siguiente paso es practicar, úsalos en tu tienda online para que te familiarices con ellos, te ayudarán a horrar mucho tiempo al momento de agregar productos a tu negocio en Internet.

Los puedes añadir a tu tienda online en páginas o entradas desde el editor de WordPress que utilices, desde el área de widgets o instalando el WooCommerce shortcodes, a mí me gusta insertar los shortcodes directamente desde las entradas o las páginas porqué me parece la manera más fácil, ya que por lo general los constructores visuales traen un bloque para los códigos. Ahora te preguntas ¿Cuáles usar? pues eso depende de las necesidades te tengas en tu sitio web y de los contenidos que quieras agregar, yo te recomiendo que tengas siempre a mano el shortcode [products] con todos sus atributos, ya que es uno de los más completos de WooCommerce y si tienes una tienda online siempre te beneficiará resaltar y clasificar tus productos donde quieras.

¿Qué te ha parecido esta guía con los shortcodes de WooCommerce? ¿Conocías todas estas funciones? ¿Utilizas shortcodes y quieres contar tu experiencia? ¿Crees que me he dejado alguno? ¿Te has quedado con alguna duda o pregunta? Entonces te pido que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.

¿Te ha gustado el contenido?

Puntuación media 5 / 5. Votos: 856

¡Todavía no hay votos! Sé el primero en valorar el contenido.

También te puede interesar esta guía
tutorial wordpress

WordPress es, sin duda, una de las mejores plataformas para crear una página web, un blog o una tienda online para tu negocio, ya que es fácil de usar, flexible y ofrece muchas opciones para personalizarla de acuerdo a tus necesidades. Empieza con buen pie con WordPress, revisa esta completa guía y aprende a potenciar tu pagina webblog o tienda online WordPress desde el principio.

¿Te ha gustado? Comparte el contenido
Publicado por Ignacio Santiago

Soy muchas cosas, pero todo empezó como blogger hace más de 20 años. Desde ahí he ido ido creciendo como persona y profesional hasta que decidí dejar un buen trabajo, emprender por mi cuenta y poner en marcha mi propia agencia de marketing digital. Ahora, junto con un equipo joven, motivado y muy cualificado, ayudo a profesionales y empresas a crear y hacer crecer su negocio en Internet ofreciendo un servicio de marketing digital atento, cercano, integral y profesional.

Contenidos relacionados
Deja tu comentario

Suscríbete y estate al día en marketing digital

Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.

servicios marketing digital diseño web wordpress seo fondo
servicios marketing digital diseño web wordpress seo fondo
Suscríbete y estate al día en marketing digital

Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.