Cómo crear páginas de venta espectaculares con WooCommerce y Divi

Vuelvo a estar al pie del cañón con unas ganas inmensas de seguir compartiendo contenido en el blog después de un parón navideño corto, pero intenso.

Espero que tú también hayas tenido tiempo de recargar pilas y de coger algún kilo de más. Menudos atracones 🙂

Hoy quiero explicarte cómo puedes crear una página de ventas espectacular usando WooCommerce y Divi.

Cuando se habla de crear o configurar páginas de ventas, pensamos directamente en herramientas como Thrive Content Builder, OptimizePressLeadPages.

Son excelentes herramientas, sin duda. Pero no solo sirven para crear páginas de venta, sino que también incluyen multitud de funciones adicionales que en muchos casos jamas vamos a usar y además todas ellas son de pago.

A veces ocurre que solo nos interesa crear una página de ventas para el producto estrella de nuestro catálogo o directamente solo vendemos 2 o 3 tipos de producto en nuestra tienda y no queremos mostrar una simple ficha de producto, sino que queremos diseñar una página de ventas personalizada para cada uno.

Además, en estos casos suele ocurrir también que el producto en cuestión se vende de forma individual, es decir, el cliente solo compra una unidad, por ejemplo: productos de coste elevado (una joya, un reloj o un smartphone), un producto personalizado, un curso, etc

Pues bien, si ese es tu caso, puedes crearte una página de ventas usando WooCommerce y un tema premium que incluya un constructor de páginas (hoy día el 99% de los temas premium lo incluyen). Y obtener un resultado que nada tiene que envidiarle a las páginas creadas con Thrive Content Builder, OptimizePressLeadPages.

WooCommerce + Divi. Construye páginas de venta personalizadas para tus productos.

En este artículo me he decantado por el tema Divi para hacer el diseño de la página de ventas, pero en realidad, lo que voy a mostrar se puede aplicar a cualquier constructor de páginas de cualquier tema. Más o menos funcionan todos igual.

Antes de meterme de lleno en el tutorial, quiero dejar claro la diferencia entre una página de ventas y una ficha de producto.

La ficha de un producto de cualquier tienda online no es más que una página en la que se muestra una descripción del producto, sus características y ventajas, una foto principal del mismo junto con una galería (si hay más imágenes disponibles), el precio y un botón de añadir al carro.

Además, la ficha de producto suele tener un apartado de productos relacionados, una sección de opiniones de clientes que ya han comprado el producto y un menú para acceder a las diferentes secciones de la tienda.

Normalmente el cliente que entra a una ficha de producto ya ha echado un vistazo antes por diferentes secciones de la tienda hasta llegar ahí, ya sabe lo que quiere y está dispuesto a pagar por ello. (Si quieres conocer mi sistema para mejorar las conversiones de las fichas de producto, te recomiendo que hagas clic aquí).

Sin embargo, una página de ventas va mucho más allá. No suele haber un paso previo del cliente por la tienda, ni por otros productos, digamos que el cliente entra «en frío» directamente a ella.

En esta página no sólo tienes que presentarle el producto sino que tienes que acabar convenciéndole de que DESEE comprarlo. Además, la página de ventas no debe tener «puntos de fuga» -menús que lleven hacia otras páginas o enlaces a productos relacionados- y el proceso de compra debe ser mucho más simple. Ya no va a hacer falta pasar por el carro de la compra.

Creando el diseño de la página de ventas con Divi.

La gran ventaja de hacer el diseño de la página de ventas del producto usando el constructor de páginas de Divi, es que tienes libertad para hacer el diseño que desees (igual que si estuvieses diseñando la Home de tu tienda) y además optimizarlo para la venta.

Recuerda que estás trabajando sobre una página, no sobre una ficha de producto.

En la ficha de producto, no puedes modificar la estructura del diseño, ya que viene definida por la plantilla que estés usando.

Para que te hagas una idea de cómo sería la estructura habitual de una página de ventas, a continuación te muestro un esquema muy simple que te ayudará a entenderlo.

Estructura de página de ventas en WooCommerce

Cada fila del esquema anterior se identifica con una sección bien diferenciada de la página de ventas.

Todas tienen una función y todas son importantes.

Esta entrada no va de cómo redactar páginas de venta, sino de cómo crear su diseño e integrarlas con un producto de WooCommerce. Para redactar buenos textos para tu página de ventas, te recomiendo que visites el blog de Maïder Tomasena, en el que encontrarás mucha información sobre ello.

Para diseñar la página de ventas de tu producto, lo primero que tienes que hacer -obviamente- es crear una página nueva, desde el menú lateral del panel de administración, clicando en «Paginas > Añadir nueva«.

Una vez dentro de la página de edición, debes hacer clic en el botón «Usar el constructor Divi» para poder activar el constructor de páginas de Divi y empezar a trabajar en el diseño.

Después de eso tendrás que seleccionar la plantilla de página «Blank Page» para trabajar sobre una página en blanco; sin menús, sin pie de página y sin enlaces a otros productos. Con esto eliminas los posibles «puntos de fuga» para que el visitante solo tenga dos posibles salidas; terminar comprando o cerrar la página desde el navegador.

Cambiar plantilla página divi woocommerce

Bien, ya tienes tu página en blanco. Ahora toca empezar a trabajar en el diseño usando el constructor de páginas de Divi y siguiendo la estructura de página de ventas que te he mostrado en la imagen de arriba.

Como supongo que ya sabrás -y si no lo sabes, te lo explico ahora-, todos los constructores de páginas funcionan con secciones, filas, columnas y dentro de estás, los elementos que quieras mostrar; texto, imágenes, vídeos, presentaciones, galerías, tablas de precios, testimonios, etc

