Una guía completa de los códigos cortos de WooCommerce más populares
Cuando se trata de crear un sitio web de comercio electrónico, ¿a quién no le gusta mantener las cosas simples? WooCommerce es una gran herramienta, especialmente para alguien que está creando un sitio web de WordPress para vender productos y servicios en línea.
Pero, ¿qué tal tener todos los códigos que están disponibles para tener un diseño personalizado y crear y construir una tienda de comercio electrónico desde cero?
Los códigos cortos de WooCommerce te permiten hacer esto y mucho más. Puede agregar una variedad de funcionalidades a su barra lateral, controles deslizantes, páginas, publicaciones, widgets, etc., todo esto sin tener que escribir una sola línea de código.
Aquí hay una guía completa para presentarle el mundo de los códigos cortos de WooCommerce. Puede seguir esta guía para aprender a usar los códigos cortos de WooCommerce y personalizar su sitio web de WooCommerce fácilmente.
¡Vamos a profundizar!
Códigos cortos de WooCommerce más populares
1. Códigos cortos de página
No hace falta decir que crear una página de pago o una página de Mi cuenta desde cero puede ser una tarea abrumadora. Pero, ¿por qué alguien tomaría esa ruta cuando puede lograr lo mismo usando códigos cortos de página simples?
Para facilitarle las cosas, estos son algunos de los códigos cortos de página más populares:
- – Use este shortcode para calcular el valor del carrito del cliente.Your cart is currently empty.
- – Use este shortcode para mostrar la página de pago a sus clientes.
Rastreo de orden
Si usted es un comprador frecuente en línea, quizás ya conozca el valor de tener una información de seguimiento de pedidos disponible tan pronto como realice un pedido. Lo mismo también se le proporciona en el recibo de su pedido, así como en el correo electrónico de confirmación.
- – Use este shortcode para mostrar la página de seguimiento de pedidos a sus clientes.
- – Use este código abreviado para mostrar la página "Mi cuenta" a los clientes.
Login
También puede combinar códigos cortos en las páginas. Por ejemplo, puede elegir configurar una página de formulario usando Login
Siéntase libre de probar otras permutaciones y combinaciones de códigos cortos de WooCommerce para llegar al que realmente usaría.
2. Códigos cortos de productos
Los productos completan su tienda de comercio electrónico. Hay momentos en los que necesita mostrar la página de productos de una manera particular para atraer la atención de los visitantes que navegan a través de su tienda en línea. Aquí es donde los códigos cortos de WooCommerce relacionados con el producto entran en escena. Hay muchos códigos cortos en esta categoría, así que echemos un vistazo uno por uno.
El shortcode le permite mostrar productos por SKU, ID de publicación, atributos, categorías, etc. con soporte para etiquetas de productos, clasificación aleatoria y paginación, al mismo tiempo que hace que la necesidad de múltiples códigos cortos sea redundante.
Estos son algunos de los códigos cortos que necesitará explorar, eche un vistazo a la documentación completa disponible en el sitio oficial WooCommerce sitio web.
Mostrar atributos del producto
- límite – el número de productos a mostrar. Los valores predeterminados son y -1 (mostrar todo) al listar productos, y -1 (mostrar todo) para categorías.
- columnas – El número de columnas a mostrar. El valor predeterminado es 4.
- paginar – Activa la paginación. Usar junto con un límite. El valor predeterminado es falso establecido en verdadero para paginar.
- ordenar por – Ordena los productos mostrados por la opción ingresada. Se pueden pasar una o más opciones agregando ambos slugs con un espacio entre ellos. Las opciones disponibles son:
- fecha – La fecha de publicación del producto.
- identificación – El ID de la publicación del producto.
- menu_order – El orden del menú, si está configurado (los números más bajos se muestran primero).
- popularidad – el número de compras.
- rand – Ordene aleatoriamente los productos al cargar la página (es posible que no funcione con sitios que usan el almacenamiento en caché, ya que podría guardar un pedido específico).
- clasificación – La valoración media del producto.
- título – El título del producto. Este es el modo orderby predeterminado.
- skus – Lista de SKU de productos separados por comas.
- categoría – Lista separada por comas de slugs de categoría.
- pedido – 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.
- clase – Agrega una clase contenedora HTML para que pueda modificar la salida específica con CSS personalizado.
- en venta – Recuperar productos en oferta. No se debe usar junto con best_sellers o top_rated.
- más vendido – Recuperar los productos más vendidos. No debe usarse junto con on_sale o top_rated.
- los más valorados – Recuperar los productos mejor valorados. No debe usarse junto con on_sale o best_selling.
Atributos del producto de contenido
- atributo – Recupera productos utilizando el slug de atributo especificado.
- condiciones – Lista separada por comas de términos de atributo que se utilizarán con la atribución.
- términos_operador – Operador para comparar términos de atributo. Las opciones disponibles son:
- Y – Mostrará productos de todos los atributos elegidos.
- EN – Mostrará productos con el atributo elegido. Este es el valor predeterminado de terms_operator.
- NO EN – Mostrará productos que no están en los atributos elegidos.
- Visibilidad – 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 de visibilidad predeterminada.
- catalogar – Productos visibles solo en la tienda, pero no en los resultados de búsqueda.
- Búsqueda – Productos visibles solo en los resultados de búsqueda, pero no en la tienda.
- oculto – Productos que están ocultos tanto para la tienda como para la búsqueda, accesibles solo por URL directa.
- Destacados – Productos que están marcados como Productos Destacados.
- categoría – Vuelve a intentar productos utilizando el slug de categoría especificado.
- gato_operador – Operador para comparar términos de categoría. Las opciones disponibles son:
- Y – Mostrará productos que pertenecen a todas las categorías elegidas.
- EN – Mostrará productos dentro de la categoría elegida. Este es el valor predeterminado de cat_operator.
- NO EN – Mostrará productos que no estén en la categoría elegida.
- identificaciones – mostrará productos basados en una lista separada por comas de ID de publicación.
- skus – Mostrará productos basados en una lista de SKU separados por comas
Puede usar múltiples permutaciones y combinaciones usando el conjunto anterior de códigos abreviados para llegar a la solución final que necesita.
Por ejemplo, el código abreviado establece explícitamente cinco productos con cinco columnas (que se incluirán en una fila), mostrando los artículos más populares en oferta (la venta rápida es una de las clases de CSS).
También puede agregar varios productos a este mismo código abreviado de esta manera: .
Al igual que en el ejemplo anterior, es una excelente idea usar los argumentos: “order=”, “orderby=”, “columns=”.
Por ejemplo, si usa , generará 3 productos en 3 columnas predefinidas ordenadas por la variable de fecha, en orden descendente.
La categoría de producto le permite agregar múltiples categorías de productos tanto en bucle como en salida con la ayuda de este simple código abreviado:
Para una mejor comprensión de la sección de categorías de productos, aquí hay algunos atributos más que puede usar con este código abreviado:
- pedido => ASC: este atributo cambia la forma en que se ordenan las categorías de productos, "DESC" o "ASC".
- ordenar por => nombre: este atributo ordena el orden utilizando "nombre" o "fecha" como variables válidas.
- número => nulo – Esto El atributo representa el recuento o el número de categorías.
- columnas => 3 – Este atributo define el número de columnas en las que se organizan las categorías.
- hide_empty => 2: este atributo representa el Conjunto 2 para ocultar aquellas categorías que no tienen productos.
- padre => – Este atributo representa Establecer 0 para mostrar solo las categorías de nivel superior.
- identificaciones =>: este atributo representa que los ID de producto se pueden configurar para generar los resultados especificados.
Categoría de producto por Slug
Este atributo le permite agregar todos aquellos productos que se encuentran dentro de una categoría definida, junto con una opción para ajustar la página de resultados con los parámetros column=”” y per_page=””. Por ejemplo, aquí hay un shortcode que usa todos estos parámetros:
Productos recientes
Este código abreviado mostrará los productos que puede haber agregado recientemente. Para mostrarle cómo funciona, aquí hay un código abreviado de ejemplo:
Productos Destacados
El código abreviado del producto destacado le permite agregar todos sus productos favoritos y mostrarlos en su página web. Así es como se ve el código abreviado:
Venta de productos
Ejecutar ventas de vez en cuando es una excelente manera de atraer más tráfico a su tienda en línea y también de obtener más clientes que regresan.
¿Quieres poner algunos productos a la venta? El shortcode de productos de venta te permite hacer esto y más.
Así es como se ve el código abreviado:
Una vez que hayas agregado este shortcode, así es como se verá el resultado:
Producto más vendido
¿Qué tal mostrar sus productos más vendidos a los nuevos visitantes? ¿No les ayudará a determinar qué elementos mirar para empezar? ¡Por supuesto que lo hará!
Aquí es donde entra en escena el shortcode de los productos más vendidos.
Si desea exhibir sus productos más vendidos, simplemente use este código abreviado y haga que las cosas sucedan:
Producto mejor valorado
A veces tiene sentido impulsar sus productos mejor calificados para que pueda ganar la lealtad del cliente. Puede usar la función integrada de revisión y calificación que viene con WooCommerce poniendo en uso este código abreviado (ejemplo):
Producto relacionado
Si desea realizar ventas cruzadas o aumentar la venta de otros productos que se encuentran en la misma categoría que el que está viendo el visitante de su sitio web, use el código abreviado de productos relacionados. Este shortcode muestra una lista de todos los productos similares:
Facilite a sus visitantes la búsqueda de productos mediante la inserción de funciones de búsqueda en vivo e incluso filtrado en vivo dentro de sus páginas y publicaciones.
Búsqueda de Producto
Código abreviado de búsqueda de productos: [woocommerce_product_search]. Se puede utilizar para configurar una búsqueda básica de productos.
Código abreviado de filtro de producto en vivo
La funcionalidad de filtro de productos en vivo se ha vuelto tan común en las aplicaciones web y móviles que casi lo damos por sentado. Esta es la razón por la que necesita esta funcionalidad en su tienda de comercio electrónico. Habilite el filtro de productos personalizado utilizando los códigos cortos de WooCommerce como se menciona a continuación.
- [woocommerce_product_filter]
- [woocommerce_product_filter_attribute]
- [woocommerce_product_filter_category]
- [woocommerce_product_filter_price]
- [woocommerce_product_filter_tag]
3. Botón de carrito de compras/precio del producto
Añadir al carrito
Si usas este shortcode , mostrará el botón de agregar al carrito y el precio y para un producto específico, ya sea por SKU o ID.
Una vez que haga clic en el botón Publicar, notará que el código abreviado se generó con éxito y muestra el producto como disponible por su precio predeterminado, que puede agregar al carrito.
Puede usar esto para personalizar el precio del producto o el carrito de compras, mostrando el precio de oferta a sus principales clientes: ¡las opciones son simplemente infinitas!
Use este código abreviado para mostrar el valor del precio y el botón Agregar al carrito para un solo producto por su ID.
URL para agregar al carrito
Este código abreviado de WooCommerce le permite imprimir la URL en el botón Agregar al carrito de un producto específico por su ID.
Aquí hay un ejemplo para mostrarle cómo funciona:
Solución de problemas de códigos cortos
A veces sucede, pegas un shortcode incorrectamente. Pero, ¿qué sucede si ha pegado el código abreviado correctamente en su lugar, pero aún no funciona?
En ese caso, primero debe verificar su código para ver si incrustó el código abreviado entre
etiquetas Si esto se encuentra como la raíz del problema, elimine estas etiquetas yendo a su editor de texto.Otras plataformas de comercio electrónico
Es necesario tener en cuenta que un diseño de este tipo no siempre es fácil para las personas que no son técnicas o simplemente necesitan poner en marcha una tienda.
Como siempre, existen otras alternativas cuando se trata de comercio electrónico. Por ejemplo, una de las plataformas más populares hoy en día, además de la mencionada aquí, es Shopify. Si desea comparar WooCommerce con Shopify, consulte el siguiente artículo: https://www.collectiveray.com/wp/wc/woocommerce-vs-shopify
En el escenario de no tener un diseñador web a la mano, crear páginas web usando estos códigos no es una opción por lo que sugerimos optar por otra plataforma como Shopify.
Si bien esto puede no ser tan personalizable como WooCommerce, Shopify siempre es una plataforma sólida para crear una tienda en línea, tiene muchas extensiones excelentes y una excelente interfaz de usuario cuando se trata de crear páginas en línea.
Por supuesto, hay muchas diferencias entre estas dos plataformas.
Pensamientos finales
Ahora que sabe qué códigos abreviados de WooCommerce son realmente útiles para usted y qué le gustaría hacer con ellos, siéntase libre de experimentar.
No solo te divertirás en el proceso, sino que también ahorrarás mucho de tu precioso tiempo que, de otro modo, se habría desperdiciado creando las páginas importantes de tu tienda WooCommerce desde cero.
Con suerte, este tutorial ha demostrado ser de ayuda para usted. Para obtener más sugerencias y consejos al respecto, no olvide consultar este espacio con frecuencia para futuras actualizaciones.
Deja una respuesta