Cree y diseñe una increíble página de productos WooCommerce con Elementor

Debe modificar la página de su producto para distinguir su tienda de comercio electrónico de la competencia y brindar a sus clientes una experiencia única. Además, la opción de personalizar estéticamente la página de su producto es fundamental para mantener un diseño visual consistente en toda su tienda en línea.

Elementor es uno de los principales creadores de sitios web de WordPress en el mercado, pero ¿también sabía que podía crear tiendas WooCommerce usándolo?

Muchos módulos incorporados de Elementor WooCommerce le permiten insertar contenido de WooCommerce o bloques de funcionalidad o diseñarlos usando el constructor de Elementor. Bastante genial, ¿verdad?

Diseñar y personalizar WooCommerce solía requerir PHP y CSS para cada pequeño cambio, pero a medida que las herramientas como Elementor mejoran y se vuelven más complejas, cada vez hay más opciones disponibles para tomar el control de la apariencia y el funcionamiento de su tienda.

Empecemos.

• Creando una plantilla Elementor
• Creación de una imagen o una galería del producto Elementor
• Título del producto WooCommerce, precio y agregar al carrito
• Configuración de pestañas de productos de Elementor
• Breve descripción del producto Elementor
• Ventas adicionales de productos Elementor y WooCommerce
• Conclusión: creador de páginas de productos Elementor

Creando una plantilla Elementor

El primer paso del procedimiento es crear una nueva plantilla de Elementor navegando a Plantillas en el panel de WordPress. Haga clic en 'Crear nuevo' y luego seleccione Producto único como la plantilla que desea crear.

A medida que desarrollamos esta plantilla desde cero, no es necesario colocar bloques; salga del siguiente cuadro hasta que llegue a la pantalla del constructor de Elementor habitual para una nueva página.

Creación de una imagen o una galería del producto Elementor

Cada producto de WooCommerce tiene una imagen del producto o una galería de imágenes que muestra las fotografías del producto a los clientes. Elementor proporciona un módulo de imágenes de producto integrado que nos permite insertarlo en nuestra plantilla.

Cree una fila simple de 2 columnas e ingrese al módulo Imágenes del producto en la columna de la izquierda; esto parece práctico y cumple su función, pero personalicemos la insignia de ventas para que coincida con el tema Elementor Hello que se está utilizando para este artículo. Para hacer esto, necesitamos aplicar una pequeña línea de CSS personalizado, que se puede introducir dirigiéndose a Avanzado> CSS personalizado y pegar el siguiente código.