El funcionamiento del constructor es muy sencillo de entender.

Consiste en añadir una sección para cada apartado de la página de ventas (una para el nombre del producto y titular, otra para empatizar con el visitante, otra para las características y beneficios y así con todas) y dentro de cada sección insertas las filas que necesites y cada una de ellas con el número de columnas que desees para después añadir el contenido dentro.

Crear estructura de página de ventas Divi
También puedes configurar la anchura de cada columna.

Por ejemplo, para la fila de «Características y beneficios del producto» puedes configurar 2 columnas; una para insertar la imagen principal del producto y otra para insertar el listados de características.

Diseñar página de ventas de productos en WooCommerce con Divi

La forma en que configures las columnas, su ancho y los elementos o módulos que insertes dentro de estas, dependen del aspecto que quieras darle a tu página de ventas. El resultado final que se obtenga ya dependerá de la imaginación y los gustos de cada uno.

Para darte control total sobre el diseño de tu página de ventas, el constructor de Divi incluye un panel de configuración de ajustes del diseño de cada sección, fila y módulo. Este panel de configuración te permite definir hasta el más mínimo detalle de tu diseño.

Configurar color fondo sección Divi

Por ejemplo, si quieres que la sección donde vas a añadir el texto para empatizar con el cliente, tenga un color de fondo, una tipografía y un color de fuente diferente del resto de secciones, podrás hacerlo usando estos paneles de configuración del diseño.

Ajustes diseño textos Divi página ventas

Yo recomiendo empezar cada sección con un subtítulo h2 o h3 que sirva de introducción de lo que vas a contar en ese apartado y a continuación añadir el texto que tengas preparado.

También es interesante diferenciar unas secciones de otras ajustando un color de fondo diferente a través del panel de ajustes de diseño del que te he hablado antes. El objetivo de esto es no cansar al lector, hacerle la lectura lo más cómoda posible e ir llamando su atención constantemente para que siga leyendo hasta el final.

Cuando ya hayas configurado la estructura y el diseño de todas las sección de la página, es momento de insertar los botones de compra del producto. Normalmente uno a continuación de los testimonios y otro al final de la página de ventas.

Para hacer esto debes usar un módulo de texto dentro de la columna que te interese y pegar el siguiente shortcode de WooCommerce:

Donde dice «ID_del producto» deberás sustituirlo por el número ID del producto que quieras asociar a la página de venta.

El ID del producto lo podrás ver desde la sección «Productos» situando el cursor del ratón encima del producto en cuestión. Verás que el ID es un número de color gris que se muestra justo debajo del nombre del producto.

Obviamente antes debes de haber creado un producto nuevo en WooCommerce con el nombre, precio y todos los datos referentes al producto que desees vender.

Resultado final de la página de ventas.

Aquí te muestro un ejemplo de cómo quedaría una página de ventas para un producto WooCommerce (en este caso un reloj) hecha con Divi.

Ejemplo de página de ventas WooCommerce y Divi

Como ves, he mantenido la estructura habitual de la página de ventas cambiando el color de fondo de cada sección contigua para poder diferenciarlas fácilmente.

Esto es sólo un ejemplo. En realidad puedes crear cualquier tipo de diseño que se te pase por la cabeza.

Y si lo que quieres es crear una página de ventas para un curso, ebook o cualquier producto no físico, el proceso es exactamente igual, solo que cuando vayas a crear el producto en WooCommerce, deberás marcarlo como «Virtual«.

Modificando el proceso de compra de WooCommerce.

Perfecto. Ya tienes la página de venta de tu producto terminada.

Lo siguiente que tienes que hacer es sustituir el texto del botón de compra que muestra el shortcode que acabas de insertar.

Por defecto, el texto que aparecerá será «Añadir al carro«, pero es una página de venta y no debería haber carro, así que ese texto no tiene ningún sentido.

Para definir un texto personalizado para tu botón de compra, basta con usar este código:

Este código cambiará el texto «Añadir al carro» por el de «Comprar» (mucho más adecuado), pero si quieres que muestre otro, simplemente sustituye donde dice «Comprar» por el texto que quieras mostrar. (Siempre entre comillas).

Ya podríamos decir que el trabajo está hecho, pero falta el paso más importante.

Si te fijas, cuando haces clic en el botón de «Comprar«, te lleva a la página de carrito y eso no nos interesa.

Queremos llevar al cliente directamente a la página de pago, puesto que el paso previo por el carrito es una posible vía de escape y de que abandone la compra.

Para simplificar el proceso de compra y conseguir que el cliente vaya directamente a la página de pago deberás usar el siguiente código snippet:

Si después de añadir el código, sigue sin funcionar, prueba desactivando la opción de WooCommerce de añadir al carro con AJAX. Para hacer esto, entra en «WooCommerce > Ajustes > Productos > Mostrar» y desactiva la la opción «Habilitar AJAX…».

[thrive_leads id=’19458′]

Por último, queda eliminar todos los posibles «puntos de fuga» de la página de pago. Esto es clave porque si ya has hecho el 90% del trabajo y la persona que entra ya está casi convencida de comprar, sería «muy doloroso» perder esa venta justo en último paso y todo por algo que depende directamente de ti.

Por tanto, lo que tienes que hacer es eliminar el menú de la cabecera, la sección del footer y el sidebar lateral. Todos incluyen enlaces hacia fuera que pueden distraer la atención del comprador y hacerte perder la venta.

Ocultar estas secciones y crear una página de pago totalmente optimizada para la conversión es muy sencillo con Divi. Simplemente tienes que entrar en el editor de la página de pago (la página de pago que crea WooCommerce por defecto es la de «Finalizar compra«) y configurar los siguientes ajustes:

  • En Diseño de página selecciona la opción «Ancho completo«. Esto evitará que se muestre el sidebar lateral.
    Optimizar página de pago WooCommerce con Divi
  • En Plantilla selecciona la opción «Blank Page«. Con esto eliminaremos el header y footer de la página de pago.

Después de esto, puedes usar el siguiente código snippet para ocultar también el botón de «Seguir comprando» que se muestra al entrar por primera vez en la página de pago y que podría hacer que el comprador abandonase la página.

Cuando hayas configurado los ajustes anteriores, guarda los cambios y vuelve a cargar la página de pago para ver el nuevo aspecto.

A continuación te muestro el antes y el después del diseño de la página de pago usando el tema Divi.

Eliminar botón seguir comprando WooCommerce

Como puedes ver el resultado final es ¡perfecto! Puesto que cumple con las premisas que nos hemos marcado; conseguir una página de pago limpia y sin «puntos de fuga».

Ya no se muestra el menú de la cabecera, ni el footer, ni el sidebar lateral, ni tampoco el botón de «Seguir comprando». Con lo cual, el cliente ya solo puede terminar haciendo clic en el botón «Realizar pedido» y haciendo el pago o -en el peor de los casos- cerrando la ventana del navegador.

Resumiendo.

Las posibilidades que presta WooCommerce y la plantilla Divi para crear páginas de venta son inmensas y los resultados espectaculares. Ya lo has visto en el ejemplo anterior.

Pero sin duda, la gran ventaja es que aunque uses WooCommerce solo para páginas de ventas, seguirás disfrutando de todas sus funcionalidades que incluye; informe de ventas, integración con multitud de pasarelas de pago, facturas, descuentos, etc y todo ello sin que el cliente note la más mínima diferencia.


Solo quería avisarte de que este artículo contiene enlaces de afiliado. Eso quiere decir que si decides comprar el tema Divi con el que he hecho este tutorial (y que yo mismo utilizo), yo recibiré una comisión sin coste extra para ti.

No me voy a hacer rico con ello, pero con este pequeño gesto me ayudarás a seguir generando contenido gratuito y de calidad en Woodemia. ¡Gracias! 😉

Webinar en DIRECTO

Aprende a crear una tienda online profesional con WooCommerce

Miércoles 25 de septiembre a las 19:30 hora de Madrid

00
Months
00
Days
00
Hours
00
Minutes
00
Seconds

¡Genial! Ya casi estás

IMPORTANTE: Para asegurarte tu plaza en el webinar, sigue los siguiente pasos

PASO 1

En unos minutos recibirás un email con el asunto: [IMPORTANTE] Confirma AHORA tu plaza para el webinar

PASO 2

NOTA: Si no lo has recibido, mira en tu bandeja de SPAM por si acaso.

Abre el email y haz clic en el botón verde.

Una vez hecho eso, tu plaza quedará automáticamente reservada. ¡Así de fácil!

