Cómo personalizar en WooCommerce la página de tienda

La gente que ha creado sitios web con WordPress sabe que existen distintos tipos de páginas que puedes crear en este CMS. WooCommerce sigue una estructura similar. Existen páginas de producto individual, como las páginas de entrada individual, y tipos de páginas de archivo para mostrar un listado de productos. La página de tienda de WooCommerce cabe en esta última categoría.

En este tutorial sobre WooCommerce, te explicaré por qué una página de tienda es tan importante y cómo editar una página de tienda en WooCommerce para personalizarla. ¡Continúa leyendo para descubrir cómo usar WooCommerce para conseguirlo! 

¿Por qué personalizar la página de tienda en WooCommerce?

Como he mencionado antes, al crear una página de tienda en WooCommerce tus visitas podrán ver, en un mismo lugar, todos los productos que tienes a la venta. Esto es muy adecuado para ellos si simplemente están navegando sin tener en mente la compra de ningún producto en particular.

Una página de tienda de WooCommerce tiene un aspecto bastante básico cuando todo está configurado de forma predeterminada, por ello es muy aconsejable editar la página de tienda en WooCommerce. La siguiente imagen muestra el aspecto de la página de tienda predeterminada en mi sitio web local de prueba con el tema Storefront instalado. 

Nada más crear una página de tienda en WooCommerce, esta utilizará Shop (Tienda) como título de página y presenta todos los productos de la tienda online WooCommerce a través de una maquetación en cuadrícula. Se pueden realizar muchas mejoras a esta página al personalizar WooCommerce. Por ejemplo, podríamos ofrecer a los usuarios la posibilidad de buscar productos, o podríamos incluir una lista de productos destacados, más vendidos, o los más valorados. La idea consiste en ayudar a las visitas a encontrar aquello que buscan para empujarlos en una dirección concreta en tu tienda online WooCommerce, por ejemplo, para mostrarles un listado de productos en oferta.

Personalizar la página de tienda en WooCommerce para incluir los productos más valorados o más vendidos aumentará tus posibilidades de cerrar una venta. También puedes personalizar la página de la tienda en WooCommerce para que la navegación le resulte más sencilla a los usuarios.

Personalizar en WooCommerce la página de tienda

Empecemos ya mismo a ver cómo usar WooCommerce para personalizar la tienda. Existen algunas opciones para personalizar la página tienda en WooCommerce. La forma más sencilla consiste en hacer uso de las herramientas existentes y de plugins para personalizar WooCommerce. Sin embargo, también puedes diseñar una página de tienda online WooCommerce personalizada creando un tema hijo.

Aquí, vamos a enfocarnos en la creación de una página de tienda personalizada usando las características integradas en WordPress y WooCommerce, un plugin gratis de terceros denominado StoreCustomizer, y algo de CSS personalizado. 

1. Añadir los bloques de WooCommerce

Empezaremos a editar la página de tienda en WooCommerce usando el editor Gutenberg de WordPress. Encontrarás la página de la tienda en el menú de navegación del escritorio Páginas > Todas las páginas. Para poder editar o personalizar la página tienda de WooCommerce, haz clic en el enlace Editar que aparece cuando te sitúas sobre la página de la tienda.

El primer bloque que añadiremos a la página de la tienda es un encabezado de nivel h2. Haz clic sobre el pequeño botón + en la página y después selecciona un bloque de cabecera. Yo estoy usando el titular Welcome to Our Shop (Bienvenido a nuestra tienda). Haz clic en el titular y verás un menú flotante o una barra de herramientas para establecer el nivel del encabezado, la alineación, etcétera. Establece el nivel de encabezado a h2 y una alineación centrada. También verás algunos ajustes para el bloque del encabezado en la columna lateral. Simplemente, asegúrate de que estás en la pestaña Bloque en lugar de Página.

He empezado a personalizar WooCommerce realizando algunos cambios a la apariencia del bloque de encabezado, por ejemplo, he establecido su color a negro, su tamaño a 37px, el grosor de la fuente desde el menú desplegable apariencia a negrita, y también he establecido que sea en mayúsculas seleccionando la primera opción.

Ahora vamos a editar la página de tienda en WooCommerce añadiendo otro bloque para crear un diseño de página en dos columnas. Selecciona la opción para una división de 70-30. Nuestro listado de productos estará en el lado izquierdo y el lateral izquierdo contendrá una columna con contenido adicional como un widget para la búsqueda de productos. 

Empieza añadiendo un encabezado de nivel h3 titulado Our Best Selling Products (Nuestros productos más vendidos) en la columna izquierda. Añade aquí un bloque WooCommerce denominado Productos más vendidos. Puedes encontrarlo escribiendo Más vendidos en el campo de búsqueda de la barra de herramientas flotante. También puedes hacer clic sobre el icono + en el menú superior para ver un listado de todos los bloques disponibles. Esto abrirá una columna lateral a la izquierda, y tú podrás desplazarte para ver todos los bloques de WooCommerce. Esta es otra forma de añadir un bloque en caso de que no lo puedas encontrar con una búsqueda.

Por defecto, el bloque mostrará los 9 productos más vendidos a través de una retícula de 3x3. Mantendremos el slider de la columna a 3 e indicaremos que la fila del mismo tenga como valor 1 para que muestre solo una con tres productos. También he modificado el conmutador de valoración de producto para que quede oculto en la página.

Repite los dos últimos pasos para añadir otro encabezado titulado Our Latest Products (Nuestros últimos productos) y un bloque para mostrar los tres productos más recientes.

Ahora vamos a editar la página de tienda en WooCommerce para añadir contenido a la columna lateral. Primero, añadiremos un bloque de búsqueda de productos y modificaremos el conmutador del campo Mostrar la etiqueta del campo de búsqueda de los ajustes de este bloque para que la etiqueta Buscar no aparezca en la página.

Añade un encabezado de nivel h3 titulado Select a Category (Selecciona una categoría) justo bajo la barra de búsqueda. Establece su color a negro, texto en negrita, y en mayúsculas. Añade otro bloque WooCommerce denominado Lista de categorías de productos bajo el encabezado y mantén todos los ajustes predeterminados. Esto te debería proporcionar una página de tienda con un aspecto similar al de la siguiente imagen.

Veamos ahora cómo crear una página de tienda WooCommerce con productos destacados. Lo conseguimos muy fácilmente añadiendo un bloque Producto destacado a nuestra columna lateral para mostrar, obvio, un producto destacado. Yo he optado por destacar mi producto Emoji Hoodie. Existen unos cuantos ajustes para este bloque de producto destacado. Deshabilita Mostrar descripción bajo el bloque de ajustes Contenido y establece la opacidad del fondo al 70%.

2. Añadir CSS personalizado a los bloques

Ya sabemos crear una página de tienda en WooCommerce personalizando la apariencia de muchos elementos con el propio editor Gutenberg. Sin embargo, realizar más cambios requerirá que escribas algo de CSS. Puedes añadir tus propias reglas CSS a tu sitio web dirigiéndote a Apariencia > Personalizar > CSS adicional. Ahora introduce el siguiente CSS dentro de la caja de texto y después pulsa Publicar. 

1

.wc-block-product-categories {

2

     margin-bottom: 1em;

3

     background: #efefef;

4

     padding: 2rem 0 0.5rem 1rem;

5

}

6

.wc-block-product-categories-list.wc-block-product-categories-list--depth-0 {

7

     font-size: 1.5rem;

8

     list-style: decimal;

9

     margin-left: 2rem;

10

     margin-bottom: 1rem;

11

}

12

#select-a-category {

13

     font-size: 2rem;

14

     margin-bottom: 0;

15

     margin-top: 3rem;

16

}

17

.woocommerce-ordering {

18

     font-size: 1.7rem;

19

}

20

.storefront-sorting select {

21

     border: 2px solid black;

22

     text-align: center;

23

     font-variant: small-caps;

24

}

Los tres primeros selectores modifican distintos elementos que añadimos a la parte superior de la página de tienda. Las reglas CSS aplicadas se utilizan básicamente para destacar la sección de la lista de categorías.

Los dos últimos selectores modifican el menú desplegable para el orden de las categorías en la página de la tienda. Aumentamos el tamaño de la fuente del desplegable y añadimos un borde más grueso, entre otras cosas, para que la apariencia se cohesione con el diseño del resto de la página. 

3. Eliminar elementos no deseados con StoreCustomizer

El plugin StoreCustomizer nos proporciona un montón de opciones para cambiar cosas en la página de la tienda que no se pueden conseguir usando el editor Gutenberg predeterminado. Nos permite personalizar muchas páginas relacionadas con WooCommerce, entre ellas la Página de tienda.

Una vez hayas instalado el plugin, puedes dirigirte a Apariencia > Personalizar > StoreCustomizer > WooCommerce Shop Page (Página de tienda de WooCommerce) para realizar cualquier cambio. En mi caso, he marcado la casilla para eliminar el título de la página y los resultados del orden. También he establecido que los productos por página sean 20 y por fila 4. Además, podemos añadir una insignia para destacar los nuevos productos en la página de la tienda, marcando la casilla situada junto a Add a "New" badge for recently added products (Añade una insignia "Nuevo" para los productos recientemente añadidos). Todo lo que tienes que hacer es especificar cuántos días tienen que haber transcurrido desde que agregaste el artículo al sitio web para que siga siendo considerado nuevo.

Resultado final del tutorial de WooCommerce

Tras haber seguido todos los pasos de este tutorial sobre WooCommerce, tu tienda debería tener un aspecto similar a la siguiente imagen.

También debería tener la clásica lista de productos con el nuevo CSS y ajustes aplicados, de manera que tenga un aspecto similar al de la siguiente imagen.

Reflexiones finales

En este artículo, has aprendido a personalizar la página de tienda de WooCommerce sin necesidad de escribir mucho código. Para ello hemos añadido bloques de WooCommerce a la página de tienda y después hemos cambiado su apariencia usando algo de CSS. Por último, hemos usado un plugin de terceros denominado StoreCustomizer para añadir funcionalidad que de otra forma nos obligaría a escribir código PHP. ¡Ya sabes cómo usar WooCommerce para personalizar tu tienda!