Bloques en WooCommerce. Monta unha tenda online con Gutenberg

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email
(Votos: 2 Promedio: 5)

Seguimos falando un día máis de recursos e alternativas para montar a túa tenda online con WordPress.

Que opinas da serie?

Neste caso voume centrar no que podemos deseñar e construír desde o editor de WordPress utilizando bloques de Gutenberg propios de WooCommerce.

Neste caso teño instalado, naturalmente ademais de WooCommerce, o plugin de WooCommerce Blocks. Pero non é obrigatorio para poder utilizar o que imos ver a continuación.

Mostrareiche todos os bloques propios de tendas online, para que serven e que opcións teñen.

Ao final déixoche un vídeo onde podes ver en real como funcionan algúns deles. Interesante sobre todos os que teñen que ver coa páxina da tenda e os diferentes filtros.

Por certo, direiche que estou a utilizar o tema GeneratePress para realizar toda a serie de artigos sobre WooCommerce, pero funcionaría exactamente igual se elixes calquera outro.

Imos alá!

Bloque: todos os produtos

Cadro dos produtos da tenda en formato de cuadrícula.

Podes realizar os seguintes axustes de deseño:

  • Escolle o número de columnas da cuadrícula.
  • Escolle o número de filas da cuadrícula.
  • Aliña todos os elementos verticalmente.
  • Mostra ou ocultar a posibilidade de ordenar os produtos.
  • Selecciona a ordenación por defecto.
Bloque de cuadrícula de producto en WooCommerce
Bloque de todos os produtos

Bloque: filtrar produtos por atributo

Mostra unha lista de filtros baseados nun atributo seleccionado de entre os que están creados e ten produtos asignados na túa tenda online.

O bloque ten as seguintes propiedades:

  • Selecciona o atributo polo que filtrar.
  • Mostra ou oculta o total de produtos asignados a ese atributo.
  • Selecciona o nivel do encabezado.
  • Selecciona a lóxica da consulta: “and” ou “or”.

Bloque: filtros de produtos activos

Mostra os filtros que están activos nese intre, é dicir, os que están a afectar á cuadrícula de produtos.

Podes configurar as seguintes opcións:

  • Estilo de visualización dos filtros activos: formato lista ou ficha.
  • Selecciona o nivel do encabezado.

Bloque: filtrar produtos por prezo

Coloca unha barra de control móbil entre o prezo máis baixo e máis alto da tenda que serve para filtrar os produtos por intervalo de prezo.

Este módulo ten algunha configuración:

  • Escolle o modo de mostrar o rango de prezos: en formato texto fixo ou formato editable onde se poida inserir o prezo vía teclado numérico.
  • Botón de filtrado para evitar actualización automática.
  • Nivel de encabezado
Bloques de filtros de tienda online en WooCommerce
Así se vería a túa tenda online aplicando todos os bloques anteriores

Bloque: todas as valoracións

Crea unha lista con todas as valoracións de produtos, que se poden ordenar por data, por valoración máis alta ou por valoración máis baixa.

O bloque ten varias configuracións:

  • Elixe se mostrar ou non o nome do produto, a valoración, o nome do usuario que valora, o seu avatar (ou foto do produto), a data de valoración ou o contido de valoración.
  • Mostra ou non a posibilidade de ordenar e cal é a ordenación por defecto.
  • Escolle o número de valoracións e se se poden cargar máis.

Bloque: categoría destacada

Destaca en grande unha categoría elixida indicando o título da categoría, a descrición, a foto asociada de fondo e unha chamada á acción.

Dálles forma e cor aos elementos:

  • Selecciona se mostrar ou non a descrición da categoría.
  • Elixe unha cor de superposición semitransparente por encima da imaxe destacada da categoría.
  • Coloca a imaxe como a ti máis che guste
  • Escolle o tipo de botón a mostrar.
  • Indica o radio do borde.
  • Configura a cor de texto e a cor de fondo do mesmo.
  • Manexa a ligazón do botón. Abre nunha nova pestana? Ten un nofollow?

Bloque: produto destacado

Podes destacar un produto único, incluso unha das súas variacións, indicando título de produto, descrición curta, foto destacada e chamada á acción.

As súas opcións de configuración son similares ás da categoría destacada, quedando algo tal que así.

Bloque de producto único en WooCommerce
Un produto destacado cunha chamada á acción

Bloque: produtos elixidosmanualmente

Crea un cadro de produtos en formato cuadrícula elixíndoos manualmente.

O cadro é bastante configurable:

  • Escolle o número de columnas que terá.
  • Podes aliñar os botóns verticalmente.
  • Podes elixir mostrar ou non o título de cada produto, o seu prezo, a súa valoración e o botón de engadir ao carriño.
  • Indica cal é o criterio de ordenación.
  • Escolle os produtos para mostrar.

Bloque: produtos máis vendidos

Crea un cadro de produtos en formato cuadrícula cos produtos máis vendidos desde que se instalou WooCommerce.

Podes personalizar o deseño coas seguintes opcións:

  • Indica o número de columnas e filas do cadro.
  • Escolle se aliñar ou non verticalmente o bloque.
  • Mostra ou non o título de cada produto, o prezo, a valoración ou o botón de engadir ao carriño.
  • Ademais, podes escoller mostrar os produtos de todas ou dalgunha categoría en concreto.

