Cómo personalizar la página del producto de WooCommerce sin codificar

¿Utiliza WooCommerce para diseñar su tienda en línea? Entonces debe saber que más de 3 millones de sitios web lo hacen. ¿Entonces significa que todos se ven iguales? Bueno, si su sitio tiene plantillas predeterminadas de WooMoMoCommerce, sí. Su tienda en línea se verá como miles de otras tiendas. Su producto único merece una página única de productos de WooCommerce. Afortunadamente, esto no requiere ningún código o proceso complejo. Puede hacer cambios simples para mejorar el diseño de su página para completar su producto. En este artículo, explicaré cómo personalizar una página de productos de WooCommerce, incluso si no tiene conocimiento de codificación. ¿Estás aquí para escuchar? Si es así, lea esta publicación hasta el final.
Se esconde el contenido
¿Qué necesita para personalizar la página del producto WooCommerce?
Personalizar paso a paso las páginas de un producto de WooCommerce
Instalar Elementor y ShopEngine
Cree una plantilla de página para un solo producto de WooCommerce
Seleccione una estructura
Personalizar el precio del producto
Personalizar el título del producto de WooCommerce
Agregar migas de pan
Personalizar información adicional del producto
Utilice la venta de productos
Personalizar la evaluación del producto
Personalizar el meta producto
Actualizar estilos de descripción del producto
Personalice el botón Agregar al carrito
Agregar opciones de intercambio de productos
Personalizar el widget de examen de producto
Personalizar el producto de la acción del producto
Agregar y personalizar archivos de productos
Mostrar productos relacionados
Configuración de vista previa o cambios en el modo receptivo
Bonificación: 5 formas de optimizar la página del producto para aumentar la tasa de conversión
Mantiene la jerarquía de información
Use imágenes de alta calidad Escriba una descripción del producto asesino
Coloque el precio en el modo correcto
Optimizar la página del producto WooCommerce con SEO Onpage
Ultimas palabras
¿Qué necesita para personalizar la página del producto WooCommerce? Debe preguntarse qué necesita para personalizar una sola página de productos de WooCommerce en línea. Bueno, el proceso que mostraré no necesitará comprar docenas de complementos o extensiones pagadas. Además de instalar y activar WooCommerce, deberá activar los siguientes dos complementos en su sitio de WordPress:
Creador de páginas de elementor
Depósito
Ambos complementos funcionan sin problemas con el complemento WooCommerce y lo ayudan a comenzar a diseñar sus páginas de productos únicas para todos los productos nuevos y antiguos.
Personalice paso a paso las páginas de un producto WooCommerce no son el final de la personalización y los cambios para una página de producto predeterminada. Los diferentes tipos de productos necesitan diferentes tipos de personalizaciones. Sin embargo, en esta guía de paso por paso, explicaré las personalizaciones clave que puede hacer en el producto WooCommerce, para que obtenga más ventas de todas las páginas de productos. Vamos a empezar.
Instalar Elementor y ShopEngine
Instalar Elementor y ShopEngine

Debido a que personalizaremos la página de producto WooCommerce predeterminada con Elementor y ShopEngine, el primer paso es instalar complementos de WordPress. Así es como se instalan el Elementor y Shopngine en el tablero del administrador. Panel de WordPress. Haga clic en complementos ➜ Agregue un nuevo 2. En el cuadro de búsqueda, ingrese Elementor y elija el complemento de constructor de sitios web Elementor. 3. Después de la instalación, haga clic en Activación. 1. Vaya al tablero de WordPress. Haga clic en complementos ➜ Agregue un nuevo 2. En el cuadro de búsqueda, ingrese ShopEngine y elija el complemento ShopEngine para la instalación. 3. Después de la instalación, haga clic en la activación.
Access ShopEngine ➜ Plantilla➜ Agregar nuevo
Dale un nombre a la plantilla
Elige al chico: soltero
Establecer plantilla como predeterminado (sí)
Haga clic en Editar con Elementor
Cree una plantilla de página para un solo producto de WooCommerce
Seleccione una estructura Elija su estructura favorita en Elemoror para comenzar a crear una sola página de producto en su tienda WooCommerce.

Seleccione cualquier estructura de Elementor
Personalice el precio del producto Busque el widget del “precio del producto” en el elemento. Tire y suje el widget por el precio del producto en el bloque “One ShopEngine Product” para crear una página de producto personalizada.

Personalice el precio del producto WooCommerce Este widget de precio lo ayudará:
Establezca la alineación del precio del producto a la izquierda, el centro y la derecha, cambie el color primario, secundario, de texto y acento

