Cómo personalizar la página de su producto WooCommerce
Publicado: 2022-10-18Las páginas de productos en cualquier sitio web de comercio electrónico se exigen como la parte más esencial. Porque contiene todos los detalles de un producto de forma ordenada con información adicional como productos relacionados, etc.
La página de producto predeterminada de WooCommerce está bien para la vista rápida básica del producto , agregar al carrito y otras funciones básicas similares, pero esto simplemente no es suficiente en el entorno competitivo moderno de comercio electrónico. La página del producto desempeña una función crucial en cualquier plataforma empresarial construida con WooCommerce como una de las páginas más importantes. Sin embargo, la página predeterminada simplemente no lo está cortando.
No se puede exagerar la importancia de personalizar las páginas de productos.
Al personalizar las páginas de sus productos, esencialmente brinda a sus clientes una experiencia de compra única, que también es importante para la retención de visitantes y el aumento de la cantidad de ventas.
En esta publicación, lo guiaremos a través del proceso de cómo utilizar un editor de páginas de productos de WooCommerce y widgets personalizados de WooCommerce para crear páginas de productos atractivas y más.
Tabla de contenido
¿Herramientas necesarias para personalizar la página de productos de WooCommerce?
En primer lugar, debe tener instalada la última versión de WordPress en su servidor y, además, el complemento WooCommerce debe estar instalado para acomodar todas las funcionalidades de la tienda/página de la tienda.
También necesita un tema de WordPress de comercio electrónico basado en la funcionalidad y, por último, pero no menos importante, necesitará un complemento WooCommerce Elementor Shop Builder . Con el complemento de creación de tiendas Elementor, podrá controlar y personalizar completamente las páginas de tiendas individuales y la cuadrícula de productos del mercado, la lista de productos, los bloques de comparación de productos, etc.
Cómo personalizar la página de productos de WooCommerce
Esperamos que tenga una instalación funcional de WordPress y un tema de comercio electrónico en funcionamiento ya instalado en su servidor. Ahora, repasemos el proceso paso a paso de la personalización de la página del producto, comenzando con los recursos y herramientas adicionales de WordPress que se requieren.
Paso 1: Instalación de un complemento adicional de Elementor WooCommerce
En este ejemplo en vivo de la personalización de una página de producto de WooCommerce con varios elementos y muestras de variaciones de productos de WooCommerce que una página de producto moderna debe presentarse a los clientes, usaremos algo similar al compositor visual del creador de páginas de productos de WooCommerce , llamado ShopReady.
El creador de tiendas ShopReady Elementor es una increíble herramienta integral para crear sitios web robustos de tiendas de comercio electrónico. El complemento viene con más de 105 widgets creados profesionalmente con funciones y herramientas específicas para casos de uso. Por ejemplo, con este complemento de comercio electrónico, puede crear un filtro de productos WooCommerce funcional que puede filtrar productos con precio, tamaño, peso, color, calificación, envío, etc.
Para comenzar con este complemento adicional de WooCommerce, comience descargándolo. Para hacerlo, inicie sesión en su panel de WordPress , diríjase a Y haga clic en el botón Instalar .
Espere hasta la instalación exitosa del complemento y haga clic en Activar .
El menú ShopReady aparecerá en su panel de WordPress. Desde aquí, tendrá acceso a todos los widgets, módulos y contenido preestablecido proporcionado por el complemento personalizador de la página de la tienda.
Desde este menú simple, puede habilitar/deshabilitar widgets, crear plantillas e insertar claves API para varias funciones.
Otra gran característica de este complemento es su conmutador de moneda para la capacidad de WooCommerce. Para habilitar esta función, deberá seguir las instrucciones que se muestran a continuación.
Para agregar su clave API de moneda creada por Exchangerate , haga clic en la pestaña API.
Inicie sesión en el tablero de su cuenta de Exchangerate y copie su clave API para obtenerla. Después de pegar su clave API, vaya a su panel de WordPress > ShopReady > API y haga clic en Paso 2: use una plantilla de página de producto preestablecida o cree una desde cero
El siguiente paso es comenzar a trabajar en una página de producto, pero antes de eso, deberá agregar productos a su sitio web de WooCommerce. Si no sabe cómo hacerlo, puede seguir esta guía sobre: Cómo agregar productos rápidamente a WooCommerce .
Ahora, para comenzar a personalizar una página para una exhibición de productos, use ShopReady – WooCommerce Builder para crear una página de producto simple yendo al panel de complementos y haciendo clic en la pestaña Plantillas . Habilite la categoría Plantilla de producto y busque la configuración de Producto único. Ahora haga clic en el icono de edición.
Y será redirigido a la pantalla del Editor de Elementor . Ahora, para comenzar a personalizar la página, haga clic en el símbolo más para agregar secciones de Elementor. Hay varios tipos de secciones de Elementor que puede agregar a su página según cómo desee que se vea su página y qué widgets le gustaría usar.
Paso 3: Personalización de la página de productos de WooCommerce con widgets de Elementor
- Agregar un título de producto
Ahora que ha colocado una estructura de sección básica de Elementor para su página de producto de WooCommerce, puede comenzar agregando un título de producto. Para hacerlo, deberá arrastrar y soltar el widget Título del producto en la página del producto.
Y para mostrar el título del producto adecuado, haga clic en la pestaña Contenido y, debajo, encontrará las opciones de Actualización del editor . Seleccione el título de producto apropiado de la opción Producto de demostración .
Debe agregar o editar la información del producto correspondiente desde el panel de productos de WooCommerce para que estos datos muestren el título del producto adecuado.
- Agregar una imagen destacada a la página del producto
A continuación, necesitará la galería de imágenes de su producto y la imagen de características de su producto. Para este propósito, puede usar cualquiera de los múltiples widgets de imagen proporcionados por el complemento Elementor todo en uno para comercio electrónico.
Para este ejemplo, utilizaremos el widget ShopReady Thumbnail with Zoom, hace lo que sugiere su título. Con este widget, puede mostrar a sus clientes una versión de zoom de desplazamiento del producto de WooCommerce de la imagen de su producto cuando se desplazan sobre la imagen de su producto.
Al igual que antes, puede seleccionar la imagen de producto correcta en la opción Producto de demostración , pestaña Contenido .
- Agregar bloque para el widget de precios
Otro elemento importante que debe tener en su página de productos de comercio electrónico es el bloque de precios del producto. Para esto, deberá actualizar los atributos del producto de WooCommerce con las actualizaciones correctas y usar el widget ShopReady Price , que debe colocarse debajo del título del producto.
Para mostrar el precio correcto, seleccione el título del producto en la opción Producto de demostración , en la pestaña Contenido .
- Agregar descripción del producto
También tiene la capacidad de agregar descripciones de productos altamente personalizables utilizando este widget de Descripción del producto de complementos de productos de WooCommerce . Desde la pestaña de estilo, tendrá la opción de personalizar cómo aparecerá la descripción del producto para las masas.
- Adición de la función Agregar al carrito
Agregar al carrito es otra característica muy importante que permite a sus clientes tener múltiples productos en su página de carrito antes de proceder a la página de pago.
Para tener una sólida función Agregar al carrito en su página de tienda de comercio electrónico, puede utilizar el widget Agregar al carrito de ShopReady. Con este widget, puede permitir que sus clientes aumenten y disminuyan la cantidad de productos de su carrito directamente desde el bloque Agregar al carrito.
También puede personalizar el botón Agregar al carrito de Elementor desde la tipografía, el color, el fondo, el margen, el relleno, etc. de la pestaña Estilo de Elementor de estilo del producto de WooCommerce.
- Agregar metadatos a la página del producto
Para brindar una mejor experiencia de compra a sus clientes, debe implementar un filtro de productos de WooCommerce utilizando los metadatos y los atributos de productos que ha agregado al agregar productos a WooCommerce .
Para mostrar estos datos en la página de su producto, busque el widget ShopReady Meta y colóquelo debajo del botón Agregar al carrito.
Las etiquetas y los metadatos de su producto deberían aparecer correctamente cuando seleccione el título de producto correcto en la opción Producto de demostración , en la pestaña Contenido .
- Agregar botones para compartir en redes sociales a la página del producto
Sus clientes también pueden compartir las publicaciones de sus productos en las redes sociales directamente desde su página de productos de WooCommerce mediante el uso de un simple bloque de botones para compartir en las redes sociales. Que puede crear simplemente usando el widget Elementor Social Share de arrastrar y soltar.
El bloque se puede personalizar con cualquier ícono de redes sociales, texto y enlaces para compartir, directamente desde la pestaña Contenido . Y también se puede personalizar para cambiar la apariencia de los bloques de acciones sociales desde la pestaña Estilo de Elementor.
Y ha terminado con los conceptos básicos de la personalización de la página de productos de WooCommerce.
Paso 4: agregar productos relacionados a la página de productos de WooCommerce
Una excelente manera de aumentar las ventas en línea es exhibir productos relacionados en la página de su producto mediante el uso del widget de productos relacionados de complementos de productos de WooCommerce. Con el widget de productos relacionados de ShopReady , puede crear un impresionante bloque deslizante de productos en secciones.
Para usar el widget, solo necesita arrastrar y soltar el widget debajo del bloque de un solo producto y seleccionar cada producto individualmente que le gustaría mostrar en su página de un solo producto.
En conclusión
Esperamos que esta guía informativa lo haya ayudado a obtener una comprensión más amplia de la personalización de la plantilla de la página del producto de WooCommerce y cómo puede utilizar estas increíbles herramientas para darle vida a su sitio web de comercio electrónico con mejores funcionalidades.
Con los detalles del producto emergente de WooCommerce en la tabla de comparación de productos, ShopReady puede ofrecer todo lo que requiere un mercado de comercio electrónico. Si tiene alguna pregunta sobre este tema, no dude en comunicarse en la sección de comentarios a continuación.