Bloque: lista de categorías de produtos

Mostra unha lista de categorías de produtos en formato despregable ou lista.

O bloque ten as seguintes propiedades:

  • Mostra ou non a cantidade de produtos asignados a esa categoría.
  • Mostra ou non a xerarquía de categorías.
  • Mostra ou non as categorías baleiras.
  • Elixe se as categorías móstranse en formato despregable ou lista.
Bloque de categoría de producto en WooCommerce
Desplegable de categorías de WooCommerce

Bloque: produtos por categoría

Crea un cadro de produtos en formato cuadrícula cos produtos asignados á categoría escollida.

Podes personalizar as seguintes opcións:

  • Selecciona as categorías que se mostrarán na cuadrícula.
  • Indica o número de columnas e filas do cadro.
  • Escolle se se debe aliñar ou non o bloque verticalmente.
  • Mostra ou non o título de cada produto, o prezo, a valoración ou o botón de engadir ao carriño.
  • Indica cal é o criterio de ordenación.

Bloque: produtos recentes

Crea un cadro de produtos en formato cuadrícula cos produtos máis recentemente engadidos á tenda  online.

As opcións son moi similares ao bloque anterior.

Bloque: produtos en oferta

Crea un cadro de produtos en formato cuadrícula cos produtos que nestes momentos están en oferta.

De novo, as opcións deste bloque son iguais que os dous anteriores.

Bloque: produtos por atributo

Crea un cadro de produtos en formato cuadrícula cos produtos seleccionados a partir dos atributos escollidos.

Ademais de escoller por que atributo se deben listar os produtos, as opcións para configurar son idénticas aos bloques anteriores.

Bloque: produtos mellor valorados

Crea un cadro de produtos en formato cuadrícula cos produtos máis valorados polos clientes.

A risco de ser pesado direi que as opcións de configuración son iguais que os bloques inmediatamente anteriores: selección de columnas e filas, aliñación vertical, un filtro de categorías (mostrar produtos de todas ou só dalgunhas específicas) e mostrar ou ocultar diferentes partes do contido.

Bloque: valoracións por produto

Mostra as valoracións dun produto en concreto que ti elixas.

As opcións de deseño son as seguintes:

  • Escolle o produto do que mostrar os valores.
  • Elixe se mostrar ou non o nome do produto, a valoración, o nome do que valora, o seu avatar (ou foto do produto), a data de valoración ou o contido de valoración.
  • Mostra ou non a posibilidade de ordenar e cal é a ordenación por defecto.
  • Escolle o número de valoracións e se se poden cargar máis.
Bloque de valoraciones de producto en WooCommerce
Valoracións de clientes

Bloque: valoracións por categoría

Mostra as valoracións dos produtos que están asignados a unha categoría concreta.

Unha vez escollida a ou as categorías dos produtos dos que mostraremos as valoracións, as opcións de configuración son iguais que as do bloque anterior.

Bloque: procura de produtos

Coloca unha barra de procura para atopar máis sinxelamente os produtos.

O bloque non ten opcións. Insírese e funciona.

Bloque: produtos por etiqueta

Crea un cadro de produtos en formato cuadrícula segundo a etiqueta seleccionada.

Podes modificar as seguintes opcións:

  • Indica o número de columnas e filas do cadro.
  • Escolle se aliñar ou non verticalmente o bloque.
  • Mostra ou non o título de cada produto, o prezo, a valoración ou o botón de engadir ao carriño.
  • Ademais, podes escoller mostrar os produtos de todas ou dalgunha categoría en concreto.

Como funcionan os bloques en WooCommerce? Mira o vídeo

Conclusión

Como podes ver existen bloques propios de WooCommerce que se poden inserir en diferentes partes da túa web desde o editor de WordPress.

Baixo o meu punto de vista aínda hai moita (moitísima) marxe de mellora neste aspecto. Os bloques que vimos non chegan para abarcar todos os deseños posibles da túa tenda e é posible que necesites plugins adicionais.

Iso non significa que non debas coñecer cales son e como funcionan. Por certo, disto mesmo vou falar na WordCamp España. Pásate ver o relatorio se che presta 😊.

Gutenberg e o novo paradigma de bloques están aquí e serán o futuro de WordPress.

Máis vale habituarse e seguir moi de preto todo o que está a avanzar.

E ti, utilizáchelos algunha vez? Que opinas?

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

Os últimos artigos

Deixa un comentario



2 comentarios

  1. Hola Anxo. Gracias por tus posts. a ver si me puedes contestar una pregunta. ¿es posible que haya temas incompatibles con los bloques de productos? tengo una web en la que tenía en la página de la tienda un bloque y salía perfectamente. He cambiado el tema y aunque al editar la página de la tienda veo el bloque en la pçagina en sí no lo veo. ¿Puede haber incompatibilidad o hago algo mal?

    Responder
    • Hola Beatriz. Yo no me he encontrado en los temas que he probado ninguna incompatibilidad, pero podría ser. ¿Qué tema es en concreto? A lo mejor no es el tema sino alguno de los otros plugins instalados. Un saludo.

      Responder