Todos los shortcodes de WooCommerce y cómo utilizarlos (actualizado permanentemente)

Crear una tienda online con WordPress y WooCommerce es realmente sencillo, y configurarlo no digamos, pero también puedes utilizar los shortcodes de WooCommerce para conseguir algunas configuraciones y visualizaciones especiales, así que vamos a ver todos los disponibles y cómo se utilizan.

Pero primero…

¿Qué es un shortcode?

Por si aún no lo tienes claro, un shortcode es un atajo de programación, un código que ejecuta instrucciones de un código más largo, que normalmente está incluido en el plugin, en el archivo functions.php del tema activo o en tu propio plugin de personalizaciones.

Crear tu propio shortcode es más fácil de lo que crees, así que ponte a practicar.

¿Qué son los shortcodes de WooCommerce?

Son atajos que te permiten mostrar visualizaciones o páginas especiales en tu tienda online, que por defecto no están a simple vista.

Los shortcodes de WooCommerce

woocomerce tienda online

Carrito

Se utiliza en la página del carrito y muestra el contenido del carrito así como la interfaz para cupones y otros elementos del carrito.

Modificadores: ninguno

Shortcode:

[woocommerce_cart]

Pago

Se utiliza en la página de pago y muestra el proceso de pago.

Modificadores: ninguno

[woocommerce_checkout]

Formulario de seguimiento de pedido

Permite al usuario ver el estado de cualquier pedido introduciendo sus detalles.

Modificadores: ninguno

Shortcode:

[woocommerce_order_tracking]

Mi cuenta

Muestra la sección «mi cuenta», en la que el cliente puede ver sus anteriores pedidos y actualizar su información. Puedes especificar el número u orden en el que se mostrarán. Por defecto se muestran 15 pedidos (puedes usar -1 para mostrar todos los pedidos)

Modificadores:

array(
     'current_user' => '',
    'order_count' => '15'
)

Shortcode:

[woocommerce_my_account order_count="12"]

Productos recientes

Muestra una lista de los productos más recientes, algo muy útil en la portada de la tienda. El modificador ‘per_page’ determina cuantos productos se mostrarán en la página, y el atributo de columnas controla en cuantas columnas se verán los productos.

Modificadores:

array(
     'per_page' => '12',
     'columns' => '4',
     'orderby' => 'date',
     'order' => 'desc'
)

Shortcode:

[recent_products per_page="12" columns="4"]

Productos destacados

Funciona igual que los productos recientes, pero mostrando solo los productos marcados como destacados. En el ejemplo el shortcode muestra 12 productos en 4 columnas.

Modificadores:

array(
     'per_page' => '12',
     'columns' => '4',
     'orderby' => 'date',
     'order' => 'desc'
)

Shorcode:

[featured_products per_page="12" columns="4"]

Producto

Muestra un único producto, ya sea por su ID o por el SKU. El SKU lo introduces tú al crear el producto y el ID puedes localizarlo en la URL del producto al editarlo, por ejemplo.

Shortcode:

[product id="99"]
[product sku="FOO"]

Productos

Muestra varios productos por ID, SKU, categorías, atributos y más.

Atributos

  • limit – El número de productos a mostrar. Por defecto muestra todos (-1).
  • columns – El número de columnas a mostrar. 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:
    • date – La fecha en que se publicó el producto.
    • id – El  ID del producto.
    • menu_order – El orden en el menú, si se definió (los números más bajos se muestran primero).
    • popularity – El número de compras.
    • rand – Orden aleatorio de productos al cargar la página (puede no funcionar en sitios que usen caché, ya que guardaría un orden específico).
    • rating – La puntuación media del producto.
    • title – El título del producto. Este es el modo por defecto de orderby.
  • order – Establece si el orden de productos será ascendente (ASC) o descendente (DESC) usando el método definido en orderby. Por defecto es ASC.
  • class – Añade una clase contenedora al HTML para que puedas modificar la visualización específica con CSS personalizado.

