WooCommerce Docs

WooCommerce viene con varios shortcodes que pueden ser usados para insertar contenido dentro de las publicaciones y páginas.

Cómo usar los shortcodes Volver al principio

Dónde usar Volver al principio

Los shortcodes se pueden usar en páginas y posts en WordPress. Si estás usando el editor de bloques, hay un bloque de shortcode que puedes usar para pegar el shortcode.

Si estás usando el editor clásico, puedes pegar el shortcode en la página o post.

Args (o Argumentos) Volver al principio

Varios de los shortcodes de abajo mencionan «Args». Son formas de hacer el shortcode más específico. Por ejemplo, añadiendo id="99" al shortcode , creará un botón de añadir al carrito para el producto con ID 99.

Códigos cortos de página

WooCommerce no puede funcionar correctamente sin que los tres primeros códigos cortos estén en algún lugar de su sitio.

– muestra la página del carrito
– muestra la página de pago
– muestra la página de la cuenta de usuario
– muestra el formulario de seguimiento de pedidos

En la mayoría de los casos, estos códigos cortos se añadirán a las páginas automáticamente a través de nuestro asistente de incorporación y no es necesario utilizarlos manualmente.

Carro Volver arriba

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

Args: none

Checkout Back to top

Usado en la página de checkout, el shortcode de checkout muestra el proceso de checkout.

Args: none

Mi cuenta Back to top

Muestra la sección ‘mi cuenta’ donde el cliente puede ver los pedidos anteriores y actualizar su información. Puede especificar el número de pedidos a mostrar. Por defecto, está establecido en 15 (use -1 para mostrar todos los pedidos.)

Args:

array( 'current_user' => '' )

Formulario de seguimiento de pedidos Volver arriba

Permite a un usuario ver el estado de un pedido introduciendo los detalles del mismo.

Args: none

Productos Volver arriba

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

El shortcode le permite mostrar productos por ID de puesto, SKU, categorías, atributos, con soporte para paginación, ordenación aleatoria y etiquetas de producto, reemplazando la necesidad de múltiples shortcodes como , , , y , que son necesarios en versiones de WooCommerce inferiores a la 3.2. Revise los ejemplos a continuación.

Atributos de producto disponibles Volver al principio

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

Mostrar atributos del producto

• limit – El número de productos para mostrar. Por defecto y -1 (mostrar todo) cuando se listan productos, y -1 (mostrar todo) para las categorías.
• columns – El número de columnas a mostrar. El valor predeterminado es 4.
• paginate – Activa la paginación. Usar junto con limit. El valor predeterminado es false y se ajusta a true para paginar.
• orderby – Ordena los productos mostrados según la opción introducida. Se pueden pasar una o más opciones añadiendo ambos slugs con un espacio entre ellos. Las opciones disponibles son:
  • date – La fecha de publicación del producto.
  • id – El ID del puesto del producto.
  • menu_order – El orden del menú, si se ha establecido (los números más bajos se muestran primero).
  • popularity – El número de compras.
  • rand – Ordenar aleatoriamente los productos en la carga de la página (puede no funcionar con sitios que usan caché, ya que podría guardar un orden específico).
  • rating – La valoración media del producto.
  • title – El título del producto. Este es el modo por defecto orderby.
• skus – Lista separada por comas de los SKU de los productos.
• category – Lista separada por comas de los slugs de las categorías.
• tag – Lista separada por comas de los slugs de las etiquetas.
• order – Indica si el orden de los productos es ascendente (ASC) o descendente (DESC), utilizando el método establecido en orderby. El valor predeterminado es ASC.
• class – Añade una clase envolvente HTML para que pueda modificar la salida específica con CSS personalizado.
• on_sale – Recupera los productos en venta. No debe utilizarse junto con best_selling o top_rated.
• best_selling – Recupera los productos más vendidos. No debe utilizarse junto con on_sale o top_rated.
• top_rated – Recuperar los productos mejor valorados. No debe utilizarse junto con on_sale o best_selling.

Contenido de atributos de productos

• attribute – Recupera los productos que utilizan el slug de atributos especificado.
• terms – Lista de términos de atributos separada por comas que debe utilizarse con attribute.
• terms_operator – Operador para comparar términos de atributos. Las opciones disponibles son:
  • AND – Mostrará los productos de todos los atributos elegidos.
  • IN – Mostrará los productos con el atributo elegido. Este es el valor por defecto terms_operator.
  • NOT IN – Mostrará los productos que no están en los atributos elegidos.
• tag_operator – Operador para comparar etiquetas. Las opciones disponibles son:
  • AND – Mostrará los productos de todas las etiquetas elegidas.
  • IN – Mostrará los productos con las etiquetas elegidas. Este es el valor por defecto tag_operator.
  • NOT IN – Mostrará los productos que no están en las etiquetas elegidas.
• visibility – Mostrará los productos basados en la visibilidad seleccionada. Las opciones disponibles son:
  • visible – Productos visibles en la tienda y en los resultados de la búsqueda. Esta es la opción visibility por defecto.
  • catalog – Productos visibles sólo en la tienda, pero no en los resultados de búsqueda.
  • search – Productos visibles sólo en los resultados de búsqueda, pero no en la tienda.
  • hidden – Productos ocultos tanto en la tienda como en la búsqueda, accesibles sólo 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 el slug de etiqueta especificado.
• cat_operator – Operador para comparar términos de categoría. Las opciones disponibles son:
  • AND – Muestra los productos que pertenecen a todas las categorías elegidas.
  • IN – Muestra los productos de la categoría elegida. Este es el valor predeterminado cat_operator.
  • NOT IN – Mostrará los productos que no están en la categoría elegida.

