Cómo personalizar y optimizar completamente las páginas de su tienda WooCommerce

Construir tu sitio web con WordPress y WooCommerce te permite ser dueño absoluto de tu tienda y utilizar un marco flexible para construir sistemas y diseños tan únicos como sueñes.

Hoy hablaremos de la configuración de una página de tienda WooCommerce y de cómo debe personalizarse.

¿Qué son las páginas de tienda WooCommerce?

La página de la tienda WooCommerce está incluida por defecto y es una página de archivo del tipo página de producto. Esto significa que mostrará todos los productos publicados para que los visitantes se desplacen por ellos. Es esencialmente su sala de exposición en línea donde los visitantes pueden ver su catálogo. Los productos se pueden mostrar individualmente, o por categoría, o ambos por categoría y por producto en una sola página.

¿Por qué crear páginas de tienda WooCommerce personalizadas?

La página predeterminada de la tienda WooCommerce es una buena opción para muchas tiendas para ayudarle a ponerse en marcha rápidamente. Pero personalizar esta página para los compradoresOfrecer una experiencia personalizadaEsto se traduce en más ventas para usted y en una experiencia de compra más ágil para sus clientes.

1. Hacer la compra rápida y fácilmente

Cuanto antes encuentren los visitantes lo que buscan y obtengan la información que necesitan para comprar con confianza, mejor. Las tiendas bien organizadas evitan que los compradores se sientan abrumados.

También existe la opción de que los compradores obtengan un presupuesto directo del "tiendaTambién añadieron una sección de contenido a la página "Tienda" para promocionar sus opciones de personalización. También añadieron una sección de contenido a la página "Tienda" para promocionar sus opciones de personalización.

2. Ofrezca una experiencia adaptada a su producto y a su público

En el caso de artículos nuevos y desconocidos -o categorías de productos en las que los compradores necesitan información detallada, como ingredientes alimentarios o especificaciones de accesorios-, puede ser conveniente mostrar la información directamente en la página de la tienda.

Aquí tienes algunos ejemplos de cómo modificar la página de tu tienda en función de los productos o públicos que vendas:

• Añada filtros para cribar grandes catálogos de productos o artículos muy detallados. Tal vez venda piezas de repuesto y los compradores necesiten encontrarlas por tamaño, color, SKU, etc.
• Si el artículo en venta es más atractivo visualmente, por favorConcéntrese en las imágenes. Por ejemplo, una tienda de ropa puede querer mostrar fotos más grandes o permitir a los usuarios desplazarse por una galería de imágenes rotatoria directamente en la página de la tienda.
• Mostrar productos en una tabla. Si el artículo que se vende no se basa en elementos visuales, puede ser necesario prescindir por completo de las imágenes. En lugar de utilizar una cuadrícula de productos más tradicional, utilice tablas para mostrar la información clave. Esta es una configuración especialmente buena para negocios basados en servicios o tiendas mayoristas, donde los clientes añaden un gran número de artículos a su cesta de la compra a la vez.
• Incluya distintivos específicos para cada producto. Por ejemplo, si vende productos alimenticios, puede incluir un distintivo "vegano" o "sin frutos secos". Esto ayuda a los compradores a ver inmediatamente qué productos satisfacen sus necesidades (y cuáles no).

3. Destacar productos y promociones especiales

Editar las páginas de tu tienda WooCommerce te permite captar la atención de tus clientes y dirigir su interés hacia productos y categorías destacados, ofertas promocionales y contenidos como envíos gratuitos o garantías de satisfacción.

En este caso, el tema de los bloques brilla con luz propia. Utilice el bloque "Productos más valorados" para mostrar lo mejor de lo mejor, el bloque "Ofertas especiales" para destacar las opciones con descuento o el bloque "Productos destacados" para tener una sección que pueda cambiarse rápidamente en función de la temporada, la actualidad o las circunstancias. sección que pueda cambiarse rápidamente en función de la temporada, la actualidad u otras circunstancias.

4. Refleje su marca y personalidad