Atributos de contenido del producto

  • attribute – Recupera los productos usando el slug de atributo seleccionado.
  • terms – Lista separada por comas de los términos de atributos a utilizar con attribute.
  • terms_operator – Operador para comparar términos de atributos. Las opciones disponibles son:
    • AND – Mostrará productos de todos los atributos seleccionados.
    • IN – Mostrará productos con el atributo seleccionado.Este es el valor por defecto de terms_operator.
    • NOT IN – Mostrará productos que no están entre los atributos seleccionados.
  • visibility – Mostrará productos basados en la visibilidad seleccionada. Las opciones disponibles son:
    • visible – Productos visibles en la tienda y resultados de búsqueda. Esta es la opción por defecto de visibility.
    • catalog – Productos visibles solo en la tienda, no en los resultados de búsqueda.
    • search – Productos visibles solo en los resultados de búsqueda, no en la tienda.
    • hidden – Productos ocultos tanto en la tienda como en las búsquedas, solo accesibles mediante su URL directa.
    • featured – Productos marcados como productos destacados.
  • category – Recupera productos usando el slug específico de la categoría.
  • cat_operator – Operador para comparar términos de categorías. Las opciones disponibles son:
    • AND – Mostrará productos que pertenezcan a todas las categorías seleccionadas.
    • IN – Mostrará productos de la categoría seleccionada. Este es el valor por defecto de cat_operator.
    • NOT IN – Mostrará productos que no estén en la categoría seleccionada.
  • ids – Mostrará productos basados en una lista separada por comas de IDs.
  • skus – Mostrará productos basados en una lista separada por comas de SKUs.

Ejemplos de shortcodes:

[products limit="8" columns="4" category="hoodies, tshirts" cat_operator="AND"]
[products columns="3" attribute="season" terms="warm" orderby="date"]
[products limit="3" columns="3" best_selling="true" ]
[products limit="4" columns="2" visibility="featured" ]
[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true" ]
[products ids="1, 2, 3, 4, 5"]
[products skus="foo, bar, baz" orderby="date" order="desc"]

Añadir al carrito

Muestra el precio y el botón de añadir al carrito de un único producto por su ID.

Modificadores:

array(
'id' => '99',
'style' => 'border:4px solid #ccc; padding: 12px;',
'sku' => 'FOO'
)

Shortcode:

[add_to_cart id="99"]

URL de añadir al carrito

Muestra la URL en el botón de añadir al carrito de un único producto por ID.

Modificadores:

array(
'id' => '99',
'sku' => 'FOO'
)

Shortcode:

[add_to_cart_url id="99"]

Página de producto

Muestra una página de producto simple por ID o SKU.

Shortcode:

[product_page id="99"]
[product_page sku="FOO"]

Categoría de productos

Muestra varios productos de una categoría por el slug de la misma.

Modificadores:

array(
     'per_page' => '12',
     'columns' => '4',
     'orderby' => 'title',
     'order' => 'asc',
     'category' => ''
)

Shortcode:

[product_category category="libros"]

Categorías de productos

Muestra varias categorías de productos.

Modificadores:

array(
      'number' => 'null',
     'orderby' => 'title',
     'order' => 'ASC',
     'columns' => '4',
     'hide_empty' => '1',
'parent' => '',
'ids' => ''
)

El campo ‘number’ se utiliza para mostrar el número de productos, y el campo ‘ids’ indica al shortcode qué categorías mostrar.

Puedes poner el parámetro ‘parent’ a 0 para mostrar solo las categorías superiores. Los IDs de categoría se ponen separados por comas para mostrar varias.

Shortcode:

[product_categories number="12" parent="0"]

Productos en oferta

Muestra todos los productos rebajados.

Modificadores:

array(
'per_page' => '12',
'columns' => '4',
'orderby' => 'title',
'order' => 'asc'
)

Shortcode:

[sale_products per_page="12"]

Productos más vendidos

Muestra los productos en venta más vendidos.

Modificadores:

array(
'per_page' => '12',
'columns' => '4'
)

Shortcode:

[best_selling_products per_page="12"]

Productos mejor valorados

Muestra los productos en venta mejor valorados.

Modificadores:

array(
'per_page' => '12',
'columns' => '4',
'orderby' => 'title',
'order' => 'asc'
)

Shortcode:

[top_rated_products per_page="12"]

Atributo de producto

Muestro productos con un atributo específico.

Modificadores:

array(
'per_page' => '12',
'columns' => '4',
'orderby' => 'title',
'order' => 'asc',
'attribute' => '',
'filter' => ''
)

Shortcode:

[product_attribute attribute='color' filter='negro']

Productos relacionados

Muestra una lista de productos relacionados con el actual.

Modificadores:

array(
'per_page' => '12',
'columns' => '4',
'orderby' => 'title'
)

Shortcode:

[related_products per_page="12"]

Ordenando productos mediante campos personalizados

En muchos shortcodes como:

[recent_products]
[featured_products]
[products]
[product_category]
[sale_products]
[top_rated_products]
[product_attribute]
[related_products]

puedes ordenar los productos usando alguno de estos valores:

menu_order
title
date
rand
id

Por ejemplo, un uso del atributo ‘orderby’ sería el siguiente:

[products skus=”foo, bar, baz” orderby=”date” order=”desc”].

Pero también puedes ordenar productos mediante campos personalizados, usando el siguiente código, en el ejemplo para ordenar productos por precio:

add_filter( 'woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby' );

function woocommerce_shortcode_products_orderby( $args ) {

$standard_array = array('menu_order','title','date','rand','id');

if( isset( $args['orderby'] ) && !in_array( $args['orderby'], $standard_array ) ) {
$args['meta_key'] = $args['orderby'];
$args['orderby'] = 'meta_value_num'; 
}

return $args;
}

Simplemente añade el código a tu archivo functions.php o tu plugin de personalizaciones y lo adaptas editando el ‘meta_key’. Fácil ¿no?

¿Cómo uso los shortcodes de WooCommerce?

Vale, ya te los sabes todos pero ¿cómo los utilizo? ¿dónde los meto?

Puedes hacerlo de varias maneras, una muy obvia es crear tus propias páginas e introducir shortcodes a voluntad, pero no es muy práctico, pues muchas ya las crea WooCommerce automáticamente y podrías liarla bien gorda si no lo haces bien.

Shortcodes en widgets

Un uso muy habitual de los shortcodes de WooCommerce es en widgets de texto., para mostrar listas personalizadas de productos a tu gusto y necesidades de la tienda.

shortcodes woocommerce en widgets de texto

Aunque WooCommerce incluye unos cuantos widgets por defecto nada como usar shortcodes para personalizar tu tienda a tu gusto.

Un modo inteligente de usar shortcodes de WooCommerce en los widgets de texto sería en combinación del plugin JP Widget Visibility, que te permite especificar dónde se mostrará (o no) cada widget, pudiendo añadir shortcodes personalizados que muestren listados de productos según qué quieras vender en según qué pagina o producto.

visibilidad de shortcodes de woocommerce en widgets de texto

Shortcodes con plugin

Mucho más fácil es utilizar el plugin WooCommerce Shortcodes, que añade una serie de botones a la barra de herramientas del editor de WordPress para facilitar la inserción de shortcodes de WooCommerce con sus respectivos modificadores.

Maquetadores visuales

Si usas WP Bakery Page Builder o Divi la cosa cambia, y es donde de verdad vas a sacar todo el provecho de los shortcodes de WooCommerce.

modulo texto divi shortcode woocommerce

Crea tus páginas personalizadas de producto, tienda, carrito, pago, etc y añade los shortcodes adecuados en filas o columnas, en módulos de texto, para mostrar tus productos donde quieras, ordenados y colocados como gustes, con el objetivo de maximizar las ventas.

Si además utilizas la nueva funcionalidad de tests A/B de cada módulo/columna/fila de las últimas versiones de Divi entonces tendrás un entorno de ventas realmente eficaz y fácilmente analizable por rendimiento de cada módulo y página.

tests a b divi

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(61 votos, promedio: 4.9)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

29 comentarios en “Todos los shortcodes de WooCommerce y cómo utilizarlos (actualizado permanentemente)”

  1. Pingback: Qué tema elegir para WooCommerce

  2. Hola, tengo un problema. Al utilizar los shortcodes de woocommerce, los productos no se muestran correctamente es como si las reglas css de los productos hubieran desaparecido. ¿Sabes algo acerca de esto, por qué pasa o algo? Gracias.

  3. Como sería si quiero que además del botón de Agregar al carrito también tuviera la cantidad de productos que quiero agregar?

  4. Karol a la Cart

    ¿Saben cómo podría poner sólo el botón de «añadir al carrito», sin el precio ni la imagen del producto?

  5. Muy útil, pero a la hora de ponerlo, el titulo para poner el código de promoción me sale en inglés. Cómo podría cambiarlo a español? GRACIAS 😀

  6. Cristian Pedreira

    Hola,
    Un articulo muy bueno!!
    Te queria preguntar, Para la Home de la tienda he creado un pagina en blanco y he usado la plantilla de inicio, asi se me ven los productos más vendidos, categorias y más, lo no se, es como puedo meter un pequeño texto al final de la pagina , un pequeño texto de la tienda para mejorar el SEO, Sabes como podria hacerlo??

    Muchas Gracias!

  7. Hola, buenas noches, te agradezco el artículo, llevaba varios días buscando algo de este tipo. Solo un pregunta ¿que quieres decir con hablas de Modificadores:? ¿donde debería de llevar a cabo estas modificaciones? mi intención es que en la página principal se vean varias categorías con una serie de artículos, por ejemplo: zapatillas, 3 artículos, camisetas, otros tres artículos … Gracias, espero tu respuesta

      1. Mi pregunta es donde meto esto <<<<<<<< ‘null’,

        ‘orderby’ => ‘title’,

        ‘order’ => ‘ASC’,

        ‘columns’ => ‘4’,

        ‘hide_empty’ => ‘1’,

        ‘parent’ => »,

        ‘ids’ => »

        )>>>>>>>>>

          1. Lo mismo por aqui.
            Probe de ponerlo en functions.php , child theme..
            Pero no anduvo.

            Estaria bueno saber algo de estos modificadores. para los burros como yo que estan aprendiendo..jaja

  8. ¿Cómo se puede hacer para que las imágenes de los productos lleven el enlace de afiliado en vez de un enlace a la ficha de producto? Seria para el caso de un ecommerce orientado a vender productos de terceros, con programa de afiliados.

  9. Fantástico artículo. Lo tengo en favoritos como chuleta 🙂
    Una preguntilla: al utilizar el shortcode [product_page id=»25460″], ¿cómo se podría hacer para que no aprecieran los artículos relacionados?
    Gracias

  10. Estimado Fernando.
    Muy buena tardes, te mando un gran saludo desde Chile. tu material realmente me ha ayudado mucho pasando de ser un neófito en WP a poder defenderme.
    Tengo un tema el día de hoy y es que quiero ocular desde la tienda http://www.tobysgrowshop.cl la opción de »
    LOGIN / REGISTER», La lupa y el carro. Me he partido la cabeza buscando código CSS, shortcode de woocommerce y nada.
    quiero saber como ocultarlos 1 a 1 o todos y si es posible cambiar el idioma de los mismos.

    Quedo a la espera de tus comentarios.

  11. Johnatan Elias Adarme Rodrigue

    Me interesa crear un widgets modificando las catagorias que quiero que se muestres, es decir, marcar de auto y se epslique las marca y modelos, y en el otor wigeb que salga tipo de piezas se dspliege el tipo d epiezas, es decir poder selecionar cataegorias que deseo ver en cada widgen de woecomerce. Espero que m epuedan ayudar

  12. Hola, muy interesante el post!
    Tengo un problema y capaz que me podes ayudar, estoy usando woocommer booking y voy a hacer una landing con 4 productos reservables, pero al poner el shortcode el producto ( por ejemplo [add_to_cart id=»123″]) me sale solo el botón y yo quiero que me salga el botón con el calendario para seleccionar la fecha que quiero reservar.
    No se si se entiende lo que quiero.

  13. Hola Fernando,

    Mil gracias por el artículo. Es muy completo y útil, como todos los que has redactado hasta ahora así que gracias 😉

    Una preguntita por si puedes asesorarme. ¿Sabes de algún shortcode o plugin que te permita mostrar el número de artículos seleccionados directamente?

    Sé que es posible hacerlo con código pero queríamos ahorrarnos ese paso.

    Saludos y gracias

  14. Hola Fernando, tengo una duda.

    Imaginate si quiero mostrar los productos de 2 atributos. Es decir Talla=»M» y Color=»Rojo»

    Como sería con product_attribute y products con attribute y terms. Lo he probado pero no se si se puede con las opciones o se tendría que programar.

  15. André Ribet A.

    Estimado, felicitaciones por todo tu aporte, eres un crack, ahora la pregunta … jejeje: Cómo podría agregar paginación a un shortcode que muestra muchos productos de una categoría?

    Desde ya muchas gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido