Cómo crear una página de producto personalizada con Flatsome

Estratergia digital eMarketing365 2 diseño web Tarragona

Muchas veces queremos ser diferentes con nuestra tienda online y nos encontramos que el catálogo es idéntico a otras página web.

Esto se ha acabado, HOY vamos a ver cómo hacer una ficha de producto totalmente personalizada a tu gusto

El único requerimiento imprescindible es SER CREATIVO

Estás preparado…. 1, 2, 3… EMPECEMOS

Estos son los pasos que tenemos que seguir

  1. Crear un nuevo bloque (BLOCK)
  2. Habilitar la página desde FLATSOME > THEME OPTIONS > WOOCOMMERCE > PRODUCT PAGE
  3. Configurar la página con el editor UX-BUILDER

PASO 1 – Crear un nuevo bloque (BLOCK)

Los bloques pueden tener cualquier título, pero usaremos la siguiente una vez como ejemplo y les agregaremos el prefijo CPL (custom product layout).

  • GLOBAL: cree un nuevo bloque vacío ‘CPL – Global’
  • POR CATEGORÍA: cree un nuevo bloque vacío ‘CPL – Categoría – Ropa’
  • POR PRODUCTO: haga un nuevo bloque vacío ‘CPL Simple – Diseño 1’

Lo encontrarás dentro de tu escritorio en: UX Blocks > Añadir nueva

Producto personalizado 01 crear bloque diseño web Tarragona

PASO 2 – Habilitar la página del producto personalizado (global, por categoría o por producto individual)

> GLOBAL

Lo encontrarás en: Flatsome > Theme Options > Woocommerce > Product page

Habilite ‘Custom‘ en las opciones de product layout y seleccione el bloque que acaba de crear para el diseño de la página del producto personalizado.

Producto personalizado 020 habilitar pagina diseño web Tarragona

> POR CATEGORÍA

Dentro de la edición de la categoría en: Productos > Categorías

Producto personalizado 021 Por categoria diseño web Tarragona

> POR PRODUCTO

Edite el producto donde quiera utilizar el diseño personalizado

Producto personalizado 022 Por ficha diseño web Tarragona

PASO 3 – Configurar la página con el editor UX-BUILDER

  • Una vez que haya salido del panel de configuración del paso anterior, navegue a una página de producto existente en el front-end de la web que haya configurado anteriormente. 

    Para obtener la mejor experiencia, se recomienda tomar un producto que haya configurado completamente, con algunas imágenes, una breve descripción, etc.

    De esa manera, puede visualizar más fácilmente la sección de la página que creará.
  • Edite la página usando el enlace «Edit product layout with UX Builder» en la barra de administración superior
Producto personalizado 030 configurar pagina diseño web Tarragona

Modo de edición:

Cuando se abre el creador de UX, ahora tendrá los elementos de la página del producto disponibles en el panel lateral izquierdo en la sección ‘PRODUCT PAGE‘.

Producto personalizado 031 elementos diseño web Tarragona

¿Quieres que te ayude a crear tu página de producto personalizada?

Deja una respuesta

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

  Acepto la política de privacidad

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.