Personalizar la página de su tienda puede ayudarle a diferenciarse de sus competidores, presentar un aspecto coherente en su sitio web y otros materiales de la empresa, y generar confianza mostrando reseñas y otros símbolos de confianza.

Se han añadido asteriscos debajo de cada producto para mostrar lo bien que han sido valorados. También hay un pequeño e ingenioso marcador a la izquierda en el que los compradores curiosos pueden hacer clic para leer más opiniones que les ayuden a despejar sus dudas.

Cómo personalizar las páginas de tu tienda WooCommerce

1. Personaliza las páginas de tu tienda con el Personalizador de WooCommerce

La sección WooCommerce del personalizador incluye notificaciones de la tienda, catálogos de productos, imágenes de productos y pestañas de pago. Esta es la forma más sencilla de realizar cambios básicos en las páginas de tu tienda.

cambiar aApariencia → Personalizar → WooCommerce.

Personalizar las notificaciones de la tienda WooCommerce

Las notificaciones de la tienda se muestran en una barra superpuesta en la parte inferior del sitio (algunos temas pueden tenerla en la parte superior). Esta barra se muestra en todo el sitio con la opción de desactivarla. Esta función es una excelente manera de mantener informados a los visitantes sobre las promociones actuales, las categorías de productos destacados, los próximos eventos o las políticas de la tienda, como el envío gratuito para pedidos superiores a un importe determinado.

Ficha Notificaciones de la tiendaHay un campo para introducir texto y etiquetas HTML para formatear y enlazar. Haga clic en la casilla Habilitar notificaciones de la tienda para activar la función.

Personalizar el catálogo de productos de WooCommerce

La pestaña Catálogos de productos dispone de menús desplegables para gestionar todos los aspectos de las páginas de su tienda y categorías de productos.

Si tiene un gran número de artículos en su tienda, una sola página de tienda puede dejar a los visitantes preguntándose cómo elegir. Utilice el menú Mostrar página de la tienda para seleccionar lo que debe mostrarse en la página: categorías, productos o ambos. La opción Categoría mostrará una cuadrícula de miniaturas que representan las categorías disponibles en la tienda.

Utilice el menú de ordenación de productos predeterminado para gestionar la visualización de los productos en la página de la tienda. Por defecto es Orden personalizado + Nombre, pero se puede ordenar de la siguiente manera:

• Popularidad (ventas)
• Valoración media
• más cercano
• Precio (orden ascendente)
• Precio (orden descendente)

Para establecer un orden personalizado para las opciones por defecto, vaya aProductos → Todos los productos. A continuación, haga clic en la pestaña Ordenar de la parte superior. A continuación, seleccione Categoría, Tipo de producto, Estado de inventario o cualquier combinación de los tres. Haga clic en "cribado".

Personalizar las imágenes de producto de la página de la tienda WooCommerce

La pestaña "Imágenes de productos" le permite personalizar el tamaño y la visualización de las imágenes de los productos en las páginas de su tienda. Hay tres opciones:

• 1:1 (corte a escuadra)
• Relaciones de aspecto personalizadas
• Sin recortar (se muestra con la relación de aspecto de la imagen cargada)

Cuando se publican los cambios, se genera automáticamente una miniatura del nuevo tamaño de la imagen.

2. Personaliza la página de tu tienda con el editor de bloques Gutenberg

Si estás utilizando un tema en bloque, puedes editar y personalizar la página de la tienda WooCommerce utilizando el editor del sitio. Asegúrate de hacer una copia de seguridad de tu sitio WordPress antes de editar la plantilla de la página de la tienda.

Para personalizar su página, vaya aestado exterior → editor (software)A continuación, seleccione Examinar todas las plantillas en el menú desplegable situado en la parte superior central de la página. Haga clic en Plantillas de catálogo editables.

La plantilla del catálogo consta de áreas de encabezado, pie de página y cuerpo. Haga clic en un área de encabezado o pie de página para editar su contenido y añadir nuevos bloques, como bloques de imágenes o párrafos, según sea necesario.

