Listar productos en Elementor con la tabla de productos WooCommerce

En esta publicación, le mostraremos cómo combinar Elementor y WC Product Table para crear un sitio de WordPress más personalizado y al mismo tiempo aumentar las ventas de su tienda WooCommerce.

WordPress simplifica el proceso de creación de un sitio web y su puesta en funcionamiento rápidamente. WooCommerce es un plugin de WordPress que le permite convertir cualquier sitio web de WordPress en una tienda en línea completamente funcional. Corre el riesgo de producir un sitio imitador; sin embargo, si continúa con las opciones y características predeterminadas, es posible que esto no sea apropiado para las necesidades de su negocio. Es fundamental localizar las mejores herramientas para diseñar y personalizar su sitio web hasta que sea lo que desea.

plugin de WordPress y WooCommerce disponibles para mejorar la funcionalidad de su tienda; Elementor, por ejemplo amp es la herramienta más sencilla para personalizar la página de su producto WooCommerce. Aunque es una de sus ventajas más importantes, también tiene algunos inconvenientes importantes. Por amp , cuando combina plugin de diferentes autores, corre el riesgo de encontrar errores de compatibilidad y otras complicaciones; Este no es el caso cuando se utilizan la tabla de productos de WooCommerce y plugin para sitios web de WordPress. Tendrá un mayor control sobre la apariencia y funcionalidad de su sitio cuando utilice cualquiera de estos plugin , y pueden usarse en conjunto para obtener resultados aún más excelentes.

Una descripción general rápida de la tabla de productos de WooCommerce y los marcos de Elementor

Como se indicó anteriormente, existe una amplia selección de plugin de WordPress disponibles para ayudarlo a crear un mejor sitio de WordPress personalizado según sus requisitos específicos. Algunos plugin están diseñados para usarse a gran escala, mientras que otros están diseñados para agregar un aspecto o característica particular.

Elementor es un amp del primer tipo de aplicación:

Nuestro plugin de creación de páginas le ofrece una interfaz completamente nueva para construir páginas web y crear su sitio web de WordPress. Obtendrá un gran control sobre la forma en que se crea su sitio web al seleccionar y personalizar una extensa biblioteca de widgets, bloques y diseños.

Si bien la tabla de productos de WooCommerce es una solución más general, también es más específica:

Este plugin le permite crear tablas dinámicas y totalmente personalizables que enumeran sus productos y servicios de WooCommerce. Sin embargo, debido a su interacción con WooCommerce, estas tablas son particularmente adecuadas para mostrar artículos y servicios de una manera fácil de usar y visualmente atractiva para los compradores en línea. El plugin Posts Table Pro interactúa igualmente con Elementor y enumera cualquier tipo de contenido de WordPress en una tabla en lugar de simplemente productos WooCommerce (si desea mostrar algo separado de los productos, como publicaciones, páginas o documentos), puede usarlo en su lugar.

Cuando se usan juntos, Elementor y WooCommerce Product Table brindan capacidades significativamente diversas. Puede utilizarlos para producir algunos impactos muy significativos que ayudarán a aumentar la cantidad de ventas de su tienda WooCommerce.

Ahora es el momento de ponerse manos a la obra. En las siguientes secciones, veremos algunos amp del mundo real de cómo puede utilizar la tabla de productos de WooCommerce y Elementor para crear efectos similares a los que se muestran arriba.

Cuando se trata de combinar estos dos plugin , el cielo es el límite, y estas son sólo algunas de las posibilidades. Con un poco de prueba y error, puedes crear varias páginas utilizando el mismo enfoque fundamental que demostraremos.

En primer lugar, querrás asegurarte de que ambos plugin estén instalados correctamente en tu sitio. Es bueno que instalar Elementor y configurar la tabla de productos de WooCommerce sea sencillo y sencillo. WooCommerce también debe estar instalado y habilitado antes de poder continuar con este paso. Entonces estarás listo para empezar a trabajar en tu proyecto.

Para incorporar una tabla de productos de WooCommerce en un editor de texto o widget de código corto, siga estos pasos:

Comencemos con la aplicación más fundamental y beneficiosa posible. Alternativamente, si simplemente desea utilizar una tabla de productos dinámica en su sitio web de Elementor, puede agregarla a un widget y hacer que aparezca en la parte frontal del sitio web.

Asegúrate de utilizar el editor Elementor cuando abras cualquier página o publicación para lograr esto. Si se le presenta la interfaz familiar de WordPress, haga clic en el botón Editar con Elementor para cambiar a la interfaz de Elementor:

Si es la primera vez que trabaja con Elementor, hagamos un pequeño recorrido por la plataforma. Aparecerá un área grande a la derecha donde se mostrará su contenido y se actualizará en tiempo real a medida que lo agregue y modifique. En el lado izquierdo de la pantalla, hay una lista de 'widgets' que puede arrastrar al área designada y luego reorganizar y configurar según sea necesario:

Una tabla de productos se puede utilizar con una variedad de widgets de Elementor diferentes. Sin embargo, si solo desea mostrar una única tabla de productos en una página, puede lograrlo incluyendo una sección de texto introductorio en el código HTML de la página. Levante el widget del Editor de texto y muévalo a un lugar vacío de la siguiente manera:

Después de eso, puedes hacer clic dentro del widget para eliminar el texto predeterminado y reemplazarlo con el contenido que desees. Cuando se trata de la tabla de productos en sí, puedes incluirla pegando este simple código corto:

[tabla de productos]

Cuando insertes el código corto en tu página, la tabla aparecerá en la ubicación que especifiques, que puedes verificar viéndola en la parte frontal:

Si solo desea utilizar un elemento para el código en sí, puede utilizar el widget Shortcode.

Nunca olvides guardar la página cuando hayas terminado de colocar la mesa, sin importar dónde decidas colocarla. Después de eso, probablemente querrás realizar algunos cambios en la apariencia y el funcionamiento de la tabla.

Regrese a su panel de WordPress y navegue hasta la pestaña WooCommerce> Configuración para completar esta tarea. Las tablas de productos se pueden encontrar seleccionando Productos en la parte superior de la pantalla y luego Tablas de productos:

Puede encontrar una lista completa de opciones para configurar su tabla de productos WooCommerce aquí. Tienes control total sobre la información que aparece en la tabla y puedes personalizarla agregando filtros y variables, entre otras cosas. Consulte la documentación del plugin para obtener más información sobre las diferentes opciones.

Podrás modificar la tabla de productos que acabas de crear usando Elementor sin tener que hacer nada más. Una vez que haya terminado de personalizar la tabla según sus especificaciones, simplemente guarde los cambios y ¡listo!

Se pueden utilizar acordeones, pestañas y botones para organizar varias tablas de productos.

La solución anterior funciona bien si desea presentar una única tabla con sus productos WooCommerce. Si va a construir muchas tablas, cada una de las cuales tiene una categoría diferente de objetos, esta no es la mejor opción.

Hay varias formas diferentes de lograr esto en Elementor. El widget Acordeón, por amp , se puede utilizar para generar el mismo efecto que vimos en el último caso de estudio. Comenzando desde el área de edición de la derecha, mueva el widget Acordeón al área de edición de la izquierda.

Puede crear tantas pestañas separadas como desee haciendo clic en los signos más y puede personalizar los títulos y el texto dentro de cada una. Además, puede agregar una tabla de productos a una o más pestañas usando el mismo código corto mencionado anteriormente.

Por supuesto, simplemente agregar el código abreviado básico dará como resultado una sucesión de tablas de productos similares, que probablemente no sea lo que estaba buscando en primer lugar. En su lugar, deberá personalizar cada código abreviado para mostrar solo productos específicos (por amp , artículos de una categoría específica) en lugar de todos los productos.

El método que utilice estará determinado por los productos que desee incluir y omitir en cada tabla en cuestión. Para obtener información adicional, consulte la guía completa para personalizar los códigos cortos de la tabla de productos de WooCommerce.

Vale la pena señalar que puedes lograr un efecto similar con la ayuda de otros widgets útiles de Elementor; esto comprende el widget Toggle y el widget Tabs, entre otros componentes. En términos de presentar varias tablas de productos WooCommerce de una manera atractiva y bien organizada, Elementor es su herramienta de referencia.

¡Limpia tu marcado descuidado gracias a los organizadores HTML, CSS y JavaScript en línea gratuitos!

Piense seriamente en el diseño de su sitio web de comercio electrónico si desea que su empresa se destaque de la competencia. Por amp , querrá determinar la forma más efectiva de exhibir sus productos, idealmente en un estilo que sea fácil de usar y visualmente atractivo a la vista.

Afortunadamente, usar el plugin WooCommerce Product Table con Elementor hace que esta sea una tarea sencilla. El código abreviado de su tabla de productos se puede utilizar para mostrar todo lo que su sitio tiene para ofrecer (o simplemente una selección) de una manera verdaderamente dinámica.

Hanson F.

Mensajes recientes

Cómo usar encabezados y pies de página con Elementor

Los encabezados y pies de página de un sitio web son elementos esenciales. En la mayoría de los casos, el encabezado proporciona navegación...

6 de enero de 2022

Comparación de temas de WordPress: Astra vs OceanWP

Dos de los temas de WordPress más populares del mercado son Astra y OceanWP. Profesional…

2 de enero de 2022

Comparación de temas de noticias de WordPress: periódico vs. Astra

Crear un excelente sitio web de noticias no requiere que te conviertas en diseñador web. Nosotros…

25 de octubre de 2021

Cree un sitio web relacionado con noticias con Newspaper Theme

El tema Periódico es uno de los temas de WordPress más importantes diseñados por tagDiv, un…

18 de octubre de 2021

Cómo construir un comercio electrónico con el constructor Avada WooCommerce

Cuando se trata de configurar una tienda en línea, WooCommerce es el plugin ideal. Él…

4 de octubre de 2021

Cómo usar encabezados fijos y efectos de desplazamiento con Elementor

Un encabezado es generalmente lo primero que ve una persona cuando visita su sitio web,…

21 de septiembre de 2021