Use la opción de selección de color para diseñar la etiqueta del producto con su color favorito
Modifique la familia de tipografía, tamaño y peso de impresión, decoración, altura de línea, letras y otras configuraciones de impresión.
Personalizar el título del producto de WooCommerce
Personalice el título del producto WooCommerce Búsqueda del widget “Título del producto” en Elementor. Tire y suje el widget para el título del producto en el bloque “One ShopEngine Product” para crear la página del producto.
Desde la configuración de estilo del bloque de bloque de productos, puede realizar las siguientes personalizaciones:
Establezca la etiqueta HTML del título del producto de H1 a H6.

Establezca la alineación del título del producto a la derecha, a la izquierda o al centro.
Cambiar el color del título del producto
Establezca todos los aspectos de la tipografía
Agregar migas de pan
Agregue Pesmet con ShopEngine A Pesmet informará a los compradores dónde están en su sitio web. Es una sabia decisión agregar una miga a la página del producto. Aquí le mostramos cómo agregar migas de pan: busque el widget de “pan” en el elemento. Tire y suje las migas de pan en el bloque “Producto de SingEngine” en la zona de contenido elemental.
Desde la pestaña Configuración de estilo puede:
Establezca el color del texto, el color del enlace, el color del cursor de encuadernación de las migas de pan

Elija la tipografía, la alineación, el icono, el tamaño del icono y el espacio entre los valores.
Personalizar información adicional del producto
Personalice la información adicional del producto, una breve descripción podría ser inadecuada para su producto y cuando una descripción breve no es suficiente, la información adicional del producto aumentará la probabilidad de mayores ventas. Busque el widget de “información adicional del producto” en el elemento. Tire y suje el widget del bloque “One Shopengine Product” en el área de contenido. Una lista con lo que puede controlar usando el widget:
Cambiar la alineación, el color, la tipografía y el borde del título
Cambiar el color, la tipografía, el fondo y el ancho de la etiqueta

Cambiar el color, el fondo y la tipografía del valor
Restablecer la alineación y el revestimiento de la tabla
Establezca a su familia tipográfica favorita
Utilice la venta de productos
Personalice el widget de ventas de productos de las ventas de productos lo ayudará a sugerir más productos a sus compradores. Los productos de ventas adicionales inspirarán a los compradores a comprar más productos en su tienda y, por lo tanto, contribuirán a aumentar las ganancias.
Busque el widget “Product Upsells” en Elementor. Deslice y fije el widget en el bloque “Producto único ShopEngine”. Desde la pestaña de contenido y estilo puede:
Establezca el número de imagen del producto que se mostrará
Activar / deshabilitar el control deslizante, el bucle y la reproducción automática

Mostrar / ocultar el título, el flash de ventas, el precio habitual, las flechas, los puntos y el botón COș
Establezca las columnas deslizantes, la velocidad y el tamaño de la flecha
Definir el tamaño de los puntos o el tamaño de los puntos activos
Establezca el pedido después de la opción
Establecer el espacio de la columna
Cambie el color de fondo, la alineación del texto, etc.
Personalizar la evaluación del producto
Personalizar la evaluación del producto que muestra evaluaciones de productos en su producto
Elija el color de la estrella de evaluación y el color de las estrellas vacías
Establezca el tamaño y la distancia de las estrellas
Revise el color del enlace, el color del cursor de tipo de enlace y la impresión

Defina la distancia y la alineación a la izquierda
Personalizar el meta producto
Personalice el metal del producto WooCommerce simplemente deslice y corrija el meta-widget del producto en la zona de contenido elemental para comenzar a personalizar la configuración de su meta producto. Usando el meta-widget del producto, puede mostrar u ocultar el SK del producto, categoría y etiquetas. Además, también puede cambiar la apariencia, la alineación, el revestimiento, la tipografía, el cursor de conexión y el color de contenido en unos minutos.
Actualizar estilos de descripción del producto
Actualice los estilos de descripción del producto Tire y arregle el widget de descripción del producto y traiga cualquier cambio que desee en color, tipografía y alineación de la descripción.
Personalice el botón Agregar al carrito
Personalice el botón Agregar en la canasta Asegúrese de que sus páginas de productos tengan un excelente botón de adición. Esto ciertamente aumentará la conversión en gran medida. Con el widget agregar al carrito de ShopEngine en el elemento, puede cambiar los iconos de la cantidad, las posiciones de los botones, etc. Además, puede realizar pruebas A / B con configuraciones de estilo para descubrir qué funciona mejor para usted.

