5 formas sencillas de mostrar productos en una tienda online de wordpress

Mostrar productos en una tienda en línea de WordPress puede ser una pesadilla para un novato en el comercio electrónico. Cuando comencé a construir mi tienda en línea, pensé que sería una obviedad colocar mis artículos en la página de inicio de mi sitio web. ¡Pero toda la tarea fue una lucha bastante cuesta arriba!

De acuerdo con mi propia experiencia, hacer que los productos aparezcan en su sitio web puede consumir mucho de su tiempo, especialmente si es nuevo en el comercio electrónico. Llegué a aprender que es una tarea que requiere un buen conocimiento de WordPress.

Productos mostrados en una tienda online

Por Jan Saints (trabajo propio): CC-BY-2.0

Si está creando una tienda en línea de WordPress por primera vez, definitivamente necesita aprender cómo configurar un sitio web general con este sistema de administración de contenido. También necesita familiarizarse con cosas como complementos de comercio electrónico, widgets y códigos cortos. Además, si está utilizando WooCommerce, debe conocer las opciones de visualización de productos disponibles y comprender la configuración general del complemento. Esta sencilla guía sobre cómo crear una tienda en línea y exhibir artículos (por Riccardo Andronaco) explica todo esto y me pareció bastante útil.

En este artículo, voy a discutir cinco formas de mostrar y organizar productos en un sitio web de comercio electrónico de WordPress. Siga leyendo para saber cómo hacer que los elementos aparezcan en las páginas de su sitio web y cómo organizarlos en consecuencia.

Cinco formas de mostrar y organizar elementos en una tienda en línea de WordPress

1. El método automático
2. Widgets
3. Complementos
4. Códigos cortos
5. Deslizadores

1. Usando el método automático

Como sugiere el nombre, no tiene que hacer nada para que los productos aparezcan en la página de la tienda. Los elementos se muestran a medida que los agrega desde el tablero. Se organizan automáticamente en orden alfabético o aleatoriamente con o sin categorías según la configuración de visualización de WooCommerce.

La página de inicio solo puede acomodar una cierta cantidad de productos, lo que significa que si tiene una gran cantidad de productos, algunos de ellos se colocarán en las páginas 2, 3, 4 y así sucesivamente.

Este método dificulta que sus clientes conozcan todos los tipos de productos en su tienda, ya que no incluye categorías y algunos artículos están ocultos en otras páginas.

Es posible que deba evitar este método si puede utilizar algunos métodos mejores (descritos a continuación) para mostrar elementos. Pero si tiene varios elementos que pueden caber en una página, es decir, la página de inicio, puede adoptar este método.

Productos mostrados aleatoriamente

Por Jan Saints (trabajo propio): CC-BY-2.0

2. Usar widgets

Como sabrá, un widget en WordPress es un pequeño bloque de contenido que se puede colocar en las secciones de la barra lateral y el pie de página. Proporciona una forma sencilla y sencilla de personalizar un sitio web. Algunos widgets comunes incluyen: publicaciones recientes, cuadro de búsqueda, categorías y menú de pie de página.

En un sitio web de comercio electrónico, los widgets se pueden utilizar para mostrar categorías de productos en la barra lateral o en el pie de página. Por lo tanto, pueden ser una excelente manera de impulsar el método automático (discutido anteriormente) que no incluye categorías de productos.

Algunos grandes widgets que vienen con temas de WordPress de comercio electrónico incluyen productos populares, productos recientes, productos más vendidos, productos mejor calificados y productos destacados. Estos widgets son personalizables, lo que significa que puede cambiarles el nombre con las categorías reales de sus elementos. También puede arrastrarlos y soltarlos para obtener un arreglo que se adapte a su estilo.

Dado que los widgets solo pueden mostrar productos en las barras laterales y pies de página, la mayoría de los propietarios de tiendas en línea los encuentran indeseables. El mejor lugar para mostrar elementos es en la barra principal de una página, algo que no se puede lograr con los widgets.

Productos mostrados en una barra lateral con la ayuda de un complemento

Por Jan Saints (trabajo propio): CC-BY-2.0

3. Uso de complementos

En WordPress, un complemento es un conjunto de programas que contiene un grupo de funciones, características o servicios. En este sistema de gestión de contenido, hay decenas de miles de complementos (tanto gratuitos como premium) adecuados para una amplia gama de necesidades. Hay complementos para todo tipo de sitios web, por ejemplo, hay complementos para comercio electrónico (como WooCommerce), directorios, blogs, plataformas de reventa y reserva.

Cuando se trata de mostrar y organizar artículos en una tienda en línea, hay una gran cantidad de complementos que puede usar para realizar esta tarea. Pero la mayoría de los complementos no son del todo efectivos, por lo que debe optar por los que se ha demostrado que funcionan.