95 comentarios en “Cómo crear páginas de venta espectaculares con WooCommerce y Divi”

  1. Avatar

    Excelente artículo Manuel ,de lo mejor que he encontrado ,quería saber si nos puedes ayudar a incluir otros elementos de la página del producto ,tales como ,puntuación de estrellitas ,imagen del producto,en fin ,gracias por el articulo.

  2. Avatar

    Buenas tardes Antonio,
    Estoy haciendo una tienda online con WordPress + WooCommerce con Divi.
    Cuando creo el módulo tienda en Divi no me aparece debajo de cada producto el típico botón de «add to cart», obligando al cliente a entrar en el producto para iniciar el proceso de compra.
    ¿Sabes cómo se puede añadir éste botón en cada producto en el módulo tienda de Divi?
    Muchas gracias,
    David

  3. Avatar

    Estimado, agradezco mucho tu buena intención en responder dudas.
    Quisiera saber, cuál es la mejor forma de comercializar tu sitio realizado en DIVI, para no tener que dar tu acceso API al cliente?
    Espero haberme explicado bien.

    Saludos !

  4. Avatar

    Hola Antonio, muy buen posteo!

    Quería consultarte lo siguiente. Yo he desarrollado distintas páginas de producto personalizadas, no he tenido demasiado problema con ello. Sin embargo, la duda que tengo es si hay alguna forma de convertir esta nueva página de venta de producto en su página predeterminada. Esto para que, al acceder desde cualquier vínculo (por ejemplo, desde el link a la página de producto que aparece en el carrito de compras) me lleve siempre a la página de venta y no a la estándar de Woocommerce. Yo lo he resuelto con redireccionamientos desde .htaccess, no es muy complicado hacerlo así, pero por ahí es engorroso para un cliente que quiera autoadministrar su web y cree un nuevo producto.
    Se te ocurre alguna otra forma? No se si he sido claro con la consulta.
    Gracias!

  5. Avatar

    Hola, Antonio
    ¿Es posible hacer un catálogo de productos con divi y woocommerce? Anulando el botón en este caso.

    Un saludo
    Leyre

  6. Avatar

    Hola, tengo un proyecto para un cliente de tienda online, con woocommerce y wordpress, la cuestión es como puedo automatizar los envíos con correos express?? Gracias

  7. Avatar

    Buena Tardes Antonio, estoy haciendo mi tienda virtual de aprendizaje con woocommerce y divi, tengo n problema, es importante que a la hora que aparezca en el telefono la posibilidad de la venta, aparezca tambien el carrito de compra y un icono de miembros para que las personas no solo compren elproducto sino que tambien puedan acceder a ella, veo que en la tienda guess ya aparece el carrito, solo faltaria que aparezca la entrada o registracion para no perder al alumno, que puedo hacer? Muchas Gracias

  8. Avatar

    Hola Antonio,
    Hay alguna forma de personalizar/modificar la ficha del producto woocommerce que viene por defecto? Tengo instalado el theme Divi

    Gracias!

    1. Avatar

      DIVI diseña páginas de manera facil, pero se han olvidado de los productos woocommerce, siguen siendo todos iguales. Existe un plug-in impresionante para hacer eso y trabajar como una página normal de DIVI y además lleva incorporados todos los códigos de woocommerce tanto como módulos de DIVI como shortcodes, se llama «Woocommerce Product builder» es de pago, pero amortizas cada euro que pagas por el.
      https://www.divikingdom.com/product/woocommerce-product-builder/

  9. Avatar

    Hola Antonio, gracias por compartir tus conocimientos. Usas el módulo Texto para introducir el código [add_to_cart id=»ID_del_producto» style=»text-align:center;» show_price=»false»]. ¿Se puede usar el módulo botón para tal función? En caso afirmativo, ¿como se haría? ¿Dónde introduciríamos dicho código? Lo digo por las posibilidades de diseño que Divi ofrece para los botones. Gracias de antemano!

  10. Avatar

    Buenas noches Antonio, todo esto que he modificado se cambia para toda la tienda, es decir, la pagina de ventas guia sin distraccion al comprador hasta el final.

    sin embargo si alguien compra a traves de la tienda navegando normalmente, no va a poder gestionar el carrito, cada vez que añada algo se va a ir a la pagina de pago.

    ¿hay alguna manera para que desde la tienda se vaya al carrito y desde las paginas de ventas se vaya a la pagina de pago directamente?

    gracias y un saludo

    1. Avatar

      Hola David,

      Sé que es tarde para contestarte, pero por si acaso sigues con la duda, te diré que SI se puede.

      Habría que añadir al snippet de redirigir a la página de pago un condicional indicando que solo se active si se trata de una página de venta. Para indicarle qué páginas son las de venta, debes usar los IDs de esas páginas.

      Saludos!

  11. Avatar

    Hola. Estoy haciendo una web con productos afiliados. Al pinchar sobre el producto la web te redirige a Amaz***.
    Tengo problemas con los H2. Los productos me aparecen con una etiqueta H2 en la página en donde quiero que se muestren y a mi me interesaría que fuera un H3 y no un H2.
    No sé cómo podría modificar ésto. Gracias por adelantado.

  12. Avatar

    Hola, soy novato en woocommerce y divi builder. Tengo instalado el tema mystyle, cuando hago una página nueva y la vinculo como estática al home, le coloco FULL WIDTH ( Página / editar página de home / Atributos de página /FULL WIDTH ) . No he podido hacer FULL responsive en pantalla de PC ni celular ni tablet, siempre me sale un área blanca de espacio de izquierda y derecha el cual no me permite visualizar a pantalla completa. Me podrías apoyar como hacer eso ? ya que siempre hay un área limitada por mystyle que predomina en todo el diseño. Ya coloqué también en la página del home estática el tipo de layout a FULL en la parte de abajo, los layouts y no logro aún. Muchas Gracias.

  13. Avatar

    Genial post, se que llegó tarde a leerlo, pero te descubrí el otro día en el webinar de siteground. Una pregunta tonta, el plugin divi builder sólo puede utilizarse si pagas el acceso a un año de la página ??

  14. Avatar

    Excelente post, yo por ponerle un «pero» al sistema es que si un cliente clicka botón comprar y en la página de pago vuelve hacia atrás en el navegador por que quiera asegurarse de alguna tontería que tenga duda… al confirmar que efectivamente es el producto que quiere comprar pinchará de nuevo en comprar… de este modo el producto se añadirá 2 veces al carrito… incrementando el precio x2

  15. Avatar

    Hola Antonio, muy buen post.
    Tengo una duda:
    En ninguna parte explicas como hacer para que desde la pagina de todos los productos de Woocommerce, al clickear en uno, me lleve a la nueva carta de ventas hechas con Divi y no a la pagina normal de producto de Woocommerce.
    Podrías explicarlo?
    Gracias

    1. Avatar

      Hola Ariel,

      En realidad, el ejemplo está pensado para mostrar un enlace directo a la página de venta desde el menú principal de la tienda. Pero me parece muy interesante lo que comentas y de hecho, me lo acabo de anotar en mi lista de próximos snippets para WooCommerce Hacks 😉

      Saludos!

  16. Avatar

    Buenas Antonio, encantado de leer tus posts. La verdad que ayudan mucho!
    Una pregunta, los códigos que has puesto para personalizar el texto del botón y que reenvíe a la página de pago en lugar del al carrito, ¿donde hay que insertarlo?
    Muchas gracias.

  17. Avatar

    Hola Antonio. Enhorabuena por tu artículo. Para crear un ecommerce con unos 20 productos, trabajando con Divi+ Woommerce, me recomiendas una página de venta por producto? ¿Hay otra alternativa?
    Se trata de 20 productos de joyería exclusivos y mi idea es presentarlos de forma individual.
    Gracias.

    1. Avatar

      Hola Marisa,

      Si lo que quieres es mostrar los productos como páginas de venta y no usar la ficha de producto que viene por defecto en Divi, entonces no te quedará más remedio que hacer una página de venta para cada producto, configurando el botón de compra para cada uno.

      Saludos!

  18. Avatar

    Hola, cuando inserto el short code no me lleva al carrito directamente, me lleva al producto que le he puesto en id. ¿ que hago mal?.

    otra pregunta, tengo la opción de ver en el carro desde que botón han pinchado para llegar hasta ahí, por ejemplo si tuviera una página de relojes, y vendo el mismo reloj pero de distintos colores. Si yo en la página de venta he puesto la opción del negro, blanco y azul, y pinchan en el botón del blanco. Cuando se añade al carro, se añade el producto pero, me puede indicar de alguna manera que han pinchado sobre el botón del blanco?. Aunque yo lo ponga en la página de ventas en algún sitio en texto?

    1. Avatar

      Hola Clara,

      Para que el shortcode redirija a la página de pago, debes añadir los códigos que hay mas abajo del post al final del archivo functions.php de tu tema. (No olvides hacer una copia de seguridad y hacerlo antes en un sitio de pruebas).

      Si quieres hacer esto para un producto con variaciones (de color, por ejemplo), no te va a servir el shortcode del botón de compra. Habría que hacer el código HTML del botón desde cero, un botón para cada color. Y de esta forma sabrías en qué botón han clicado.

      Espero haberte aclarado la duda.

      Saludos!

  19. Avatar

    Hola amigo, estoy configurando mi sitio web con DIVI y WooCommerce y quisiera saber como puedo editar la página de «Mi-Cuenta», para quitar el menú predeterminado que sale en la página del código [woocommerce_my_account]. El que sale del lado izquierdo.
    Logre quitar casi todo del menú pero el link de ·Escritorio no lo he podido quitar.
    ¿Como puedo hacer?

    Gracias de antemano!

  20. Avatar

    Buenas me gustan muchos tus post es mas aplique muchos de tus consejos en otra pagina que tenia.
    Me gustaría preguntarte una duda que tengo, veras tengo otra pagina con contenido de adultos (vídeos) pero me gustaría añadirle otra pagina a mi tema y en esa otra pagina instalar woocomerce para hacer un sex shop.
    Supongo que se podrá hacer, pero no tengo ni idea de como tienes algún post que lo explique o puedes recomendarme alguna pagina donde hacerlo.
    Gracias por adelantado y sigue así, tus post me han ayudado mucho y seguro que hay gente como yo a las que has ayudado mucho un saludo.

  21. Avatar

    Hola Antonio,

    Estoy preparando las páginas de venta de mi nueva web con DIVI y no consigo que funcione.
    ¿Podrías explicarme por favor dónde inserto los códigos de «Personalizar texto del botón añadir al carro y Redirige a la página de pago cuando haces clic en añadir el producto»?

    Muchas gracias.

    1. Avatar

      Hola Tolo,

      Los códigos los tienes que añadir al final del archivo functions.php de tu tema hijo desde «Apariencia > Editor» y seleccionando el archivo «Funciones del tema».

      Si no trabajas con un tema hijo, entonces te recomiendo que añadas los códigos usando el plugin Code Snippet. Tienes más info sobre esto aquí.

      Un saludo!

  22. Avatar

    Hola amigo me gusto mucho hice todo lo que me dijiste, pero al darle comprar no pasa nada, solo recarga la pagina y en el link al final dice add-to-cart=266 que vendria siendo el id del producto, pero no me lleva a la pagina de pago, se queda donde mismo aunque cambien el link, el codigo de re direccionamiento lo coloque con el puging de Code Snippets, ¿Que estará pasando?

    1. Avatar

      Hola, no estoy seguro si esto te sirva pero, y si intentas en los ajustes de Woocommerce elegir la opción de redirigir automáticamente cuando se añada al carrito. esta en Woocommerce/ajustes/mostrar solo marcas la casilla y listo.

  23. Avatar

    Hola,
    Estamos en un proyecto de tienda woocommerce con divi… se trata de una tienda de reservar (booking) según un número de plazas en un calendario y en tramos de horarios… en nuestro caso no queremos que se añada la reserva al carrito de la compra, sino que vaya directamente a la página de pago. ¿es posible? ¿cómo se puede hacer?

    Asimismo, si no se puediera hacer lo de antes, si o si necesitariamos que solo se pueda añadir al carrito una sola vez, que exista un código de reserva único-y un cóndigo de pedido único… ¿es posible?

    1. Avatar

      Hola Esther,

      Si se puede hacer, de hecho, yo lo tengo configurado así en Woodemia, pero no hay plugins que lo hagan (yo al menos no los conozco). Habría que desarrollar esa funcionalidad.

      Es algo bastante complejo de explicar en un comentario. Si lo necesitas con urgencia, puedes contratar mi servicio de consultoría enviándome una petición por el formulario de contacto y te ayudaré encantado.

      Un saludo!

  24. Avatar

    Hola, Antonio!!! Excelente página y post. Me encanta todo lo que escribes.
    Yo estoy haciendo mi tienda online de divi y, al integrar woocommerce, se me pone el carrito arriba a la derecha en el menú, el simbolito. ¿Se puede quitar de ahí el carrito? ¿Dónde se encuentra este icono en el escritorio de divi con el enlace?Bueno, para mi la cabecera de divi es un misterio así que no logro ocultar el simbolito de mi página.
    Muchas gracias y mucho éxito.

    1. Avatar

      Hola Ana,

      El icono de carrito se muestra por defecto cuando activas WooCommerce y Divi no tiene ninguna opción para ocultar en su panel de configuración.

      La única forma de hacerlo es pegando el siguiente estilo en «Divi > Opciones del tema > General > CSS Personalizado»:

      .et-cart-info { display:none; }

      Espero que te sirva.

      Un saludo!
      Antonio

  25. Avatar

    Hola Antonio, primero decirte que muy buen post, hay varias extensiones que posiblemente las ponga en mi woocommerce. Tengo un problema que lleva dias volviendome loco. Estoy creando una web con pagina principal del sitio y en el menú está lo de «tienda, carrito, etc» mi intención es poner el fondo de la tienda igual que el que tengo en la pag principal, en este caso es color y no imagen, el color es en negro, pero cuando voy al menú y clico en tienda ahí me salen todos los productos clasificados por más vendidos pero me sale el fondo en blanco y yo quiero que todo salga con el fondo negro y no se como hacerlo. Mi theme es divi con la ultima version 3.0, puedo modificar todo pero cuando voy a la parte de woocommerce no se por qué pero no me deja. Estoy pensando en cambiarlo a través de css pero me está costado un poco, que tengo un theme hijo de divi (por si acaso). Sabrías como cambiar el fondo de woocommerce.
    Muchas gracias de nuevo por tu trabajo.

    1. Avatar

      Hola Jordi,

      Puedes cambiar el color de fondo de la página de tienda añadiendo la propiedad background-color con el color que quieras a la opción para CSS personalizado que incluye el constructor de Divi en cada página.

      Saludos!

  26. Avatar

    Hola, muchas gracias por el articulo,
    una gran duda de super novato: donde se pone el short code ? en las ccs dentro de la llamada a la accion ? en la url ?

    Muchas gracias de nuevo
    saludos

  27. Avatar

    Buenas tardes, en primer lugar agradecerte este blog, es de mucha ayuda.

    Estoy editando una web con el theme EXTRA e introduciendo entradas (en mi caso son imbuebles) con DIVI, pero al conocer woocomerce, he decidido trabajar con ello por su facilidad aparente.

    Mi problema es que los productos no puedo crearlos con DIVI…y si lo hago con entradas, no me permite trabajar con los atributos y categorías de woocomerce.

    ¿Puedo de alguna manera crear productos con DIVI en este theme?
    ¿Se podría crear productos y aplicarles las categorias creadas en woocomerce?
    ¿ Me das otro consejo para realizar mi web inmobiliaria?

    Gracias de antemano.

      1. Avatar

        Tengo instalado woocomerce y un theme con Divi, si creo entradas no hay problemas porque directamente hay una opción para activar Divi, pero al crear productos en woocomerce no aparece esa opción…

        ¿Sabes a que puede ser debido?, he seguido buscando desde que te escribí pero no lo he conseguido.

        Gracias.

  28. Avatar

    Hola,
    Yo tengo un problema con la tienda woocommerce en divi. No se porque cuando pongo Usar el constructor Divi en la página de Tienda no aplica nada. Le doy previa vista y me sale como si fuera un blog no aplica los estilos ni la estructura..
    He buscado y rebuscado y no consigo saber cuál es el problema..

  29. Avatar

    Hola, Antonio.

    Antes que nada, quisiera agradecerte que escribas estos posts para que otros que estamos empezando podamos seguir «pedaleando». A muchos de los que ya sois expertos os sonará la fase en la que estoy yo ahora: leyendo y aprendiendo todo lo que puedo de las personas que, como tú, tenéis la generosidad de compartir conocimientos. Eres un de mis referentes.

    Y quiero también aprovechar para abusar un poquito y pedirte una aclaración: necesito saber si es posible crear una página de tienda con woocommerce (clásica, con su galeria de productos organizados por categorias) y que, al clicar en un producto para ampliar la información, se abriera una página de venta. La idea es un ecommerce para productos de afiliación. Leyendo tu post me ha parecido que te referías más bien a una web dedicada a un sólo producto.

    Gracias!

    1. Avatar

      Muchas gracias Vivara! 🙂

      Se podría hacer, lo que pasa es que habría que desarrollar un plugin sencillo que lo implementase, ya que no conozco ninguno que lo haga.

      Saludos!

  30. Avatar

    Hola,

    Te escribi hace unos dias consultando sobre el procedimiento de agregar el Código para cambiar el Agregar al Carrito por el de Comprar en Woocommerce y no he recibido respuesta 🙁 Lo he hecho pero no resulta, me sigue apareciendo el mismo texto.

    Quiero crear un página de Ventas en WordPress y con Woocommerce pero en la llamada a la acción, en el área de la Url ingreso es el Link de la Página de Producto y es como si lo estuviesen viendo y eligiendo directamente desde la pestaña Tienda.

  31. Avatar

    Hola, saludos desde Venezuela.

    Estoy configurando la Página de Venta y tengo problemas con el ID para la Página. Tengo configurado el producto en Woocommerce y la ID es 528 pero al hacerlo con los pasos que describes, no me sale nada, si no “528_del producto” y mas nada.

    Sera mala configuración.? Gracias de antemano.!!

  32. Avatar

    Buenas,

    Divi te permite tener X plantillas de ficha de producto para diferentes productos?
    Es decir si vendo relojes y pulseras poder crear dos plantillas de fichas de prudcto, una para los relojes y otra para las plulseras?

    Gracias,
    Un saludo

    1. Avatar

      Hola Alex,

      Si claro. Tu puedes crear el diseño de página que quieras para cada producto y guardar esos diseños como plantillas de Divi.

      La verdad es que lo de trabajar con plantillas es una de las mejores cosas que tiene Divi. Te ahorra mucho tiempo.

      Saludos!

  33. Avatar

    Buenas tardes Antonio, y gracias por este magnifico blog. Tengo una consulta sobre la creacion de paginas de venta con divi, y es que necesito incluir un formulario de gravity con upload ( tengo el modulo de gravityforms addons para woocommerce ), el problema es que si meto el formulario sin mas no me lo vincula con el producto, como si lo hace desde la pagina de producto de woocommerce, no se si me explico bien. Desde la pagina de producto de woocommerce, subo la imagen y al agregar al carro me lo vincula con el pedido, si introduzco el formulario en mi pagina de venta, me mete un boton aparte para enviar el formulario y recibo por un lado el pedido y por otro lado el contenido del formulario ( un lio vamos ) sabes si hay algun tipo de shortcut o similar para que el formulario se comporte como en la pagina de poducto???? gracias

    1. Avatar

      Hola Dani,

      Lo que pretendes hacer no tiene una solución sencilla y estoy casi convencido de que la única solución es un desarrollo a medida :-/

      Siento no poder ayudarte en eso.

      Un saludo!

      1. Avatar

        Ok Antonio, gracias, al final lo soluciono maquetando la pagina en divi como haces aqui, pero en vez de llamar al boton de compra, meto la pagina de producto «[product_page id=»161″]» de esta manera tengo formularios linkados con producto.

        Gracias

        1. Avatar

          ¡Genial!

          Esa es otra forma de hacerlo.

          En realidad no tienes una página de ventas propiamente dicha, sino una ficha de producto con un diseño personalizado. Pero si cumple con tu objetivo, es más que suficiente.

          Un saludo!

  34. Avatar

    Hola Antonio, interesantísimo el artículo, estoy usando Divi en mi web para productos afiliados, y el problema con el que me encuentro es el siguiente:

    Tengo el menú principal en el cuál está la página de productos con el siguiente desplegable:
    -Gps.
    -Pulsómetros.
    -Monitor de actividad.

    El tema es que al darle directamente a uno de ellos para que me vaya donde quiero, me sale «no se encontraron enlaces», en vez de a los productos de la categoría en cuestión.
    He revisado todo y no doy con el problema, alguna solución?

    Un saludo y gracias de antemano.

    1. Avatar

      Hola Alberto,

      No te sale nada porque, según he podido comprobar, los enlaces de esas secciones no se corresponden con ninguna categoría de productos.

      Asegúrate de tener creadas esas categorías de productos y después revisa la configuración del menú y sustituye los enlaces actuales por los de las categorías.

      Saludos!

  35. Avatar

    Para los que estamos empezando con woocomerce esta herramienta de divi es un gran adelanto. Ahora me surge la misma duda que en muchos plugin para la edición de paginas.

    Estamos hablando de woocomerce, en el que uno de sus mayores atractivos es el de listar sus categorías con la misma pagina :-P. ¿Pueden estos plugin editar las paginas de categorías?. Ojo! no me refiero hacer una pagina y enlazar la categoría a la pagina. Me refiero a la pagina en si de categorías listada por las taxonomías. Que me parece que se llama, taxonomy-product_cat_.

    Un diez para el articulo, la verdad es que te informas de mucho en este bloc o blog.
    Gracias

    1. Avatar

      Hola Chanly,

      Eso que comentas no se puede hacer con ningún constructor de páginas, sino que hay que hacerlo editando el código fuente de la plantilla que se encarga de mostrar el listado de las categorías de productos.

      Espero habértelo aclarado.

      Saludos!

  36. Avatar

    ¡Hola!
    Muchas gracias por compartir tus conocimientos, ¡Está genial! 🙂
    Pero, tengo un problema con el shortcode de woocommerce, puede ser que sea yo que soy un poco manazas. He puesto el shortcode con el ID del Producto y eso va bien. Pero cuando publico la página y paso el ratón por encima del botón «añadir al carrito» me aparece un 5 en el mismo texto y no soy capaz de quitarlo.
    ¿Me podrías ayudar?

    Muchas gracias por adelantado 🙂

      1. Avatar

        Hola,

        He conseguido arreglar el numero «5» del boton de «añadir al carro» pero en el botón de ir al carro que aparece en el mensaje de confirmación una vez que añades el producto vuelvo a tener el mismo error.

        Sabes como arreglarlo?

  37. Avatar

    Hola Antonio, acabo de escribirte a SiSube con unas dudas acerca de Divi y justo entro en tu página y veo este post, una buena coincidencia.

    ¿Los plugins de Elegant themes se utilizan para algo o los hay gratuitos igual de buenos?

    Lo pregunto porque si al final me decanto por la licencia de divi (en lugar de Flatsome), no se si es interesante la que trae los plugins de 89€ o simplemente con la de los temas de 69€ ya es suficiente

    Hasta ahora he utilizado divi (prestado) y me va bien, además acabo de leer el resto de comentarios de tus lectores y veo que están contentos.

    Saludos.

    1. Avatar

      Hola Carlos,

      Yo sinceramente creo que merece la pena pagar un poco más y tener acceso a todos los plugins (yo de hecho, tengo la licencia LifeTime), sobre todo por el plugin Bloom para crear formularios de suscripción. Es una maravilla y solo ese plugin te podría costar 50€ o más.

      Saludos!

  38. Avatar

    Hola! sabes tengo una duda bien grande…esto es sólo para cambiar el diseño de las páginas o también sirve para tener Pop up o también para Leads de Mail… me interesa saber si también es responsive, la verdad es que estaba pensando en comprar un año de optinmonster y con esta nueva opción que has colocado aquí me has puesto en duda. 😛

    Saludos, y espero tu respuesta. 🙂

    1. Avatar

      Hola Cristobal,

      Esto para crear páginas de venta usando el tema Divi.

      Lo que tú necesitas es un plugin para crear formularios de suscripción tipo Thrive Leads, OptinMonster (no me termina de gustar) o Bloom (este último viene incluido con Divi).

      Y si. Todos los que he mencionado tienen plantillas de formularios responsive.

      Un saludo!

  39. Avatar

    Increíble eres un crack! Yo llevo utilizando Divi mucho tiempo y para mi es mi theme preferido. Pero no me había atrevido a crear aún una tienda online con ella y la verdad es que me lo has puesto a huevo jaja
    Lo buenísisisiismo es que cuando configures una ficha de venta o una ficha de producto o lo que sea con un diseño bien trabajado, esa ficha la puedes guardar en la galería y utilizarla para todos los demás con sólo un click!
    Y para rizar el rizo, esa ficha de producto y página de ventas que has optimizado para las conversiones y las ventas la puedes exportar para usarla en todas las webs que crees con Divi.
    ¡Alucinante! No compro la Divi con tu enlace de afiliado porque ya tengo todo el pack de Elegant Themes jajaj :)!

  40. Avatar

    Hola de nuevo Antonio!

    ¡Este post es de los que enmarcaría! 😉

    Soy fan de DIVI y uso DIVI + WOOCOMMERCE desde que ELEGANT THEMES crease esta maravilla de Theme: Intuitiva, versátil, y constantemente actualizada. Desde luego replantea el uso de WordPress y no descarto que este equipazo (impresionante atención al cliente) acabe siendo absorbido por AUTOMATIC como ya hicieron con WOOTHEMES…

    Hace tan sólo un par de días comunicaban en su imprescindible blog su inmimente actualización 2.6 y lo que me dejó aún más alucinado, es que preveen para 3/4 meses el lanzamiento de DIVI 3.0 con un «Live Editor» para que el usuario incluso pueda editar las páginas sin todo el proceso de logearse, etc.

    Con WooCommerce funciona de maravilla, lo recomiendo al 100% e integra un montón de opciones de personalización de topos de letra, colores, tamaños, etc, desde el propio panel de control de la Theme.

    No me gusta hacer esto por aquello de la publicidad pero por si os puede servir de muestra, os dejo la última tienda online que acabo de publicar hace apenas una semana:

    www.hititu.com

    Antonio, los códigos que das son muy útiles y desde luego facilitan un montón la venta. Muchas gracias!

    Si tú o cualquiera de tus seguidores necesita cualquier cosa sobre DIVI+WOOCOMMERCE aquí me tiene!

    Muchas gracias y enhorabuena como siempre Antonio!

    Un saludo,

    Ramón | UNOCOMA

    1. Avatar

      Ramon, te queria preguntar como modifico el diseño de woocommerce en Divi como los botones y tipografía. Y por otro lado como cambio los códigos para los botones de cmprsr a donde tengo que ir. Muchas gracias

      1. Avatar

        Hola Guido,

        vete a Divi / Personalizador de módulos / Tienda y ahí podrás editar un montón de los valores que vienen por defecto de WooCommerce
        (Aquí tienes el tutorial en inglés:
        https://www.elegantthemes.com/gallery/divi/documentation/customizer-modules/ )

        No obstante, existen un montón de plugins para personalizar aún más tu WooCommerce como por ejemplo éste: https://es.wordpress.org/plugins/customize-woocommerce-shop/

        En cualquier caso, veo de sobra lo que ofrece Divi.

        Suerte!

        1. Avatar

          Hola Ramon, no se que tan actual es este comentario pero vi lo que hiciste en Hititu y te felicito.
          Yo quiero saber como es que modificaste la página de producto que te brinda Woocommerce ya que veo que en tus productos has cambiado el diseño.
          Lo mismo me sucede con el resto de las páginas de Woocommerce comoser Tienda, Carrito, Finaliza compra, etc.

          Desde ya te agradezco tu colaboración.

          Saludos !

    2. Avatar

      Hola Ramón
      He visto la web que dejas de ejemplo y quiero algo similar. Con divi + woocommerce podría hacerla sin problema?
      Gracias de antemano
      Saludos

Dejar un comentario

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

Responsable: Antonio Cantero, siendo la Finalidad; envío de mis publicaciones así como correos comerciales. La Legitimación; es gracias a tu consentimiento. Destinatarios: tus datos se encuentran alojados en mi plataforma de email marketing Active Campaign ubicada en EEUU y acogida al Privacy Shield. Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos en contacto@woodemia.com

Webinar en DIRECTO

Aprende a crear una tienda online profesional con WooCommerce

00
Months
00
Days
00
Hours
00
Minutes
00
Seconds

¡Apúntate GRATIS!

Miércoles 25 de septiembre 19:30 hora Madrid

¡Genial! Ya casi estás

En unos minutos recibirás un email con el asunto: [IMPORTANTE] Confirma AHORA tu plaza para el webinar

NOTA: Si no lo has recibido, mira en tu bandeja de SPAM por si acaso.

Abre el email y haz clic en el botón verde.

Una vez hecho eso, tu plaza quedará automáticamente registrada. ¡Así de fácil!

PASO 1

PASO 2

Evita los mismos ERRORES SEO que cometen el 95% de las tiendas online 

Déjame tu nombre y email para poder enviarte el acceso a la masterclass.

Responsable: Antonio Cantero, siendo la Finalidad; envío de mis publicaciones así como correos comerciales. La Legitimación; es gracias a tu consentimiento. Destinatarios: tus datos se encuentran alojados en mi plataforma de email marketing Active Campaign ubicada en EEUU y acogida al Privacy Shield. Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos en soporte@woodemia.com. Para más información consulta la política de privacidad

Ir arriba