Por defecto, el cuerpo de la página sólo contiene el bloque de la cuadrícula de productos, que mostrará las imágenes de los productos, los títulos, los precios, etc.

Añade bloques por encima y por debajo de los bloques de la cuadrícula de productos para personalizar las plantillas de las páginas de tu tienda. Se puede utilizar cualquier tipo de bloque, incluyendo más de 20 bloques de WooCommerce ubicados en una sección dedicada del insertador de bloques para facilitar la navegación.

Use"Productos más vendidos"y"Productos mejor valoradosUtilice el bloque "Todas las opiniones" para promocionar sus artículos más populares. Utiliza el bloque "Todas las opiniones" para añadir testimonios de clientes a tu página.

Opciones personalizadas de exposición de productos

Es posible editar "Todos los productos"para personalizar aún más las páginas de tu tienda WooCommerce. Haga clic en el bloque y luego en "compilador". Para gestionar su configuración, puede hacer clic en los elementos del producto de ejemplo, como la imagen y el título del producto.

Es posible reorganizar el contenido de los elementos que aparecen en la cuadrícula. Por ejemplo, es posible reordenar los elementos "Añadir a la cesta" se desplaza por encima de las valoraciones de los productos. Haga clic para seleccionar un elemento y, a continuación, utilice las flechas arriba/abajo para desplazar su posición en el diseño.

3. Personaliza las páginas de tu tienda con las extensiones de WooCommerce

Las extensiones son tipos de plugins creados específicamente para tiendas WooCommerce. Se pueden utilizar para mejorar la experiencia de compra y mejorar el contenido y la funcionalidad de las páginas de la tienda. Vamos a presentar algunos ejemplos.

Filtros de producto para WooCommerce

Utiliza los filtros de productos de WooCommerce para que los clientes puedan filtrar tus productos en función de varios criterios, como la categoría, el precio, la valoración media y el estado de las existencias. Los filtros facilitan el acceso a catálogos que contienen miles de productos, ya que los compradores pueden utilizarlos para obtener resultados relevantes de forma rápida y sencilla. La extensión utiliza AJAX para actualizar los resultados sin necesidad de que el visitante actualice la página.

Vista rápida de WooCommerce

La vista rápida de WooCommerce permite a los compradores obtener más información sobre los productos, elegir entre versiones y añadir artículos al carrito sin salir de la página principal de la tienda. La extensión añade un botón de "Vista rápida" a la página de su tienda, que activa una ventana emergente al hacer clic en él. La ventana contiene la información necesaria sobre el producto, así como la posibilidad de seleccionar variantes y añadir artículos a la cesta de la compra. Esto acelera la experiencia de compra, ya que los visitantes pueden comparar productos y hacer selecciones sin tener que cargar varias páginas nuevas.

WooCommerce Ficha de producto avanzada

Las Etiquetas de Producto Avanzadas de WooCommerce añaden un toque visual a las páginas de tu tienda para captar la atención de tus clientes. Puede crear etiquetas personalizadas para mostrar nuevos productos, artículos promocionales, los más vendidos y mucho más. Las etiquetas pueden ser aplicadas globalmente, a productos específicos, o a un grupo de artículos basados en condiciones.

Lista de productos WooCommerce

La Tabla de Productos de WooCommerce te permite mostrar tu catálogo en un formato tabular para facilitar su consulta y comparación en una sola página. Los encabezados de las columnas son personalizables y puedes elegir el orden de clasificación por defecto. La extensión admite productos variables con menús desplegables para seleccionar variantes. Cada fila tiene un botón Añadir al carrito y una casilla de verificación para añadir varios productos al carrito a la vez. Los compradores pueden utilizar los campos de la parte superior del formulario para filtrar los resultados por categoría y rango de precios. También pueden filtrar por atributos de la variante, como talla o color. El filtrado se realiza mediante AJAX, por lo que es rápido y no requiere actualizar la página.

4. Personalizar manualmente la página de la tienda (mediante código y ganchos)