Agregar opciones de intercambio de productos
Agregue las opciones de intercambio de productos para agregar los botones de intercambio de productos a las páginas de productos de WooCommerce es una idea maravillosa que puede implementar en este momento. Cuando los compradores compartan los productos sobre los productos de los cercanos y queridos, tendrá más ventas de nuevos usuarios sin publicidad paga. Use el widget de intercambio de productos en ShopEngine para agregar una opción de intercambio de productos personalizable en sus páginas de productos. Sin embargo, debe utilizar un complemento de intercambio social, como Social WP para disfrutar de esta opción.

Personalizar el widget de examen de producto

Personalice el widget de examen del producto, coloque la revisión del producto en el lugar correcto de su página de productos para que los usuarios puedan dejar sus evaluaciones y revisiones. También promueve tu marca perfectamente. Usando el widget de “Revisión del producto” en el bloque elemental, puede realizar los siguientes cambios en la sección de examen del producto:

Cambiar el color y la tipografía del título del examen del producto
Establezca el tipo, ancho, color y relleno del borde de un solo examen

Establezca el ancho del avatar del autor, el color del nombre del autor y la tipografía, el color de la fecha de la revisión y la tipografía
Revise el color del contenido con la imprenta

Cambiar el color de las estrellas predeterminadas y la estrella en blanco
Personalizar el formulario de comentarios
Elija el tamaño y la familia de las fuentes favoritas, etc.
Personalizar el producto de la acción del producto
Personalice el estado del stock del producto con el widget del “producto de stock”, puede personalizar el texto y el icono del producto existente o existente junto con su color, tipografía y alineación de sus páginas de productos de WooCommerce.Además, tiene la total libertad de establecer el icono, la alineación, el color y la tipografía para “agotado” y “disponible en el orden de antemano.
Agregue y personalice los archivos de producto Agregar archivos de productos le permite permitir a sus clientes proporcionar más información sobre los productos que vende en su tienda WooCommerce. Con ShopEngine, puede agregar archivos personalizados y personalizarlos para que se ajusten a sus necesidades. Simplemente deslice y solucione el widget de “pestañas de productos” en el bloque de productos de productos únicos y esté listo para irse. Puede controlar los siguientes aspectos de las pestañas del producto utilizando el widget: estilo de navegación: tipografía, color de menú, menú de color activo, indicador de color y borde NAV, espaciado de menú, sombra, tipo de borde, ancho de línea, color y relleno. Contenido de pestaña: Muestre u oculte el título del contenido, cambie el color y la tipografía del contenido de la pestaña, establezca el contenido del contenido. Lista de información: Personalice el color del atributo, el color del valor y la tipografía de los datos en la tabla. Evaluación promedio: experimente con el título de evaluación, evaluación total y tipografía y número de color. Estilo de revisión: personalice el color de la evaluación, el color de la evaluación vacío, la fecha, el color de la autoridad y la descripción, la impresión de datos y la impresión de la descripción. Revisión de formulario: cambie el color de la etiqueta de formulario, la impresión de la etiqueta, el color del borde de la entrada, el enfoque de entrada, la tipografía de entrada, el color del mensaje y el color requerido. Botón de referencia: configure el relleno, el rayo del borde, la tipografía del botón, la sombra de la caja, el color y el fondo.
Mostrar productos relacionados que muestra productos relacionados para comprar a sus clientes es una idea increíble que puede implementar en su sitio de comercio electrónico. El “producto” de WoCommerce ShopEngine WoCommerce
Habilitar / deshabilitar el control deslizante
Mostrar / ocultar el título, el flash de ventas, el precio habitual y el botón de la canasta.

Establezca el número de columnas deslizantes
Cambiar el color de fondo

Establezca la velocidad del control deslizante, etc.
Configuración de vista previa o cambios en el modo receptivo