• ids – Mostrará los productos basados en una lista separada por comas de IDs de puestos.
• skus – Mostrará productos basados en una lista separada por comas de SKUs.

Si el producto no se muestra, asegúrese de que no está configurado como «Oculto» en la «Visibilidad del Catálogo».

Atributos especiales del producto

Estos atributos no se pueden utilizar con los «Atributos de contenido» enumerados anteriormente, ya que probablemente causarán un conflicto y no se mostrarán. Sólo debe utilizar uno de los siguientes atributos especiales.

• best_selling – Mostrará sus productos más vendidos. Debe establecerse en true.
• on_sale – Mostrará sus productos en venta. Debe establecerse en true.

Ejemplos de escenarios de productos Volver al principio

En los siguientes escenarios, usaremos una tienda de ropa de ejemplo.

Escenario 1 – Artículos en venta al azar

Quiero mostrar cuatro productos en venta al azar.

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

Escenario 2 – Productos destacados

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

Este shortcode dice que se cargarán hasta cuatro productos en dos columnas, y que deben ser destacados. Aunque no se indica explícitamente, utiliza los valores predeterminados como la ordenación 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.

Escenario 4 – Productos más nuevos

Quiero mostrar los productos más nuevos primero – cuatro productos en una fila. Para lograr esto, usaremos el Post ID (que se genera cuando se crea la página del producto), junto con el comando order y orderby. Como no se puede ver el Post ID desde el frontend, los ID#s se han superpuesto sobre las imágenes.

Escenario 5 – Categorías específicas

Sólo quiero mostrar sudaderas y camisetas, pero no accesorios. Usaré dos filas de cuatro.

Alternativamente, sólo quiero mostrar los productos que no están en esas categorías. Todo lo que tengo que cambiar es el cat_operator a NOT IN.

Nótese que aunque el límite está establecido en 8, sólo hay cuatro productos que se ajustan a ese criterio, por lo que se muestran cuatro productos.

Escenario 6 – Visualización de atributos

Cada una de las prendas de vestir tiene un atributo, ya sea «Primavera/Verano» u «Otoño/Invierno», dependiendo de la estación correspondiente, y algunos accesorios tienen ambos, ya que pueden usarse todo el año. En este ejemplo, quiero tres productos por fila, mostrando todos los artículos de «Primavera/Verano». El atributo slug es season, y los atributos son warm y cold. También los quiero ordenados desde los productos más nuevos a los más antiguos.

Alternativamente, si quisiera mostrar exclusivamente productos de clima frío, podría añadir NOT IN como mi terms_operator:

Nótese que al usar NOT IN, excluyo los productos que están tanto en «Primavera/Verano» como en «Otoño/Invierno». Si quisiera mostrar toda la ropa apropiada para el clima frío, incluyendo estos accesorios compartidos, cambiaría el término de warm a cold.

Escenario 7 – Mostrar sólo productos con la etiqueta «sudadera con capucha»

Ordenación de productos por meta-campos personalizados Volver al principio

Cuando se utiliza el shortcode Productos, puede elegir ordenar los productos por los valores predefinidos arriba. También puede ordenar los productos por campos meta personalizados utilizando el código siguiente (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 ) && !in_array( $args, $standard_array ) ) { $args = $args; $args = 'meta_value_num'; } return $args;}

Debe colocar este fragmento en functions.php en la carpeta de su tema y luego personalizarlo editando la meta_key.

Categoría de productos Volver arriba

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

• – Mostrará los productos en una categoría de producto especificada.
• – Mostrará todas sus categorías de producto.

Atributos de categoría de producto disponibles Volver al principio

• ids – Especifica los identificadores de categoría específicos que se enumeran. Para ser utilizado en
• category – Puede ser el id de la categoría, el nombre o el slug. Para ser usado en
• limit – El número de categorías a mostrar
• columns – El número de columnas a mostrar. Por defecto es 4
• hide_empty – El valor por defecto es «1» que ocultará las categorías vacías. Establezca «0» para mostrar las categorías vacías
• parent – Establezca un ID de categoría específico si desea mostrar todas las categorías secundarias. Alternativamente, configure a «0» (como en el ejemplo de abajo) para mostrar sólo las categorías de nivel superior.
• orderby – El valor por defecto es ordenar por «nombre», puede ser configurado a «id», «slug», o «menu_order». Si quiere ordenar por los ids que especificó entonces puede usar orderby="include"
• order – Establece si el ordenamiento de la categoría es ascendente (ASC) o descendente (DESC), usando el método establecido en orderby. Por defecto es ASC.

Ejemplos de Escenarios de Categorías de Productos Volver arriba

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

Imagina que sólo quieres mostrar las categorías de nivel superior en una página y excluir las subcategorías, pues es posible con el siguiente shortcode.

Página de producto Volver arriba

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

Productos relacionados Volver arriba

Lista de productos relacionados.

Args:

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

Argumento límite Volver arriba

Add to Cart Back to top

Mostrar el precio y el botón de 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 URL Back to top

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

Args:

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

Mostrar notificaciones de WooCommerce en páginas que no son de WooCommerce Volver arriba

Le 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 se utilizan otros shortcodes, como , y se desea que los usuarios reciban alguna notificación sobre sus acciones.

Solución de problemas de los shortcodes Volver arriba

Si ha pegado correctamente sus shortcodes y la visualización parece incorrecta, asegúrese de que no ha incrustado el shortcode entre las etiquetas <pre>. Este es un problema común. Para eliminar estas etiquetas, edite la página y haga clic en la pestaña Texto:

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