Los hooks permiten personalizar las plantillas (por ejemplo, las páginas de la tienda) sin correr ningún riesgo asociado a la edición de los archivos del núcleo.WooCommerce utiliza el archivo de plantilla archive-product.php para las páginas de la tienda. Este archivo se encuentra en el directorio Acciones y filtros de WooCommerceEncontrará una lista de los ganchos disponibles en la página Referencia.

Haga siempre una copia de seguridad de su sitio web antes de realizar cualquier cambio. Un solo error al modificar el código de su sitio web puede acarrear graves problemas.Copia de seguridad Jetpack VaultPress es una gran opción porque guardará tu sitio cada vez que hagas un cambio.

No edite directamente los archivos de los pluginsya que las futuras actualizaciones sobrescribirán su trabajo. Necesidad de añadir el código personalizado para el tema hijo de funciones.php o utilice la función Fragmentos de código Plugins así.

Algunas de las siguientes personalizaciones pueden realizarse en la página de la tienda utilizando ganchos y códigos:

Ocultar el recuento de resultados de la página de la tienda y el menú desplegable de clasificación por defecto

Estos elementos de página son prácticos para los compradores, pero no muy útiles para las tiendas con pocos artículos. Añade este código para ocultarlos de las páginas de tu tienda.

// Ocultar el contador de resultados de la página de la tiendatremove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );// Ocultar la página de la tienda por defecto. menú de ordenación remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 ); // Ocultar la página de la tienda por defecto.

También es posible ocultar estos elementos mediante código CSS. Ir aApariencia → Personalizar → CSS adicional y añada el siguiente código:

.woocommerce-result-count {
    display: none;
}

.woocommerce-ordering select {
    display: none; }
}

Modificación del número de productos por fila en la página Tienda

Utilice este código para anular el número predeterminado de productos por fila. Establecer un número mayor aumenta el número de productos que se pueden ver en la página sin necesidad de desplazarse. Establecer un número menor mostrará la imagen de cada producto más grande para una vista más detallada.

En este ejemplo, establezca la cantidad en dos artículos por línea:

// Cambiar el número de productos por fila en la página de la tienda
add_filter('loop_shop_columns', 'loop_columns', 999);

if (!function_exists('loop_columns')) {
    if (!function_exists('loop_columns')) { function loop_columns() {
        return 2; // 2 productos por fila
    }
}

Mover el título del producto por encima de la imagen del producto en la página de la tienda

Utiliza este código para mover los títulos de tus productos de la parte inferior a la superior de cada fila de imágenes de producto. Este cambio de diseño te ofrece una opción de diseño que te permitirá diferenciarte del resto de la tienda y colocar los títulos más arriba en la página para que los compradores no tengan que desplazarse para verlos.

// Mover el título del producto por encima de la imagen del producto
add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_title', 10 );
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

Haga que sus precios destaquen

Haz que tus precios destaquen a los ojos de los compradores añadiendo el siguiente código a un campo CSS adicional en el personalizador. Este cambio de estilo es útil si el precio es importante para sus clientes. En este ejemplo, el precio se muestra en negrita y en azul.

.wc-block-grid__product {
    font-weight: bold;
    font-weight: bold; color: azul; }
}

Añada color al borde de la imagen del producto

Este código añadirá un borde de color a la imagen de su producto. Aquí el ancho del borde se establece en 2pxEl color esnaranja (color).

.wc-block-grid__products .wc-block-grid__product-image img {
    border: 2px solid #f27c21; }
}

alcanzar un veredicto

Al personalizar las páginas de tu tienda WooCommerce, puedes ofrecer a tus clientes una mejor experiencia de compra, aumentar las oportunidades de venta y resaltar la personalidad de tu marca. Tanto si utilizas el personalizador de WooCommerce, el editor de bloques Gutenberg, extensiones o código manual, existen múltiples formas de ajustar y optimizar según tus necesidades específicas y tu nivel de habilidad. Si tienes en cuenta estos consejos y técnicas, podrás crear una página de tienda online atractiva y potente, que allanará el camino hacia el éxito de tu negocio.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres