WooCommerce Shortcodes: Productos, Carritos, Categorías y Otros Shortcodes Útiles

¿Qué son los shortcodes? Es probable que haya oído el término antes, pero probablemente asumió que era sólo un concepto técnico que el usuario medio de WordPress no necesita entender.

O, tal vez usted ha utilizado un shortcode o dos antes, pero no entendía exactamente cómo funcionaban en un nivel más profundo.

En cualquier caso, si quieres desbloquear el todo el potencial de WooCommerceDefinitivamente querrás familiarizarte con los shortcodes.

¿Por qué? Porque impulsan gran parte de la funcionalidad del plugin, incluyendo todas las páginas de cara al público como Checkout, Cart y Product Categories.

Y lo que es más importante, saber utilizar los códigos cortos de WooCommerce te permite crear páginas de ventas altamente personalizadas, y un increíble embudo de ventas para construir un potente sitio de comercio electrónico para cualquier situación.

En este post, aprenderás lo siguiente:

• Qué es un shortcode
• Por qué deberías usar los shortcodes de WooCommerce
• Cómo utilizarlos

Empecemos.

¿Qué son los códigos cortos?

En pocas palabras, los shortcodes son pequeñas piezas de código que realizan acciones específicas en su sitio.

Al colocar este código en una página, entrada o área de widgets de WordPress, algo sucede. Lo que ocurre exactamente depende del shortcode. Algunos cargarán el contenido del post, mientras que otros mostrarán un formulario de contacto. Hay cientos de casos de uso diferentes.

Los códigos cortos son una característica de WordPress, por lo que todos tienen el mismo formato. La estructura es sencilla: un breve fragmento de texto se coloca entre dos corchetes, así:

[shortcode]

Muchos plugins y temas utilizan shortcodes. Como tal, el código corto a menudo se precede con el nombre del propio plugin para diferenciarlo de los demás, así:

[pluginname_shortcode]

Sin embargo, no siempre es así. Depende del plugin concreto.

¿Qué son los Shortcodes de WooCommerce?

Los shortcodes de WooCommerce son shortcodes diseñados para el Plugin WooCommerce. Hay docenas de shortcodes en WooCommerce y se utilizan para mostrar la mayoría de las páginas, por lo que es importante entender cómo funcionan.

La primera vez que instalar WooCommerce y pasar por el asistente de configuraciónse crean automáticamente varias páginas. Si vas a editar una de estas páginas, te darás cuenta de que contienen un shortcode.

Cuando se carga la página, el shortcode carga el contenido relevante. Por ejemplo, el shortcode [woocommerce_cart] cargará la página del carrito de WooCommerce.

Los códigos cortos se utilizan para mostrar las siguientes páginas de WooCommerce:

• Productos
• Carrito
• Pedido
• Mi cuenta
• Seguimiento de pedidos

¿Por qué deberías usar WooCommerce Shortcodes?

Los shortcodes son una forma sencilla de personalizar tu tienda WooCommerce. Pegando un shortcode (y modificando algunos parámetros menores), puede crear fácilmente cualquier tipo de sitio de comercio electrónico que desee.

Puede elegir qué productos se muestran, cómo se ordenan y cuántos se muestran por página. Además, puede añadir Añadir a la cesta en lugares oportunos, como al final de los mensajes.

Tampoco necesitas saber codificar. Sólo tienes que copiar y pegar una o dos líneas de texto. Bastante fácil, ¿verdad?

Cómo insertar códigos cortos

Ahora que ya sabes lo que es un shortcode, vamos a hablar de cómo añadirlos a tu sitio.

Editor de bloques Gutenberg

Con el Editor Gutenbergañadir códigos cortos es fácil. Simplemente pulse el signo más para añadir un nuevo bloque, escriba código corto en la barra de búsqueda y seleccione la opción Código corto bloque.

A continuación, escriba su shortcode en el campo.

Guarde la página y visualícela. Ahora verás los resultados de tu shortcode.

Editor clásico

Si prefieres usar el Editor clásico, añadir shortcodes también es fácil.

Simplemente añada el shortcode, como arriba, asegurándose de incluir los corchetes ([ y ]).

Widget

Para añadir un shortcode a un área widgetizada, basta con añadir un widget de texto con el shortcode.

A continuación, carga la página para ver el contenido del shortcode en tu barra lateral.

Cómo funcionan los códigos cortos de WooCommerce

Aunque parezcan sencillos, los shortcodes son en realidad muy potentes. Veamos las diferentes partes que componen un shortcode.

El código corto

Los códigos cortos son una sola palabra o un conjunto de palabras conectadas con guiones bajos, como esto:

• [productos]
• [woocommerce_order_tracking]

