Cómo Hacer Una Página

Cómo crear la ficha de los productos de WooCommerce con Elementor Pro

En el tutorial anterior aprendimos a crear la página principal de la tienda de WooCommerce con Elementor Pro.

En este tutorial veremos cómo podemos hacerlo con la ficha de los productos de nuestra tienda hecha con WooCommerce.

Al igual que hicimos para la página de la tienda empezaremos creando una plantilla.

Para ello vamos a Elementor —> Mis Plantillas —> Single Product —> Añadir nueva single product:

plantilla single product elementor
plantilla single product elementor

Ahora tenemos dos opciones:

Elegir una plantilla predefinida

Tan sencillo como elegir una plantilla entre las que nos aparecen:

plantillas single product

Una vez elegida entraremos en el editor visual de elementor con el diseño predefinido elegido:

editor visual elementor woocommerce

Si hacemos click en publicar nuestro diseño tenemos la posibilidad de añadir la condición para que la plantilla que estamos creando sea la utilizada en los productos:

elementor plantilla productos

Y listo, ahora si abrimos cualquier producto tendrá el nuevo diseño que hemos generado con la plantilla:

resultado nueva ficha elementor

Crear nuestra ficha de producto desde cero

Al igual que podemos usar una plantilla predefinida para hacer nuestra ficha de producto podemos hacerla totalmente desde cero.

Para ello vamos a Elementor —> Mis plantillas —> Single Product —> Añadir nueva single product y ahora en vez de elegir una plantilla cerramos la página de las plantillas y llegaremos al constructor visual pero en esta ocasión estará vacío.

ficha producto single desde cero

Si nos fijamos en la imagen anterior veremos a la izquierda todos los campos que podemos añadir a nuestra ficha de producto.

Antes de añadir campos lo que vamos a hacer es crear la estructura de nuestra ficha de producto, es decir, cuántas columnas queremos, en este caso voy a añadir 2 columnas para poner la imagen destacada del producto a un lado y los campos de texto al otro.

estructura ficha columnas

Una vez seleccionadas las columnas que queremos luego podemos cambiar su anchura simplemente arrastrando las esquinas y ajustando el tamaño al deseado.

Ahora tan sólo tenemos que empezar a arrastrar los campos deseados desde la izquierda al lugar que los queremos colocar:

Añadir campos ficha

Los campos de producto que podemos añadir a nuestra ficha son:

En el siguiente video puedes ver como funciona cada una de las opciones anteriores:

Suscríbete a mi canal:  

Espero que el tutorial os haya gustado 🙂

Salir de la versión móvil