Cómo crear su propia página de tienda de Elementor WooCommerce 2024

Páginas de la tienda de WooCommerce

Sabemos muy bien que la creación de una tienda web incluye elementos específicos que son necesarios para que el usuario tenga toda la información relevante sobre el producto . Cada tienda tendrá páginas que presenten un producto o grupo de productos de cierta manera, y estas páginas bien diseñadas lo acercarán un paso más a una tienda web exitosa. Otras páginas que son importantes para la tienda son aquellas con información sobre la entrega, el pago, la empresa, las páginas del carrito y similares.

Aquí nos ocuparemos de páginas que muestran listas de productos disponibles en la tienda y te ayudaremos a crearlas como un profesional .

La página de la tienda Elementor WooCommerce es una página de archivo donde se muestran todos los productos de una tienda. Puede crear fácilmente esta página con el complemento WooCommerce. Una vez que haya agregado productos a su sitio, debe abrir la página sin ningún contenido y, en la configuración de WooCommerce, indique que la página es su página de Tienda.

¿Qué tenemos de esta manera? Hemos informado a WooCommerce que hemos dedicado esta página a la página de archivo de todos los productos y WooCommerce los mostrará en consecuencia. En cuanto al estilo del producto en esa página, depende en gran medida del tema que elija. Si el tema es adecuado para tiendas, puede esperar que se vea bien de inmediato y tal vez tenga algunos filtros . Pero, en caso de que no sea así, hay formas de editar la página de la tienda de WooCommerce con Elementor gratuito.

Pero, ¿y si no todo es perfecto y si hay que arreglar algo? Esto crea un problema para aquellos que no saben cómo editar el código en sí . Por supuesto, tenemos una solución. Si por algún motivo cree que la página predeterminada le parece inapropiada a continuación, le mostraremos cómo personalizarla.

Uso de widgets de Qi Addons para su página de tienda de WooCommerce

Los widgets de Qi Shop como parte de Qi Addons para Elementor son widgets elegantes que combinan perfectamente con el estilo de su sitio web, ya que se ajustan al tema que usa de forma predeterminada . Pero también ofrecen muchas opciones de personalización para que puedas diseñarlos más según tus deseos .

Para crear la página de la tienda deseada, necesita:

• Para ingresar los productos deseados (por supuesto sus categorías y etiquetas si es necesario)
• Para tener instalado el generador de páginas Elementor gratuito
• Tener Qi Addons para Elementor instalado (le mostraremos lo que puede hacer gratis y lo que puede obtener con los widgets premium).

Ahora, vamos a explicar esto. Por supuesto, no puedes crear una página de tienda sin un producto, así que ese es el primer paso. En cuanto a Qi Addons, lo elegimos por varias razones. La primera es que tiene un widget para crear listas de productos , y la segunda es que también ofrece muchos otros widgets útiles que puedes usar en tu sitio .

Crearemos una nueva página primero. La mía se llamará una página de tienda personalizada solo por ejemplo, pero simplemente puede llamarla Tienda .

Se añade como cualquier otro. Ingreso el nombre de la página, lo guardo y voy a Editar con Elementor . Por supuesto, dependiendo del tema, antes de cambiar a Elementor desde el editor de bloques, puede realizar configuraciones básicas para la página en sí . En el ejemplo, uso el tema Qi , que suele ser mi elección porque contiene una gran cantidad de configuraciones para varias partes del sitio, lo que significa mucho para mí porque no tengo que cambiar el código y tengo muchas opciones. para diseñar varias partes del sitio.

Cuando ingresa a Elementor, lo primero que debe hacer es encontrar widgets de productos escribiendo ‘buscar’ en el campo de búsqueda. Reconocerá los widgets de Qi por sus íconos rojos inherentes .

Quizás el más importante para nosotros es la Lista de productos , que nos permite mostrar una lista de productos, todos o productos seleccionados según criterios determinados . Este es un widget gratuito.

Y no nos olvidemos de los demás. Product Category List sirve para mostrar las categorías de nuestra tienda, además es gratis. El widget Product Slider ofrece una forma interesante de mostrar productos usando controles deslizantes, también es gratis. La Comparación de productos nos ayuda a mostrar productos seleccionados y comparar sus características: este es un widget premium. En caso de que use el tema Qi, también tendrá Product List Essentials , que ofrece una forma de mostrar listas de productos de ciertas demostraciones de temas, por lo que no nos centraremos en eso.

Como dije, la lista de productos es el widget más importante para mí y lo estoy agregando a la página.

Como ya sabes, cuando agregas widgets en la página, encontrarás su configuración a la izquierda y, a la derecha, puedes ver en vivo cómo se verá el widget en tu página .

Las pestañas General y Estilo están vinculadas al propio widget, mientras que la pestaña Avanzado está en la configuración de la pestaña de Elementor y ya le resultará familiar si alguna vez ha agregado un widget a una página. En cualquier caso, Elementor es tan fácil de usar que no necesitarás explicaciones especiales, especialmente para este widget donde todo es intuitivo y fácil de navegar.

¿Por qué nos gusta el widget Qi Addons? Debido a que podemos determinar por nosotros mismos cuántas columnas queremos que tenga la lista , podemos administrar nosotros mismos el espacio entre los elementos . Podemos determinar el tamaño de las imágenes , podemos elegir cuántos productos habrá en nuestra página , si usaremos paginación y de qué tipo, si tenemos más de una página de producto. Qi entra en detalles incluso con opciones de fuente y configuraciones de desplazamiento . Hay varios diseños para las listas. También podemos mostrar solo productos de una determinada categoría, etiqueta, autor y diferentes criterios de visualización disponibles.. Con Qi, agregar widgets a menudo se convierte en un proceso creativo y alegre y estamos seguros de que tendrá curiosidad por explorar la abundancia de opciones que ofrece por su cuenta.

A primera vista de la pestaña Estilo, se sorprenderá de lo detalladas que son las configuraciones. Verás que la estilización se divide en categorías, lo que facilita la navegación .

Otros widgets se utilizan prácticamente de la misma manera. Siéntase libre de jugar y experimentar, ya que todos los cambios que realice serán visibles en tiempo real y podrá deshacer fácilmente cualquier movimiento .

Siempre puede buscar inspiración en la página de inicio del widget con el autor si se pregunta cómo diseñar su lista, pero de nuevo, juegue.

Una gran adición a la página de su tienda también puede ser el widget Slider . Puede hacer que la página se vea más dinámica e interactiva , un elemento que está en movimiento siempre llama la atención del usuario, sobre todo cuando este puede interactuar con él.

La combinación del widget de lista de productos y el widget de control deslizante de productos puede ser muy interesante .

Además, otro widget que me gusta usar en la página de la tienda y en otras es la Lista de categorías de productos . Sirve para mostrar determinadas categorías de forma interesante y ayudar a los usuarios a llegar a un grupo de productos que les interesan .

El widget de comparación de productos también es muy interesante y útil, especialmente porque a los compradores de hoy en día les gusta tomar decisiones informadas sobre las compras y les encanta comparar productos para asegurarse de que están tomando la mejor decisión. Agregar la comparación de productos de WooCommerce también es muy fácil y se puede hacer sin ningún conocimiento técnico o de codificación especial.

En conclusión

Como puede ver, crear la página de la tienda Elementor WooCommerce no es una ciencia espacial y puede hacerlo todo usted mismo. También puede aprender fácilmente cómo editar la página de la tienda de WooCommerce y ajustarla para que se ajuste perfectamente a sus necesidades. Si tiene alguna pregunta relacionada con el tema de este artículo, no dude en comunicarse con nosotros en la sección de comentarios.