Mientras que algunos shortcodes funcionan solos, otros requieren algunos parámetros.

Parámetros

Parámetros o argumentos (denominados args en algunos de Documentación de WooCommerce), son líneas extra que hacen la acción del shortcode más específica. La mayoría, pero no todos, los shortcodes de WooCommerce usan parámetros.

Por ejemplo, si añade on_sale="true" al shortcode [products s], los únicos productos que se mostrarán serán los que estén a la venta.

Lista de todos los códigos cortos de WooCommerce

Ahora vamos a repasar algunos de los shortcodes de WooCommerce más útiles.

• [woocommerce_cart]
• [woocommerce_checkout]
• [woocommerce_my_account]
• [woocommerce_order_tracking]
• [productos]

[woocommerce_cart]

Este shortcode añade la funcionalidad del carrito de WooCommerce a la página. En otras palabras, mostrará todos los productos que el usuario ha añadido a su carrito. No hay parámetros que añadir a este shortcode.

[woocommerce_checkout]

Este shortcode muestra la página de pago. Dado que es un aspecto crítico de su negocio, asegúrese de que la página está configurada correctamente. Después de todo, si un cliente no puede encontrar la página de pago, no puede comprar nada. Además, con la flexibilidad de las modernas plataformas de comercio electrónico como WooCommerce, ahora tienes la oportunidad de personalice su página de pago para alinearse con su identidad de marca y mejorar la experiencia del usuario.

Al igual que con [woocommerce_cart], no hay parámetros adicionales para la página de pago.

[woocommerce_my_account]

Esta muestra el Mi cuenta que contiene toda la información del cliente, así como sus pedidos anteriores en su tienda.

Por defecto, el número de órdenes mostradas está fijado en 15. Puede modificarlo para mostrar todos órdenes haciendo el número -1.

[woocommerce_order_tracking]

Este shortcode crea una página de "seguimiento de pedidos", que permite a los clientes ver el estado actual de sus pedidos. No hay otros parámetros.

[productos]

El shortcode [products] es uno de los shortcodes más potentes y utilizados en WooCommerce. Como probablemente has adivinado, muestra tus productos. Hay un montón de parámetros que le permiten personalizar los tipos y cantidades de productos que se muestran.

Para añadir un parámetro, simplemente escriba su nombre, seguido del signo igual y el valor deseado entre comillas. Asegúrese de que está dentro del shortcode [products s].

Por ejemplo, para mostrar 3 productos de la zapatos utilice este shortcode:

[products limit="3" category="zapatos"]

Para que sea más fácil de entender, hemos incluido un ejemplo de shortcode de producto con el parámetro incluido debajo de cada uno.

Controle el número de productos mostrados con límite

En límite controla el número de productos mostrados. Por defecto, será -1, que muestra todos los productos.

Ejemplo

[products limit="3"]

Mostrar productos de una categoría determinada con categoría

En categoría mostrará los productos que tengan una categoría determinada. Puede añadir más de una categoría colocando una coma entre ellas.

Ejemplo

[productos categoria="zapatos, sombreros"]

Personalizar el diseño

Hay algunos parámetros que le ayudan a controlar el diseño de sus páginas de productos.

1. columnas

Este parámetro controla el número de columnas. Por defecto, se establece en 4, aunque esto normalmente se colapsará en un número menor en móvil (dependiendo de tu tema.)

Ejemplo

[products columns="3"]

2. paginar

Este parámetro determinará si las páginas de resultados de sus productos estarán paginadas. Sólo tiene dos opciones: verdadero o falso. Por defecto, se establece en falso.

Probablemente querrá utilizar la función paginar junto con el parámetro límite que hemos mencionado anteriormente. Así, el límite determinará el número de artículos que aparecen en cada página.

Ejemplo

[productos paginate="true"]

3. ordenar por

Este parámetro tiene una serie de opciones que le permiten personalizar cómo se ordenan sus productos. Por defecto, se ordenarán por el código título.

Puedes añadir más de una opción separándolas con un espacio.

• fecha: Ordena los productos por fecha de publicación (primero los nuevos)
• id: Esta configuración ordenará los productos por su Post ID
• orden_menú: Esto ordenará los productos por el orden del menú (los números más bajos primero)
• popularidad: Esto ordenará los productos por el número de compras (la mayoría primero)
• rand: Muestra los productos en un orden aleatorio. Puede haber problemas con los sitios que utilizan plugins de caché.
• valoración: Ordenará los productos por su valoración media, de mayor a menor.

Ejemplo

[productos orderby="fecha"]

4. pedir

Sobre la base de lo anterior ordenar por determina si el orden será ascendente (ASC) o descendente (DESC). Por defecto, es ASC.

Ejemplo

[products order="ASC"]

5. skus

SKU significa Unidad de Mantenimiento de Existencias. Es un sistema diseñado para realizar un seguimiento de los productos a través de diferentes mercados. Aunque no son requeridos por WooCommerce, son muy recomendablessobre todo si piensa vender sus productos al por mayor. Puede utilizar este plugin para generar automáticamente SKUs para todos sus productos.

Este parámetro le permite añadir SKU específicas, que deben ir separadas por comas.

Ejemplo

[products skus="camiseta-blanca-pequeña, camiseta-blanca-mediana"]

6. etiqueta

Esto le permite mostrar productos con una etiqueta determinada. Puede añadir más de una etiqueta poniendo una coma entre ellas.

Ejemplo

[productos tag="azul, verano"]

7. clase

Esto añade una clase envolvente HTML alrededor del elemento, lo que le permite modificarlo con CSS.

Ejemplo

[productos class="custom-element"]

8. on_sale

¿Desea mostrar los productos marcados como en oferta? Utilice este parámetro. Las opciones son verdadero o falso. Asegúrese de no utilizarlo al mismo tiempo que más_vendidos o top_rated.

Ejemplo

[productos on_sale="true"]

9. más_vendido

Esto mostrará los productos más vendidos. Las opciones son verdadero y falso. Asegúrese de no utilizarlo al mismo tiempo que en_venta o top_rated.

Ejemplo

[productos best_selling="true"]

10. top_rated

En top_rated mostrará los productos mejor valorados. Las opciones disponibles son verdadero y falso. No lo utilice al mismo tiempo que en_venta o más vendidos.

Ejemplo

[productos top_rated="true"]

Atributos del producto

Estos shortcodes se pueden utilizar para mostrar productos en función de sus atributos. Los atributos son elementos que se comparten entre varios productos. Por ejemplo, talla o color.

1. atributo

Esto mostrará los productos con un determinado atributo.

2. condiciones

Debe utilizarse con atributo arriba. Mostrará los productos con determinados términos vinculados al atributo. Por ejemplo, el atributo puede ser talla y las Condiciones son pequeño, mediano, o grande.

3. operador de plazos

Permiten realizar cálculos sencillos para determinar qué términos se incluirán. Asimismo, deben utilizarse con atributo y términos.

• Y: Mostrará los productos con todos los atributos enumerados
• EN: Mostrará los términos seleccionados. Este es el valor predeterminado.
• NO EN: Mostrará los elementos que no son en los términos seleccionados (es decir, todos los que no sean los seleccionados)

4. operador de etiquetas

Lo mismo que el término operador anterior, excepto las etiquetas.

• Y: Mostrará los productos con todas las etiquetas enumeradas
• EN: Mostrará los elementos con las etiquetas seleccionadas. Esta es la opción por defecto
• NO EN: Mostrará los elementos que no son en las etiquetas seleccionadas (es decir, todas las que no sean las seleccionadas)

5. visibilidad

Muestra los productos en función de su visibilidad en su sitio.

• Visible: Muestra los productos que son visibles en las búsquedas y en su sitio web. Está configurado por defecto
• Catálogo: Muestra los productos que están visibles en la tienda, pero no en los resultados de búsqueda
• Buscar en: Muestra los productos que son visibles en los resultados de búsqueda, pero no en la tienda
• Oculto: Muestra los productos que están ocultos tanto en los resultados de búsqueda como en la tienda, pero a los que sólo se puede acceder a través de una URL directa.
• Destacados: Muestra los productos marcados como destacados

6. cat_operator

Gato significa categoría. Esto le permite realizar cálculos sencillos para determinar qué productos se incluirán.

• Y: Muestra los productos de todas las categorías
• EN: Muestra los productos de la categoría o categorías seleccionadas.
• NO EN: Muestra los productos que no en la categoría seleccionada

Categorías de productos

Estos dos shortcodes le permiten mostrar sus categorías de productos. Al igual que con los propios productos, hay un gran número de opciones de personalización disponibles.

[productos _categorías]

Sin ningún parámetro, este shortcode mostrará todos de sus categorías en una sola página. Si desea añadir más de una categoría, también debe utilizar este shortcode.

[productos _categoría]

Este es el shortcode genérico para mostrar una categoría en particular. Tendrá que añadir un parámetro específico, que se enumeran a continuación, con el fin de mostrar realmente uno (o más.)

Parámetros

Ahora vamos a repasar los parámetros disponibles para los shortcodes de categoría de producto.

1. identificaciones

Mostrar categorías específicas por sus ids.

Ejemplo

[productos _categories ids="1,2"]

2. limitar

Determina el número de categorías que se mostrarán.

Ejemplo

[productos _categorías limit="5"]

3. columnas

Este parámetro determina el número de columnas. Por defecto, se establece en 4.

Ejemplo

[productos _categorías limit="5"]

4. hide_empty

Esto ocultará las categorías vacías. Hay dos opciones: "1" y "0". "1" ocultará las categorías vacías, mientras que "0" las mostrará. Por defecto, está establecido en "1".

Ejemplo

[productos _categorías hide_empty="1"]

5. padres

Este parámetro mostrará las categorías hijas de una categoría padre específica, a la que se dirige id. Por ejemplo, [parent="3"] mostrará las categorías hijas de la categoría cuyo id es 3.

Si fija padre a "0", sólo se mostrarán las categorías de nivel superior.

Ejemplo

[productos _categories parent="0"]

6. pedirpor

Controla el orden en que se muestran las categorías. Por defecto, las ordenará por nombre, pero también puede cambiarlo a id, babosa, o orden_menú.

Ejemplo

[productos _categorías orderby="id"]

7. pedir

Relacionado con ordenar por, este parámetro hará que la ordenación sea ascendente (ASC) o descendente (DESC.) Por defecto, está establecido en "ASC".

Ejemplo

[productos _categorías order="ASC"]

Otros códigos cortos útiles de WooCommerce

Veamos ahora otros códigos cortos útiles.

[add_to_cart]

Este shortcode le permite crear fácilmente un Añadir a la cesta botón para un producto específico, que está dirigido por id. Hay bastantes parámetros. Al igual que con otros shortcodes, cada uno debe colocarse entre dos comillas, "así".

• id: Elija el producto por ID
• estilo: Personaliza directamente el CSS del botón
• sku: Elija el producto por SKU
• mostrar_precio: Elija si el precio se muestra con el botón. Hay dos opciones, "TRUE" y "FALSE".
• clase: Asigna una clase HTML al botón, para que puedas dirigirlo con código CSS.
• cantidad: Elija la cantidad de producto que se añadirá al carrito. En la mayoría de los casos, será simplemente "1".

Ejemplo

[add_to_cart id="34" style="border: 1px solid #111111;" show_price="TRUE" quantity="1" class="example-cart-button"]

[add_to_cart_url]

Este shortcode mostrará la URL real de un producto en particular. Sólo hay dos parámetros:

• id: Buscar el producto por ID
• sku: Seleccione el producto por SKU

Ejemplo

[add_to_cart_url id="99″]

[shop_messages]

¿Quieres mostrar mensajes de WooCommerce en páginas que no son de WooCommerce? Este shortcode te permitirá mostrar notificaciones como "Este producto ha sido añadido a tu carrito" en cualquier página que lo tenga.

Códigos cortos de cupones

WooCommerce también ofrece una forma de mostrar los cupones disponibles en cualquier página. Sin embargo, tendrás que comprar su Cupones inteligentes complemento, sobre el que puede leer más aquí.

Solución de problemas de códigos cortos

En la sección final, vamos a cubrir brevemente algunos problemas comunes que impiden que los shortcodes funcionen.

El código corto está entre las etiquetas

.

Cuando añadas un shortcode a una página, asegúrate de que no está entre etiquetas

, que están diseñadas para mostrar (y no ejecutar) código.

Las comillas son rizadas, no rectas
Otro error común es si las comillas (usadas con parámetros) están en ángulo, o "rizadas" (como esto: ") y no rectas (como esto: "). Los parámetros no funcionan con comillas rizadas.
Reflexiones finales
Como probablemente hayas notado, ¡hay muchos shortcodes en WooCommerce! Esperamos que esta guía haya sido un recurso útil para ti en todos tus proyectos de comercio electrónico.
Aunque pueda parecer un poco técnico, el poder y la flexibilidad de los shortcodes te permiten crear prácticamente cualquier tipo de página de eCommerce con la que puedas soñar.
Si utiliza WooCommerce¿ha utilizado shortcodes? Si es así, ¿de qué manera? Y si no, ¿es porque el proceso te resulta confuso? Háznoslo saber en los comentarios.




Únete a 1.587.020 suscriptores
Obtenga acceso exclusivo a nuevos consejos, artículos, guías, actualizaciones y mucho más.

Página de blog única - Formulario de suscripción
 
Su nombre
Su dirección de correo electrónico
SUSCRÍBETE
 




Divulgación: Este blog puede contener enlaces de afiliados. Si realiza una compra a través de uno de estos enlaces, es posible que recibamos una pequeña comisión. Leer información. Tenga la seguridad de que sólo recomendamos productos que hemos utilizado personalmente y que creemos que aportarán valor a nuestros lectores. Gracias por su apoyo.