selector .onsale {\ sbackground-color: # cc3366; \s}

Título del producto de WooCommerce , precio y añadir al carrito

Agregaremos los módulos de Elementor para Título del producto, Precio del producto y Agregar al carrito en la columna de la derecha.

Busque estos tres módulos en el constructor de Elementor, luego arrástrelos y suéltelos para organizarlos en la secuencia indicada anteriormente; esto es completamente funcional, pero queremos personalizarlo para que coincida con el estilo como el tema de la sección anterior Hola Elementor. Diseñar módulos con Elementor es fácil, todo lo que necesita hacer es hacer clic en el módulo y el editor debería abrir las opciones de estilo a la izquierda.

El contenido de estos módulos es excelente. Por lo tanto, vamos a trabajar en la pestaña Estilo. En primer lugar, actualice la fuente y el color del título del producto para que coincida con los utilizados en el tema Hello Elementor.

Luego, debemos hacer lo mismo con los módulos Precio del producto y Agregar a la cesta haciendo clic en cada módulo y modificando el color del texto. Para el precio del producto, usaré un gris oscuro para contrastar con el título, así que escriba este código hexadecimal si lo sigue: # 54595f

A continuación, en el módulo Agregar al carrito, actualizaremos algunas cosas. El color de fondo del botón y el radio del borde del botón usando la siguiente configuración:

• Establezca el contenido en 'Agregar al carrito'.
• Establezca el color de fondo en '# cc3366'
• Establecer el radio del borde en 0

Cambié el radio del borde del selector de cantidad a 0, lo que puede hacer dentro de la pestaña Estilo para Cantidad.

Configuración de pestañas de productos de Elementor

Cada producto tiene que mostrar información básica como una descripción del producto y reseñas, si están disponibles; esto se maneja comúnmente a través de pestañas de productos.

Cree una nueva fila debajo de la sección superior y arrastre el módulo Fichas de datos del producto desde el constructor de Elementor a la fila para insertarlo. No se requiere mucho estilo aquí porque hereda algunos estilos del tema Hello Elementor. Sin embargo, modifiquemos el estilo del botón de envío de reseñas.

Para hacer esto, necesitaremos un poco de CSS personalizado nuevamente. Comience a editar las pestañas de datos del producto, luego haga clic en la pestaña Avanzado y desplácese hacia abajo hasta CSS personalizado. Ingrese el CSS a continuación y podrá ajustar los colores de acuerdo con su diseño.

.woocommerce # formulario de revisión # responder. formulario-enviar entrada {color de fondo: # cc3366; color: #fff; radio del borde: 0px; }

Breve descripción del producto Elementor

De acuerdo, tenemos un diseño decente y de apariencia simple hasta ahora, pero parece un poco escaso. Agregar un módulo de descripción breve del producto en la parte superior puede ayudar a completar esto y agregar más contexto.

Busque el módulo Descripción breve de WooCommerce, luego arrástrelo y suéltelo debajo del Precio del producto y encima del Módulo Agregar al carrito.

Todavía no se requiere un estilo aquí, ya que ha heredado los estilos de Hello Elementor.

Ventas adicionales de productos Elementor y WooCommerce

Aumentar el valor promedio de su canasta es crucial para cada sitio de WooCommerce, por lo que es bueno que Elementor incluya un módulo de ventas adicionales de productos para que pueda integrar la personalización en su tienda fácilmente.

Busque el módulo de ventas adicionales de productos en el constructor de Elementor e insértelo en una nueva fila detrás de las pestañas de datos de productos.

Como puede ver, esto requiere un poco de ajuste para complementar el resto de nuestro estilo. Comience a modificar el módulo y realice los siguientes cambios:

• Establezca el color del título en - # cc3366
• Establezca el color del título en - # cc3366
• Establezca el color del precio en - # 54595f
• Establezca el color de fondo del botón en - # cc3366
• Establezca el color del botón en - #fff
• Establecer el radio del borde del botón t0 - 0

El producto terminado se verá como el anterior. Puede ajustar el código hexadecimal de color como mejor le parezca si utiliza esta guía como punto de partida para su plantilla.

Una vez que haya terminado, publique su plantilla. En la siguiente ventana, verá la pregunta "¿Dónde desea mostrar su plantilla?". Haga clic en "Agregar condición" para determinar cuándo se debe utilizar esta plantilla. Puede seleccionar "Todos los productos" para utilizar la plantilla en todas las páginas de sus productos. También puede optar por utilizar esta plantilla solo para productos que pertenecen a una categoría específica o que tienen una etiqueta en particular asociada.

Conclusión: generador de páginas

Algunos usuarios pueden tener dificultades para mostrar sus configuraciones de diseño personalizadas, como el color de fuente y la tipografía, cuando usan Elementor. La apariencia de su tienda WooCommerce puede verse afectada si está utilizando un tema de WordPress que puede controlar la apariencia de su tienda. Si encuentra este problema, tenga en cuenta que su artículo puede anular la configuración de su página personalizada en algunos casos.

También puede elegir una página en blanco y crear una desde cero utilizando los widgets del producto para una apariencia completamente personalizada. Use una página vacía, cierre la ventana emergente de la biblioteca de plantillas cuando aparezca y comience a construir en la página recién creada. El botón personalizado "Agregar al carrito", "Precio del producto", "Imagen del producto" y "Título y descripción del producto" son solo algunos de los widgets de WooCommerce que puede utilizar para personalizar la página de su producto. Puede ver todos los diferentes widgets disponibles en la actualidad visitando esta página. Si lo prefiere, puede organizar los widgets donde desee en el diseño de la página y personalizar sus estilos para que coincidan con su apariencia deseada.

Debe modificar la página de su producto para distinguir su tienda de comercio electrónico de la competencia y brindar a sus clientes una experiencia única. Además, la opción de personalizar estéticamente la página de su producto es fundamental para mantener un diseño visual consistente en toda su tienda en línea. Elementor es una herramienta fantástica para personalizar las páginas de tu tienda WooCommerce y es muy recomendable. Además de ser fácil de usar, el creador de páginas incluye todos los widgets y opciones de estilo necesarios para ayudarlo a crear páginas de productos personalizadas. Esperamos que este tutorial le haya resultado informativo y le haya proporcionado la información que necesitaba para personalizar su producto WooCommerce y las páginas de archivo de productos utilizando Elementor. ¿Ha utilizado Elementor para crear páginas de WooCommerce en el pasado? Le invitamos a compartir sus pensamientos en la sección de comentarios. Estaremos encantados de echarle un vistazo.