Configuración de vista previa en modo receptivo Como la mayoría de los clientes usan actualmente dispositivos móviles para comprar en tiendas en línea, asegúrese de que las páginas de productos en su tienda funcionen perfectas para los espectadores móviles y de tabletas. Use el modo de receptividad del elemento en el modo de receptividad para ver cómo se ven los cambios de la página de su producto en todo el ancho en dispositivos móviles y de escritorio. Si encuentra que hay algunos incoherers o problemas para vistas móviles y de tabletas, corríjalos para la visualización móvil. Cuando haya terminado de agregar los widgets necesarios para sus páginas de productos WooCommerce y previsualización de la apariencia de la página del producto, haga clic en el botón “Actualizar” en Elementor. ¡Bingo! Sus páginas de productos de WooCommerce ahora están optimizadas para dispositivos móviles y están listas para transmitir.
Bonificación: 5 formas de optimizar la página del producto para aumentar la tasa de conversión para obtener una buena tasa de conversión, es importante optimizar la página de su producto. A continuación hay 5 formas de seguir para maximizar la tasa de conversión e ingresos de su tienda en línea. Haga la jerarquía de información
Jerarquía de información en la página del producto WooCommerce Asegúrese de diseñar la página con un solo producto de WooCommerce manteniendo la jerarquía de información. Por ejemplo, es una práctica ordinaria mantener el pan en toda la información. La miga generalmente es seguida por el título del producto y otra información del producto, como una revisión o descripción. En la mayoría de las tiendas en línea, verá las imágenes a la izquierda de la página con un ícono para ver la vista aumentada. Además, asegúrese de que la información que proporcione en la nueva página del producto WoCommerce proporcione a los compradores una idea completa sobre el producto que ofrece vender.
Use imágenes de alta calidad
Use imágenes de productos de alta calidad solo si tiene un buen producto, no puede traer más dinero en su bolsillo que si presenta inteligentemente a sus clientes. Una imagen del producto es una excelente manera de presentar sus productos al público objetivo tanto en el Page el producto, así como en la página de la tienda. Sin embargo, si sus imágenes son mediocres, oscuras o en ángulo incorrecto, no puede esperar mucho de ellas. Al publicar las imágenes del producto, asegúrese de que estén claras, enfocadas en el producto y capturadas desde el ángulo correcto. La adición de imágenes de productos contextuales puede mostrarle los productos en los entornos apropiados. Por ejemplo, sorprenda la imagen de Kitchen Kitchen para mostrar a los clientes lo perfecta que encajará la cocina. Contrata a un fotógrafo profesional para capturar la imagen detallada del producto para la galería de productos. En el caso de un producto físico, es mejor capturar el mismo producto desde todos los ángulos. Ayudará a los clientes a ver las partes del producto más claras. Además, hace que los clientes se sientan seguros de realizar la compra. Por último, pero no menos importante, recomiendo usar la galería de productos de alta resolución. Aunque las imágenes pueden ralentizar el producto WooCommerce, puede minimizar el efecto con cualquier complemento gratuito para la optimización de imágenes, como Smush.
Escriba una descripción del producto asesino una descripción adecuada y convincente del producto juega un papel importante en las ventas en línea. Asegúrese de que la descripción del producto mencione la información clave del producto. Por cierto, no es suficiente. La información también debe ser fácil de leer y objetar. Puede usar el formato de punto de marcado para mostrar la información en una fila. Recuerde, no tiene que ser formal hasta el final. Si se ajusta a la categoría de producto, puede usar una voz divertida, accesible y encantadora. Aquí hay una descripción atractiva del paquete de perros calientes de las barras exigentes: Ejemplo de la descripción del producto asesino, mientras escribe una descripción del producto, conserva diferentes opciones de uso del producto. Ayudará a los clientes potenciales a saber si el producto satisfará sus necesidades o necesitará algo más.
Coloque el precio de la manera correcta, independientemente de los tipos de productos que venda, el precio siempre es un factor importante para sus clientes. Para que sus precios sean fácilmente visibles, puede usar una gran fuente. Hacer el texto con precios audaces o usar un color contrastante podría funcionar bien y para usted. Destaca los descuentos con el precio habitual seguido del nuevo. Aquí hay un ejemplo de cómo lo hicieron las barras exigentes:
Cómo colocar el precio en su página de productos de WooCommerce Si sus clientes no ven el precio claramente, debe repensar su personalización de diseño.

Optimice la página del producto WooCommerce con SEO Onpage para ganar más tráfico orgánico a sus páginas de WooCommerce, es importante utilizar técnicas de SEO en la página. Use las etiquetas de título correctas, la meta descripción, otra etiqueta de imagen del producto, palabras clave, descripción y otros factores de SEO para ganar más clientes y, por lo tanto, una tasa de conversión más alta. SEO clave por página
Palabras finales Sin importar cómo personalice la página del producto en su tienda en línea, asegúrese de que los cambios que realicen sean fáciles de usar e intuitivos. Al personalizar la apariencia de la página del producto, asegúrese de respetar la consistencia, la relevancia y el contexto. Personalizar la página con un solo producto de WooCommerce puede parecer una tarea desalentadora al principio. Sin embargo, si tiene un generador de páginas Elementary y ShopEngine, debe permanecer libre de estrés.
Obtener elemento

Get ShopEngine
Esto es todo por ahora. Si tiene alguna pregunta o confusión, no dude en notificarnos a través del cuadro de comentarios.