Cómo usar los códigos cortos de WooCommerce

29 de abril de 2021

Introducción

Los códigos cortos son fragmentos de código que permiten a los usuarios insertar funciones en una página de WordPress. Los comerciantes de comercio electrónico pueden usar códigos cortos de WooCommerce para agregar nuevos elementos como cuadrículas de productos destacados o promocionar artículos a la venta sin alterar el código fuente del sitio web.

Ser capaz de gestionar el contenido de forma dinámica es fundamental para aumentar las tasas de conversión y mejorando la experiencia del cliente. Los códigos cortos son fáciles de usar y no requieren habilidades de codificación avanzadas.

Aprenda a usar los códigos cortos de WooCommerce y cree páginas de tienda divertidas y atractivas.

Patrón de diseño de comerciante con el logotipo de WooCommerce.

Cómo agregar códigos cortos de WooCommerce

Para agregar códigos cortos de WooCommerce en un sitio web:

1. Acceder al Páginas or Artículos sección en el administrador de WordPress.

2. Seleccione la página o publicación que desea editar.

Instrucciones donde agregar códigos cortos de WooCommerce.

3. Agregar un nuevo Shortcode bloque en la página.

4. Ingrese los parámetros y atributos del shortcode.

Inserte el código corto en el editor de páginas.

Si usa el Editor clásico, pegue el código abreviado directamente dentro de la publicación o página.

Códigos cortos de productos WooCommerce

Los comerciantes deben informar a los clientes sobre nuevos productos, anunciar ofertas especiales y promover artículos relacionados todos los días.

La [productos] shortcode ayuda a los comerciantes a mostrar estos artículos utilizando códigos de producto de WooCommerce. Estos incluyen ID de publicación de WooCommerce, SKU, categorías, etiquetas, etc.

Los atributos de shortcode definen la cantidad de elementos en exhibición, su tipo y orden de aparición. El sistema continúa actualizando y clasificando dinámicamente los productos según los valores de atributo asignados.

Productos recientes

Los clientes necesitan tiempo para familiarizarse y adoptar nuevos productos. Utilice códigos cortos de WooCommerce para asegurarse de que los clientes siempre vean las últimas incorporaciones a su tienda.

Agregue lo siguiente [productos] shortcode para mostrar productos agregados recientemente:

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

Los atributos y sus valores definen la ubicación y el orden de los artículos:

  • límitar - El número de elementos en exhibición. Por ejemplo, estableciendo el valor en 4 muestra cuatro productos.
  • columnas - El número de columnas en exhibición. Determina cuántos elementos se muestran en una sola fila.
  • orderby -La orderby parámetro y el datos método ordenar elementos según la fecha de publicación del producto. Usar orderby = "id"to mostrar nuevos productos en función de su número de identificación de publicación.
  • solicite - Los productos se ordenan, de forma predeterminada, de forma ascendente (ASC) pedido. Utilizar el DESCvalor para pedir productos en un patrón descendente (el último producto siempre está en la primera columna).
  • la visibilidad -La visiblesvalue solo muestra los productos visibles en la tienda y los resultados de búsqueda de la tienda.

El sistema muestra los 4 productos publicados más recientemente en cuatro columnas, ordenados del más nuevo al más antiguo de izquierda a derecha.

Una cuadrícula de productos agregados recientemente a la tienda, ordenados por fecha.

Una vez publicado, el sistema actualiza y muestra continuamente los últimos productos utilizando los atributos de código abreviado definidos.

Productos Destacados

Mostrar productos destacados es una herramienta valiosa para promocionar artículos de alta calidad, vender productos diseñados para ocasiones especiales o liquidar existencias.


Nota: Al escribir códigos cortos, utilice comillas rectas (<strong>"</strong>) y no comillas rizadas (<strong>“</strong>).


Aumente la visibilidad de los productos destacados utilizando el siguiente código abreviado:

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

El sistema muestra seis productos destacados en dos columnas. La visibilidad = "destacado" El atributo garantiza que el sistema solo muestre los productos configurados en el Destacado valor en el Productos .

Cuadrícula que contiene productos destacados en WooCommerce.

La orderby y solicite los atributos no están presentes en el código abreviado de ejemplo. El sistema utilizará sus valores predeterminados. Los productos están ordenados por título (A a Z) en ascendente (ASC) pedido.

Productos más vendidos

Algunos productos ofrecen una excelente relación calidad-precio, alcanzan una gran popularidad y rápidamente se convierten en su artículo más vendido. Muestre a los nuevos clientes lo que otros disfrutaron y compraron más.

Ingrese al más vendido atributo para mostrar los productos más populares de la tienda:

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

La más vendido el valor del atributo debe establecerse en verdadero. El sistema muestra los 3 productos más vendidos en toda la tienda.

Los artículos más vendidos en una tienda WooCommerce, que se muestran con códigos cortos.

Evite el uso de más vendido atributo junto con el en venta y los más valorados parámetros debido a posibles conflictos del sistema.

Productos mejor valorados

Los clientes confían y valoran las experiencias y opiniones de otros clientes. Las críticas positivas son un factor clave a la hora de decidir si comprar un producto.

Ayude a los clientes a identificar rápidamente los artículos que reciben las mejores críticas. Utilizar el los más valorados atributo y establezca el valor en verdadero:

[products limit="3" columns="3" category="accessories" top_rated="true" ]

La categoría = "accesorios" El atributo limita los productos a la categoría Accesorios de WooCommerce. El sistema muestra los 3 accesorios mejor calificados en tres columnas.

Los artículos mejor calificados en una tienda WooCommerce se muestran con códigos cortos.

La orderby El atributo no está presente y los artículos se ordenan automáticamente por título desde AZ.

Productos a la venta

Promocionar incansablemente artículos, ofrecer reducciones de precios y descuentos por cantidad son esenciales para el éxito en un mercado de comercio electrónico altamente competitivo. La en venta El atributo permite a los comerciantes anunciar artículos actualmente en oferta:

[products limit="4" columns="4" category="tshirts" orderby="popularity" on_sale="true" ]

El sistema muestra las 4 camisetas más populares en oferta.

Las camisetas más populares a la venta se muestran con códigos cortos de WooCommerce.

La orderby = "popularidad" selector asegura que los artículos estén ordenados por el número total de compras.

Códigos cortos de categoría de producto

La [Product_categories] shortcode agrega categorías de productos completas a una página. La ids El atributo ayuda a los comerciantes a mostrar categorías específicas utilizando su ID de categoría.

Acceda a una categoría de WooCommerce desde el administrador de WordPress y recupere el ID de categoría de la URL del navegador.

Ubicación del ID de categoría de producto en WooCommerce.

Puede colocar varios ID de categoría dentro del mismo código abreviado. Separe las identificaciones con comas. El siguiente código abreviado coloca 4 categorías de productos en dos columnas:

[product_categories columns="2" ids="20, 21, 22, 23"  ]

El sistema muestra las categorías en función de sus números de identificación (20, 21, 22, 23).

Categorías de productos de WooCommerce que se muestran mediante códigos cortos.

La ocultar_vacío el valor está configurado para 1 por defecto. Esta configuración oculta categorías vacías. Para mostrar todas las categorías de la tienda, incluidas las categorías vacías, establezca el ocultar_vacío valor de atributo a 0.

Productos que te pueden interesar

WooCommerce muestra productos relacionados aleatorios en la página del producto de forma predeterminada. Si el producto se encuentra en un categoría o tiene un día, WooCommerce solo muestra productos asociados de la categoría correspondiente.

Desafortunadamente, los elementos de la misma categoría se muestran de forma arbitraria. Utilizar el [Productos relacionados] shortcode para definir la cantidad de productos en exhibición y para administrar su pedido. El siguiente código abreviado limita la cantidad de productos a 3 y los ordena del más nuevo al más antiguo, utilizando el valor de ID de publicación.

[related_products limit="3" orderby="id" order="DESC" ]

Para configurar opciones avanzadas, como ventas cruzadas y ventas adicionales específicas, considere promocionar productos relacionados utilizando complementos de WooCommerce.

Añadir al carrito Shortcode

Tiendas de comercio electrónico necesitan proporcionar una gran cantidad de contenido interesante para generar tráfico. Por ejemplo, los artículos de blog atractivos y las reseñas detalladas de productos son una forma excelente de atraer clientes potenciales.

An Añadir al Carrito El botón permite a los clientes colocar un producto en el carrito sin salir de la página que están navegando.

Ingrese al Añadir al carrito shortcode para colocar un Añadir al Carrito en cualquier lugar de su sitio web. Especifique el producto mediante el atributo de ID de producto:

[add_to_cart id="39"]

El sistema recupera y muestra automáticamente el precio del producto junto al botón.

Ejemplo de botón Agregar al carrito creado con códigos cortos de WooCommerce.

Una vez que el cliente hace clic en el botón, Ver carrito Aparece el enlace, que les permite visitar su carrito y revisar el producto antes de pagar.

Códigos cortos de página de WooCommerce

Una tienda WooCommerce no puede funcionar sin el Carrito, Pagar ahoray Mi cuenta páginas. Son parte integral del proceso de compra. Estas páginas y sus códigos cortos se generan cuando instalar y configurar WooCommerce.

El código abreviado que permite a los clientes realizar un seguimiento de sus pedidos no está disponible de forma predeterminada y debe agregarse manualmente.

Código corto del carrito de WooCommerce

El código corto del carrito de WooCommerce muestra el contenido del carrito, incluidos los productos seleccionados, el precio, la cantidad y los totales del carrito.

[woocommerce_cart]

El shortcode del carrito no permite el uso de argumentos adicionales.

Código corto de pago de WooCommerce

La página de pago de WooCommerce contiene los detalles de facturación del cliente y proporciona una descripción general del pedido. Cuando el cliente confirma los datos, se le redirige al Formulario de pago.

[woocommerce_checkout]

El shortcode de pago no tiene argumentos adicionales.

Código corto de mi cuenta de WooCommerce

La Mi Cuenta permite a los clientes modificar los detalles de su cuenta, las direcciones de envío y facturación, y revisar los pedidos anteriores.

[woocommerce_my_account]

De forma predeterminada, la cantidad de pedidos que un cliente puede revisar está limitada a 15.

Código corto de pedidos de WooCommerce

La función de seguimiento de pedidos de WooCommerce permite a los clientes verificar el estado de un pedido ingresando los detalles de su pedido. La función de seguimiento de pedidos de WooCommerce no está disponible de forma predeterminada. Insértelo manualmente con el siguiente código corto:

[woocommerce_order_tracking]

Esta función es crucial para los comerciantes que envían productos a sus clientes.

Insertar la función de seguimiento de pedidos en Woocommerce usando códigos cortos.

Si los clientes pueden rastrear los pedidos utilizando sus ID de pedido, es mucho menos probable que presenten quejas y se comuniquen con los servicios de soporte para obtener información de seguimiento. Otra excelente forma de mejorar las relaciones con los clientes es personalizar los correos electrónicos de WooCommerce.

Hoja de referencia de códigos cortos de WooCommerce

Haga clic en la hoja de referencia de códigos cortos de WooCommerce Descargar y guarde una copia PDF localmente.

Esta completa hoja de trucos enumera útiles Códigos cortos de WooCommerce en una hoja de referencia de una página.

Imagen de la hoja de trucos de códigos cortos de WooCommerce.

Complementos de códigos cortos de WooCommerce

Los códigos cortos de WooCommerce son prácticos e intuitivos. Sin embargo, puede resultar complicado crear funciones avanzadas y personalizadas.

Los complementos de códigos cortos introducen nuevos tipos de códigos cortos, interfaces fáciles de usar y permiten a los comerciantes agregar funciones promocionales como cupones.

Kit de códigos cortos de Woo

La Kit de códigos cortos de Woo el complemento es gratuito. Tiene una interfaz gráfica para implementar códigos cortos de WooCommerce, lo que facilita la edición de páginas existentes o la creación de nuevas desde cero.

Después de instalar y activar el complemento, acceda al WSHK panel del menú de WooCommerce.

La interfaz del complemento Woo Shortcode Kit.

Habilite códigos cortos específicos haciendo clic en controles deslizantes individuales. Configure atributos y selectores usando el Mostrar opciones avanzadas .

El menú de opciones avanzadas del complemento Woo Shortcodes Kit.

El complemento Woo Shortcodes introduce varios códigos cortos nuevos. Por ejemplo, el código corto de GDPR agrega información relacionada con GDPR a la sección de comentarios, página de pago, reseñas, etc.

Agregue GDPR a la tienda WooCommerce usando el complemento Woo Shortcode Kit.

Ajustar el contenido de la tienda para cumplir con los requisitos legales y de procedimiento requiere mucho tiempo. Los códigos cortos predefinidos agilizan considerablemente el proceso.

Códigos cortos de WooCommerce

La Códigos cortos de WooCommerce El complemento no agrega nuevos códigos cortos. El complemento tiene como objetivo simplificar y acelerar el uso de códigos cortos de WooCommerce salientes.

Una vez que instale el complemento, una pequeña WooCommerce El menú desplegable aparece al editar o crear la página o publicación.


Nota: El menú desplegable no es visible cuando se usa el editor de bloques. Las imágenes de los ejemplos se muestran utilizando el Editor clásico.


Accede a un editor de página o publicación y expande el WooCommerce Menú desplegable. Seleccione el tipo de código abreviado de la lista.

El menú de códigos cortos de WooCommerce en el complemento de códigos cortos de WooCommerce.

Utilice la ventana emergente para definir los atributos, por ejemplo, el pedido y la cantidad de productos, y haga clic en DE ACUERDO.

Defina atributos de shortcode utilizando el complemento WooCommerce Shortcodes.

A pesar de que el código corto indicaba al sistema que mostrara 12 productos en oferta, solo se muestran 9 artículos. Esto implica que la tienda actualmente tiene solo 9 artículos a la venta.

Número de artículos a la venta que se muestran con el complemento de códigos cortos de WooCommerce.

Una vez que los nuevos artículos a la venta estén disponibles, esos artículos se agregarán a la cuadrícula hasta que se alcance el límite de 12 artículos.

Códigos cortos de cupón

Códigos cortos como [cupón_es_activo] or [cupón_no_es_válido] determinar el estado del cupón. La descripción automática posterior está condicionada al estado del cupón.

Por ejemplo, un mensaje que informa a los clientes que su cupón de Navidad ya no es válido:

[coupon_is_not_active code="christmasdiscount"]
The Christmas coupon was valid until the end of January. Check out other amazing coupons on our home page!
[/coupon_is_not_active]

La código El atributo es obligatorio ya que identifica el cupón específico.

Búsqueda de productos de WooCommerce

La Búsqueda de productos de WooCommerce la extensión cuesta $ 49 por año. Contiene importantes funciones de shortcode que los clientes esperan de un plataforma de comercio electrónico.

La Campo de búsqueda en vivo muestra a los clientes sus resultados de búsqueda a medida que escriben. Los resultados contienen imágenes, precios y una opción para agregar el producto al carrito.

La Filtros en vivo Los códigos cortos actualizan y reducen los resultados de la búsqueda cuando los clientes buscan por precio, categoría, atributos del producto, etiquetas, etc.

Búsqueda de Productos

Ingrese al [woocommerce_product_search] shortcode para insertar un campo de búsqueda de producto dinámico. Los resultados coincidentes cambian a medida que el cliente escribe y proporcionan la información esencial sobre cada producto.

El campo de búsqueda en vivo creado con el complemento de búsqueda de productos de WooCommerce.

La posición del campo de búsqueda no se limita a páginas específicas y los clientes pueden buscar fácilmente productos relevantes. El shortcode agrega un Añadir al Carrito botón a los resultados de la búsqueda de forma predeterminada.

Productos de filtrado

Los códigos cortos de filtro en vivo agregan un filtro para restringir los resultados de búsqueda de los clientes. Los parámetros incluyen rangos de precios, etiquetas, atributos de productos y palabras clave.

  • [woocommerce_product_filter] - Introduce un campo de entrada dinámico que filtra y actualiza la página mientras el cliente escribe.
  • [woocommerce_product_filter_attribute] - Un cliente puede filtrar productos utilizando atributos del producto, como color, tamaño, temporada, marca, etc.
  • [woocommerce_product_filter_category] - El filtro muestra la categoría del producto y permite al cliente acceder a la página de la categoría.
  • [woocommerce_product_filter_price] - El cliente tiene la opción de ingresar un rango de precios, ya sea ingresando el rango en dos campos de entrada o cambiando el precio usando un control deslizante. El filtro cambia los productos en exhibición en tiempo real.
  • [woocommerce_product_filter_tag] - El código abreviado mostrará la etiqueta del producto. Al hacer clic en la etiqueta, el cliente puede ver todos los productos relacionados con la misma etiqueta.
  • [woocommerce_product_filter_rating] - El shortcode agrega un filtro que muestra los productos según su calificación promedio.
  • [woocommerce_product_filter_sale] –Este código abreviado presenta una opción rápida para que los clientes hagan clic y solo vean los productos actualmente en oferta.
  • [woocommerce_product_filter_reset] - El código abreviado proporciona un botón que el cliente puede usar para borrar todos los filtros activos y reiniciar su búsqueda desde el principio.

Las opciones de filtro en vivo son una necesidad para los comerciantes con una gran variedad de productos.

Código corto de tabla de productos Woo

La Tabla de productos Woo El complemento tiene una interfaz fácil de usar que ayuda a los comerciantes a mostrar productos en una tabla. La tabla se puede agregar a una página usando un solo shortcode.

Después de instalar y activar el complemento, acceda al TABLA DE PRODUCTOS menú, y seleccione Añadir nuevo para crear una nueva tabla. Utilice las opciones disponibles para diseñar una tabla e insertar productos según sus códigos de producto de WooCommerce.

Cree una tabla de productos con el complemento Woo Product Table.

Una vez que la tabla esté completa, copie el código corto de la parte superior del menú e insértelo en cualquier página

Busque el código corto de la tabla de woocommerce en el complemento de la tabla de productos de Woo.

La creación de tablas es un método eficaz para promocionar productos en una tienda de comercio electrónico. El complemento Woo Product Table actualiza el proceso considerablemente

Conclusión

Ahora comprende cómo funcionan los códigos cortos y las funciones que agregan a su sitio web. Aprender a utilizar todo el potencial de los códigos cortos de WooCommerce mejorará los KPI de su tienda.

Ya sea que prefiera insertar códigos cortos directamente o usar complementos de códigos cortos, algunas funciones se han vuelto esenciales para cualquier tienda de comercio electrónico. Es menos probable que los clientes compren en sitios web que no ofrecen funciones avanzadas que agilicen el proceso de pago.

Acerca del autor.
Vladímir Kaplarevic
Vladimir es un redactor técnico residente en CCBill. Tiene más de 8 años de experiencia en la implementación de comercio electrónico y soluciones de pago en línea con varios proveedores de servicios de TI globales. Su atractivo estilo de escritura proporciona consejos prácticos y tiene como objetivo despertar la curiosidad por las tecnologías innovadoras.
Hable con un especialista en asistencia comercial