Los complementos más recomendados para mostrar elementos en una tienda en línea de WordPress son Ultimate Product Catalog y WooCommerce Product Sort and Display.

El complemento de clasificación y visualización funciona mejor con otro complemento llamado Endless Scroll que le permite mostrar una gran cantidad de elementos en la página de su tienda. Después de instalar y activar los dos complementos, debe ir a las categorías de productos y arrastrar y soltar las categorías para lograr la visualización correcta. A continuación, puede establecer la cantidad de productos que se mostrarán por categoría con enlaces para ver todos.

En cuanto a la clasificación, el complemento viene con clasificación predeterminada y clasificación por popularidad, novedad, precio (de menor a mayor y viceversa), en oferta y destacado. Algunas de estas funciones vienen con la versión premium del complemento, por lo que se recomienda utilizar esta versión.

El otro complemento, Ultimate Product Catalog, es un poco complejo. Después de instalar y activar el complemento, debe agregar todos sus productos y categorías para obtener ID que pueda usar en códigos cortos para mostrar sus artículos. También necesita crear algunos catálogos pequeños para sus artículos.

Por ejemplo, el siguiente código abreviado mostrará productos en el catálogo con ID "x".

o

El complemento está repleto de características como diseños de catálogo personalizables, precios de venta, importación de productos, símbolo de moneda, rutas de navegación, uso compartido de redes sociales, revisión y calificaciones de productos, integración de SEO by Yoast y una gran cantidad de opciones de configuración.

Los estilos del catálogo de productos incluidos en el complemento incluyen: diseño minimalista, en bloque, flotante y con pestañas. Algunos de estos estilos, y también algunas de las funciones descritas anteriormente, están disponibles con la versión premium del complemento.

Productos mostrados en un estilo de bloque con la ayuda de un complemento

Por Jan Saints (trabajo propio): CC-BY-2.0

4. Uso de códigos cortos

Si está utilizando WooCommerce para su tienda en línea, puede encontrar códigos cortos como la forma más sencilla de mostrar productos en la página de su tienda. Los códigos abreviados funcionan con ID de producto y categoría y SKU, y se pueden copiar y pegar en la página de la tienda para mostrar los artículos. Vea los códigos cortos a continuación.

- muestra la lista de categorías.

- muestra un número específico de categorías y funciona bien con los siguientes argumentos. Nota: estos argumentos también pueden funcionar con este shortcode.

• number = "null" - para mostrar el número de categorías.
• orderby = "name" - para mostrar categorías cuando se ordenan por nombre. Nota: El valor "nombre" se puede reemplazar con fecha, rand (aleatorio), modificado y ninguno.
• order = "asc" - para mostrar categorías cuando se ordenan en orden ascendente. Nota: El valor "asc" se puede reemplazar con "desc" para ordenar en orden descendente.
• columnas = "x" - para mostrar columnas "x" de una categoría.
• hide_empty = "1" - para ocultar categorías.
• hide_empty = "0" - para mostrar categorías.
• parent = "0" - para mostrar categorías de nivel superior.
• ids = "x" - para mostrar la categoría con id "x".
• categoría = "x" - para mostrar la categoría "x".

• Categories_limit: para mostrar un número limitado de categorías.
• archive_template: para mostrar una plantilla de archivo específica para una lista en particular.
• design_scheme - para mostrar un color o tamaño específico.
• sort = "0" - para deshabilitar el selector de clasificación de productos.
• sort = "1" - para habilitar el selector de clasificación de productos.
• = "1" - para habilitar el código corto.
• post_type: para mostrar las entradas de un tipo de publicación diferente.
• per_row - para mostrar productos por fila.
• vacío: para mostrar un texto determinado cuando no hay productos para mostrar.

• - muestra los elementos "y" de la categoría "x" que se muestran en columnas "z" y se organizan en orden descendente según la fecha en que se publicaron.
• - muestra la lista de productos.
• - muestra el nombre del producto. Nota: El valor "nombre" se puede reemplazar con otros valores para formar más códigos cortos. Algunos de estos valores incluyen: precio, descripción, descripción breve, tabla de atributos, SKU, envío, galería y categorías relacionadas.
• - muestra categorías para la página de listado de productos actual.
• - muestra productos para la página de listado de productos actual.
• - muestra migas de pan.
• - muestra un número limitado de productos.
• - muestra una URL de regreso a los productos que apunta a la página principal de listado de productos.
• - muestra los productos actualmente en venta.
• - muestra el producto con id "x".
• - muestra productos con identificadores "x", "y" y "z".
• - muestra el producto con SKU "xyz"
• - muestra el producto con SKU "abc", "def" y "ghi".
• - muestra el precio y el botón añadir al carrito para un producto con id "x".
• - muestra el precio y el botón Agregar al carrito para un producto con SKU "x".
• - muestra el máximo de elementos "x".
• - muestra productos con un determinado atributo, es decir, el atributo "color" y el color es "negro".

