Diseño de pagina de tienda de WooCommerce con bloques de Gutenberg WordPress

En lugar del editor de WordPress convencional, la versión de WordPress 5.0 presenta el Editor de Gutenberg. Este es un personalizador de páginas que le permite usar una variedad de bloques para personalizar sus páginas. Puede configurar rápidamente su página de la tienda usando WooCommerce y el Editor de bloques. Ahora veamos cómo crear una página de Tienda en el Editor de bloques con esos productos paso a paso. El plugin WooCommerce agrega bloques adicionales al Editor de WordPress Gutenberg.

Guía paso a paso

Paso 1: crea la página de la tienda

WooCommerce crea una página de Tienda para usted; Páginas > tienda es donde lo encontrarás. Se le dirigirá al editor de bloques Gutenberg de WordPress si hace clic en el enlace de edición debajo del nombre de la página de la tienda.

Paso 2: crea un diseño con el editor de bloques

Ahora que la página está en funcionamiento en su sitio de WordPress, ¡es hora de llenarla con contenido! Este es el punto en el que su página comienza a tomar forma.

Cuando busque Bloques en el Editor de bloques, tenga en cuenta que los bloques de WooCommerce tienen su propia área. Estos se pueden usar para mostrar varias categorías de contenido relacionado con la tienda. Simplemente elija uno y colóquelo en su diseño. Estos bloques son esenciales para crear una página de tienda profesional utilizando WooCommerce y Gutenberg. Puede seguir agregando los bloques sedados uno debajo del otro según la cantidad de contenido que desee agregar a su página de la tienda. Por ejemplo, puede tomar el bloque ‘productos destacados’ y arrastrarlo a la parte superior de la página como se ve a continuación. 

Una vez que coloca el bloque, le pide que seleccione el producto destacado de sus productos creados. Seleccionemos ‘Cap’ para este ejemplo.

Así es como se ve la página de la tienda después de que agregamos el bloque ‘imagen destacada’.

Paso 3: personaliza tu diseño

Es hora de modificar cada Bloque ahora que ha configurado la estructura de su página de Tienda con Bloques de Gutenberg. Es posible que sea necesario cambiar ciertas configuraciones dependiendo de cómo desee que funcione su página de la tienda. Este segmento puede ser apresurado, o puede tomarse su tiempo y realmente explorar todo lo que cada bloque tiene para ofrecer.

Explore la configuración del Bloque que se muestra en la sección de la derecha haciendo clic en cada Bloque que creó. Use el botón «Vista previa» en la esquina superior derecha de la página si no está seguro de cómo se verá el resultado final de una configuración.

Aquí hay una vista previa de mi página de prueba ‘shop’

Paso 4: Verifique su trabajo y agregue los toques finales

Ahora es el momento de guardar y probar la tienda para asegurarse de que esté en funcionamiento. Seleccione el botón «Publicar» en la esquina superior derecha de la pantalla para guardar su trabajo. No se preocupe, los visitantes de su sitio no podrán ver la página hasta más tarde. Agrega “/shop” después de la URL en el front-end de tu sitio web. Su tienda ahora debería estar visible en su navegador.

Examine el sitio web y pruebe las herramientas de filtro y clasificación junto con los enlaces de productos para ver si funcionan correctamente. Esto es para garantizar que los artículos se muestren con precisión.