Shortcodes incluidos en WooCommerce

WooCommerce viene con varios shortcodes que se pueden usar para insertar contenido dentro de publicaciones y páginas.

Los shortcodes (o códigos cortos) se pueden usar en páginas y publicaciones.

Si estás utilizando el editor de bloques, busca el bloque Shortcode:

Luego pega el shortcode en el bloque:

Si estás utilizando el editor clásico, pega el shortcode en la página o publicación.

Varios de los shortcodes a continuación mencionan “Args”. Estas son formas de hacer que el shortcode sea más específico. Por ejemplo, al agregar id = “99” al shortcode [add_to_cart], creará un botón de agregar al carrito para el producto con ID 99.

WooCommerce no puede funcionar correctamente sin que los primeros tres shortcodes se encuentren en algún lugar de tu sitio web.

[woocommerce_cart]: muestra la página del carrito

[woocommerce_checkout]: muestra la página de pago

[woocommerce_my_account]: muestra la página de la cuenta de usuario

[woocommerce_order_tracking]: muestra el formulario de seguimiento de pedidos

En la mayoría de los casos, estos shortcodes se agregaran a las páginas automáticamente a través de nuestro asistente de configuración y no es necesario usarlos manualmente.

Utilizado en la página del carrito, el shortcode del carrito muestra el contenido y la interfaz del carrito para los códigos de cupones y otras partes y piezas del carrito.

Args: ninguno

[woocommerce_cart]

Utilizado en la página de pago, el shortcode de pago muestra el proceso de pago.

Args: ninguno

[woocommerce_checkout]

Muestra la sección “mi cuenta” donde el cliente puede ver pedidos anteriores y actualizar su información. Puedes especificar el número de pedidos para mostrar. De forma predeterminada, está configurado en 15 (use -1 para mostrar todos los pedidos).

Args:

array(
     'current_user' => ''
)

[woocommerce_my_account]

Permite al usuario ver el estado de un pedido ingresando los detalles de su pedido.

Args: ninguno

[woocommerce_order_tracking]

El shortcode [products] es uno de nuestros shortcodes más robustos, que puede reemplazar varias otras cadenas utilizadas en versiones anteriores de WooCommerce.

El shortcode [products] te permite mostrar productos por ID de publicación, SKU, categorías, atributos, con soporte para paginación, clasificación aleatoria y etiquetas de productos; reemplazando la necesidad de múltiples shortcodes tales como [featured_products], [sale_products], [best_selling_products ], [recent_products], [product_attribute] y [top_rated_products]; que son necesarios en las versiones de WooCommerce inferiores a 3.2. Revisa los ejemplos a continuación.

Los siguientes atributos están disponibles para usar junto con el shortcode [products]. Se han dividido en secciones de acuerdo a la función principal para facilitar la navegación, con ejemplos a continuación.

Atributos de presentación

• limit: el número de productos para mostrar. El valor predeterminado es -1 (mostrar todo) al listar productos, y -1 (mostrar todo) para las categorías.
• columns: el número de columnas para mostrar. El valor predeterminado es 4.
• paginate: activa la paginación. Usar en conjunción con limit. El valor predeterminado es false (falso), establece este valor en true (verdadero) para añadir paginación.
• orderby: ordena los productos, para mostrarlos según la opción ingresada. Se pueden seleccionar una o más opciones agregando ambos campos con un espacio entre ellos. Las opciones disponibles son:
  • date: la fecha en que se publicó el producto.
  • id: el post ID del producto.
  • menu_order: el orden del menú, si está configurado (los números más bajos se muestran primero).
  • popularity: la cantidad de compras.
  • rand: ordena los productos al azar durante la carga de la página (puede que no funcione con sitios que usan almacenamiento en caché, ya que podría guardar un orden específico).
  • rating: la calificación promedio del producto.
  • title: el título del producto. Este es el modo predeterminado.
• skus: lista de SKU de productos separados por comas.
• category: lista de slugs de categoría separados por comas.
• tag: lista de slugs de etiquetas, separada por comas.
• order: indica si el orden del producto es ascendente (ASC) o descendente (DESC), utilizando el método establecido en orderby . El valor predeterminado es ASC.
• class: agrega una clase de contenedor HTML para que puedas modificar la salida específica con CSS personalizado.
• on_sale: recupera los productos en oferta. No debe usarse junto con best_selling o top_rated.
• best_selling: recupera los productos más vendidos. No debe usarse junto con on_sale o top_rated.
• top_rated: recupera los productos mejor calificados. No debe usarse junto con on_sale or best_selling .

Atributos de contenido

• attribute: recupera productos utilizando el slug de atributo especificado.
• terms: lista de términos de atributos separados por comas que se utilizarán con attribute.
• terms_operator : operador para comparar términos de atributos. Las opciones disponibles son:
  • AND: mostrará productos de todos los atributos elegidos.
  • IN: mostrará productos con el atributo elegido. Este es el valor predeterminado de terms_operator.
  • NOT IN: mostrará productos que no están en los atributos elegidos.
• tag_operator: operador para comparar etiquetas. Las opciones disponibles son:
  • AND: mostrará productos de todas las etiquetas elegidas.
  • IN: mostrará productos con las etiquetas elegidas. Este es el valor predeterminado de tag_operator.
  • NOT IN: mostrará productos que no están en las etiquetas elegidas.
• visibility: mostrará los productos en función de la visibilidad seleccionada. Las opciones disponibles son:
  • visible: productos visibles en la tienda y resultados de búsqueda. Esta es la opción predeterminada para visibility.
  • catalog: productos visibles solo en la tienda, pero no en los resultados de búsqueda.
  • search: productos visibles solo en los resultados de búsqueda, pero no en la tienda.
  • hidden: productos que están ocultos tanto de la tienda como de los resultados de búsqueda, accesibles solo por URL directa.
  • featured: productos que están marcados como productos destacados.

• category: recupera productos utilizando el slug de categoría especificado.
• tag: recupera productos utilizando la etiqueta especificada.
• cat_operator: operador para comparar términos de categoría. Las opciones disponibles son:
  • AND: mostrará los productos que pertenecen a todas las categorías elegidas.
  • IN: mostrará productos dentro de la categoría elegida. Este es el valor predeterminado de cat_operator.
  • NOT IN: mostrará productos que no están en la categoría elegida.
• ids: mostrará productos basados ​​en una lista de post IDs, separados por comas.
• skus: mostrará productos basados ​​en una lista de SKUs, separados por comas.

Si el producto no se muestra, asegúrate de que no esté configurado como «oculto» en la «visibilidad del catálogo».

Atributos de producto especiales

Estos atributos no se pueden usar con los «atributos de contenido» listados anteriormente, ya que probablemente causarán un conflicto y no se mostrarán. Solo debes usar uno de los siguientes atributos especiales.

• best_selling: mostrará tus productos más vendidos. Debe establecerse como true.
• on_sale: mostrará tus productos en oferta. Debe establecerse como true.

En los siguientes escenarios, utilizaremos un ejemplo de tienda de ropa.

Escenario 1 – Artículos en oferta aleatorios

Quiero mostrar al azar cuatro productos en oferta.

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true" ]

Este shortcode establece explícitamente cuatro productos en cuatro columnas (que serán una fila), mostrando los artículos más populares en venta. También agrega un quick-sale de clase CSS, que puedo modificar en mi tema.

Escenario 2 – Productos destacados

Quiero mostrar mis productos destacados, dos por fila, con un máximo de cuatro elementos.

[products limit="4" columns="2" visibility="featured" ]

Este shortcode establece que se cargarán hasta cuatro productos en dos columnas, y que deben ser productos destacados. Aunque no se indica explícitamente, utiliza los valores predeterminados, como ordenar por título (de la A a la Z).

Escenario 3 – Productos más vendidos

Quiero mostrar mis tres productos más vendidos en una fila.

[products limit="3" columns="3" best_selling="true" ]

Escenario 4 – Productos más nuevos

Quiero mostrar primero los productos más nuevos: cuatro productos en una fila. Para lograr esto, usaremos los post IDs (que se generan en orden cuando se crea la página del producto), junto con los atributos de “order” y “orderby” (ordenar por). Como no se pueden ver los post IDs desde la interfaz, los números de ID se han superpuesto a las imágenes.

[products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"]

Escenario 5 – Categorías específicas

Solo quiero mostrar sudaderas y camisas, pero no accesorios. Usaré dos filas de cuatro.

[products limit="8" columns="4" category="capuchas, camisetas" cat_operator="AND"]

Alternativamente, solo quiero mostrar productos que no están en esas categorías. Todo lo que necesito cambiar es cat_operator a NOT IN.

[products limit="8" columns="4" category="capuchas, camisetas" cat_operator="NOT IN"]

Ten en cuenta que aunque el límite se establece en 8, solo hay cuatro productos que se ajustan a ese criterio, por lo que se muestran cuatro productos.

Escenario 6 – Presentación por atributos

Cada una de las prendas tiene un atributo, ya sea «Primavera / Verano» u «Otoño / Invierno», dependiendo de la temporada apropiada; con algunos accesorios que tienen ambos, ya que se pueden usar todo el año. En este ejemplo, quiero tres productos por fila, mostrando todos los elementos de «Primavera / Verano». El slug de ese atributo es temporada, y los términos del atributo son calido y frio . También quiero ordenarlos desde los productos más nuevos hasta los más antiguos.

[products columns="3" attribute="temporada" terms="calido" orderby="date"]

Alternativamente, si quisiera mostrar productos exclusivamente para clima frío, podría agregar NOT IN como mi terms_operator:

[products columns="3" attribute="temporada" terms="calido" terms_operator="NOT IN"]

Ten en cuenta que al usar NOT IN, excluyo los productos que son parte de ambos grupos, tanto «Primavera / Verano» como «Otoño / Invierno». Si quisiera mostrar todo el equipo apropiado para el clima frío, incluidos estos accesorios compartidos, cambiaría el término de calido a frio.

Escenario 7 – Mostrar sólo productos con la etiqueta “capucha”

[products tag="capucha"]

Al usar shortcodes de producto, puedes elegir ordenar productos por los valores predefinidos anteriormente. También puedes ordenar los productos por metacampos personalizados utilizando el siguiente código (en este ejemplo, ordenamos los 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;
}

Debes colocar este fragmento en el archivo functions.php, en tu carpeta de temas y luego personalizarlo editando la meta_key.

Estos dos shortcodes mostrarán tus categorías de productos en cualquier página.

• [product_category]: mostrará los productos de una categoría de producto específica.
• [product_categories]: mostrará todas las categorías de productos.

• ids: especifica los ID de categoría específicos que se mostraran
• limit : el número de categorías a mostrar
• columns: el número de columnas a mostrar. El valor predeterminado es 4
• hide_empty: el valor predeterminado es «1», que ocultará las categorías vacías. Establece en «0» para mostrar categorías vacías
• parent: configúralo con un ID de categoría específico, si deseas mostrar todas sus subcategorías o categorías hijo
• orderby: el valor predeterminado es ordenar por «nombre», se puede establecer en «id», «slug» o «menu_order». Si deseas ordenar por los IDs que especificaste, puedes usar orderby="include"
• order: indica si el orden de las categorías es ascendente (ASC) o descendente (DESC), utilizando el método establecido en orderby. El valor predeterminado es ASC.

Escenario 8 – Mostrar sólo categorías de nivel superior

Imagina que solo deseas mostrar categorías de nivel superior en una página y excluir las subcategorías, bueno, es posible con el siguiente shortcode.

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

Mostrar una página completa de un solo producto por ID o SKU.

[product_page id="99"]

[product_page sku="FOO"]

Crea una lista de productos relacionados.

Args:

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

[related_products limit="12"]

Muestra el precio y el botón añadir al carrito de un solo producto, por ID.

Args:

array(
'id' => '99',
'style' => 'border:4px solid #ccc; padding: 12px;',
'sku' => 'FOO'
'show_price' => 'TRUE'
'class' => 'CSS-CLASS'
'quantity' => '1';
)

[add_to_cart id="99"]

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

Args:

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

[add_to_cart_url id="99"]

[shop_messages] te permite mostrar notificaciones de WooCommerce (como «El producto se ha añadido al carrito») en páginas que no son de WooCommerce. Es útil cuando usas otros shortcodes, como [add_to_cart], y deseas que los usuarios reciban retroalimentación sobre sus acciones.

Si pegaste correctamente tus shortcodes y la pantalla se ve incorrecta, asegúrate de no incrustar el shortcode entre las etiquetas <pre>. Este es un problema común. Para eliminar estas etiquetas, edita la página y haz clic en la pestaña de texto (o HTML):

Otro problema común es que las comillas rectas (") se muestran como comillas curvas (“). Para que los shortcodes funcionen correctamente, necesitas comillas rectas.