• - muestra "x" los productos recientes que se muestran en columnas "y" y se organizan en orden descendente según la fecha en que se publicaron.
• - muestra "x" los productos destacados que se muestran en columnas "y" y se organizan en orden descendente según la fecha en que se publicaron.
• - muestra "x" productos populares que se muestran en columnas "y" y se organizan en orden descendente según la fecha en que se publicaron.
• - muestra "x" los productos mejor calificados que se muestran en columnas "y" y se organizan en orden descendente según la fecha en que se publicaron.
• - muestra "x" los productos más vendidos en columnas "y" y organizados en orden descendente según la fecha en que se publicaron.
• - muestra los productos relacionados con "x" que se muestran en columnas "y" y se organizan en orden descendente según la fecha en que se publicaron.
• : Muestra la lista de productos con la plantilla de lista clásica. Nota: Se pueden usar otras plantillas como 'cuadrícula' y 'predeterminado' en lugar de 'lista'.
• - muestra productos de categoría con id "x" y con plantilla de lista clásica.

Nota: Si es bueno codificando, puede modificar estos códigos cortos para lograr una mejor visualización y disposición del producto.

Un código corto pegado en una página

Por Jan Saints (trabajo propio): CC-BY-2.0

5. Usar controles deslizantes

En caso de que no lo supiera, un control deslizante es un elemento de la página web que se utiliza para resaltar un grupo de publicaciones seleccionadas. Es como una presentación de diapositivas, lo que significa que muestra una publicación a la vez, pasando de una a la siguiente automáticamente o haciendo clic.

Para mostrar productos con controles deslizantes, debe reemplazar las publicaciones con sus productos. Cuando se trata de crear un control deslizante de producto, necesita un complemento de control deslizante receptivo como Soliloguy. Después de instalar y activar el complemento, debe agregar un nuevo control deslizante, y puede hacerlo mediante el uso de fotos, enlaces y otros detalles necesarios de sus elementos. El siguiente paso es guardar o publicar su control deslizante para obtener un código corto y una etiqueta de plantilla.

Finalmente, debe copiar y pegar el código corto en su página de inicio o en cualquier otra página para mostrar los productos. La etiqueta de plantilla puede mostrar elementos en la sección de encabezado de su tema. Solo necesita copiar la etiqueta, abrir su header.php y pegarlo en la página codificada.

WooCommerce tiene un complemento llamado Products Slider que está diseñado para el comercio electrónico. Funciona como un complemento de control deslizante típico, pero presenta más configuraciones y opciones. Te animo a que veas si te puede ayudar con la exhibición y disposición de los artículos.

Productos mostrados en un control deslizante

Por Jan Saints (trabajo propio): CC-BY-2.0

Conclusión

Mostrar y organizar elementos en su sitio web de comercio electrónico de WordPress es bastante simple y fácil con estos cinco métodos. Si le ha resultado difícil mostrar y organizar productos en su tienda en línea, ahora debería comenzar a realizar estas dos tareas con mucha facilidad. Simplemente elija un método que crea que puede funcionar para usted y coloque esos productos en su página de inicio de una manera más inteligente.

Referencias

1. Mening. R. Cómo construir una tienda en línea con WordPress y WooCommerce. websitesetup.org . Configuración del sitio web. (2017).
2. Andronaco R. Cómo crear una tienda en línea usando WooCommerce y Wordpress: Guía simple para la configuración perfecta de un sitio web de comercio electrónico. (2017).
3. Rastaurius E., Diseño Web Etoile. Catálogo de productos de comercio electrónico para WordPress. wordpress.org. implecode. (2017).
4. WooCommerce. Códigos cortos incluidos con WooCommerce. docs.woocommerce.com . WooCommerce. (2016).
5. Truman S., Tuan N., Ar3rev Software. Complemento de visualización y clasificación de productos de WooCommerce. wordpress.org. Software Ar3rev. (2013).
6. YiThemes. Yith Complemento de desplazamiento infinito. wordpress.org. YITHEMES. (2017).
7. Razzak S. Una guía exclusiva para el complemento deslizante de productos WooCommerce. cloudways.com. Cloudways Ltd. (2016).
8. Balkhi S. Cómo crear fácilmente un control deslizante de WordPress receptivo con Soliloquy. wpbeginner.com . WPBeginner. (2014).

© 2017 Januaris Saint Fores