Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / Elementor / Cómo crear la ficha de los productos de WooCommerce con Elementor Pro

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

noviembre 13, 2018 Por Óscar Deja un comentario

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
  • Crear nuestra ficha de producto desde cero

Elegir una plantilla predefinida

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

plantillas single product

plantillas single product

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

editor visual elementor woocommerce

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

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

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

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

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

Añadir campos ficha

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

  • WooCommerce Breadcrumbs: Son las migas de pan para tener la ruta navegable del producto
  • Product Title: El título del producto
  • Product Image: La imagen destacada y la galería de fotos de nuestro producto
  • Product Price: Precio del producto
  • Add To Cart: Botón para añadir al carrito de la compra
  • Product Rating: Valoración del producto de los clientes
  • Product Stock: Número de productos en Stock
  • Product Meta: Datos como el SKU o categoría del producto
  • Short Description: Descripción corta del producto
  • Product Data Tabs: Pestañas con la información del producto. Aquí está la descripción larga y las valoraciones de los clientes
  • Additional Information: Información adicional
  • Product Related: Productos relacionados con el producto de la ficha
  • Upsells: Productos seleccionados en la opción productos vinculados

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 🙂

Publicado en: Elementor, Woocommerce

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Acceder

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.
Non-necessary
Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
GUARDAR Y ACEPTAR