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

Debes modificar la página de tu producto para distinguir tu tienda de comercio electrónico de la competencia y brindar a tus 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 creadores de sitios web de WordPress líderes en el mercado, pero ¿sabías también que puedes crear tiendas WooCommerce usándolo?

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

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

Empecemos.

• Creando una plantilla de Elementor
• Creación de imagen o galería del producto Elementor
• Título del producto WooCommerce, precio y agregar al carrito
• Configurar pestañas de productos 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 de 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 plantilla que desea crear.

Como desarrollamos esta plantilla desde cero, no es necesario poner ningún bloque; salga del siguiente cuadro hasta llegar a la pantalla habitual del generador de Elementor para una nueva página.

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

Cada producto 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 productos incorporado 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 funciona, pero personalicemos la insignia de ventas para que coincida con el tema Elementor Hello que se utiliza para este artículo. Para hacer esto, necesitamos aplicar una pequeña línea de CSS personalizado, que se puede introducir dirigiéndonos a Avanzado > CSS personalizado y pegando el siguiente código.

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

del producto 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 Hola Elementor de la sección anterior. 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, trabajaremos en la pestaña Estilo. En primer lugar, actualicemos 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 al carrito 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".
• Establece 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 puedes hacer en la pestaña Estilo de Cantidad.

Configurar pestañas de productos Elementor

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

Cree una nueva fila debajo de la sección superior y arrastre el módulo Pestañas de datos del producto desde el generador de Elementor a la fila para insertarlo. Aquí no se requiere mucho estilo 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 nuevamente un poco de CSS personalizado. 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 #revisar formulario #responder .form-submit input { color de fondo: #cc3366; color: #fff; radio del borde: 0px; }

Breve descripción del producto Elementor

Bien, hasta ahora tenemos un diseño decente y de apariencia simple, 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 de descripción breve de WooCommerce, luego arrástrelo y suéltelo debajo del precio del producto y encima del módulo Agregar al carrito.

Aquí todavía no se requiere estilo, ya que heredó los estilos de Hello Elementor.

Ventas adicionales de productos de Elementor y WooCommerce

Aumentar el valor promedio de su cesta es crucial para todos los sitios de WooCommerce, por lo que es bueno que Elementor incluya un módulo de Product Upsells para que pueda integrar la personalización en su tienda fácilmente.

Busque el módulo Upsells del producto en el generador de Elementor e insértelo en una nueva fila detrás de las pestañas de datos del producto.

Como puedes ver, esto requiere un pequeño 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
• Establezca 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 particular asociada a ellos.

Conclusión: creador de páginas de productos

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 pueda 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. Utilice una página vacía, cierre la ventana emergente de la biblioteca de plantillas cuando aparezca y comience a crear 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 usar para personalizar la página de su producto. Puede ver todos los diferentes widgets disponibles actualmente 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 la apariencia deseada.

Debes modificar la página de tu producto para distinguir tu tienda de comercio electrónico de la competencia y brindar a tus 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 su 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 ayudarle 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 WooCommerce en el pasado? Le invitamos a compartir sus pensamientos en la sección de comentarios. Estaremos encantados de echarle un vistazo.