En este tutorial gratuito te mostraré cómo crear una tabla de precios que cambie o alterne entre mensual/anual mediante un toggle en divi y sin plugins.
Existen sitios web en donde debemos mostrar los paquetes o planes de los servicios, pero muchas veces tenemos varios paquetes y se vuelve un poco complejo mostrar estas tablas de precios de forma ordenada. Es aquí dónde entra la importancia de un conmutador que nos ayude a cambiar entre precios mediante un solo click o tap de forma muy sencilla y fácil.
Esta funcionalidad no viene con divi por defecto así que fiel al estilo de OV DIVI he preparado algunos fragmentos de código para poder agregar esta característica de forma muy sencilla, solamente copiando y pegando.
El primer código que necesitamos insertar es la estructura del conmutador o toggle. Esta la vamos a insertar mediante el siguiente código HTML:
<div class="ov-toggle"> <span class="titulo">Mensual</span> <label class="switch"> <input type="checkbox"> <span class="slider round ov-toggle-alternar"></span> </label> <span class="titulo">Anual</span> </div>
Ya hemos insertado la estructura pero todavía le hacen falta los estilos. Por lo tanto, ahora en el CSS Personalizado debemos pegar el siguiente fragmento CSS:
.ocultar-plan { display: none; } .ov-toggle { display: flex; justify-content: center; align-items: center; } .ov-toggle .titulo { font-size: 18px; font-weight: 600; color: #fff; } .ov-toggle .switch { position: relative; display: inline-block; width: 65px; height: 34px; margin-right: 12px; margin-left: 12px; border-radius: 34px; } .ov-toggle .switch input { opacity: 0; width: 0; height: 0; } .ov-toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #262A47; -webkit-transition: .4s; transition: .4s; } .ov-toggle .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } .ov-toggle input:checked + .slider { background-color: #01c799; } .ov-toggle input:focus + .slider { box-shadow: 0 0 1px #01c799; } .ov-toggle input:checked + .slider:before { -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } .ov-toggle .slider.round { border-radius: 34px; } .ov-toggle .slider.round:before { border-radius: 50%; }
Genial, vamos muy bien. Ya por último necesitamos agregar la funcionalidad mediante el siguiente código jQuery:
<script> jQuery(document).ready(function($){ $('.ov-toggle-alternar').on({ 'click': function(){ $( ".ov-plan" ).toggle(); } }); }); </script>
Excelente, prácticamente ya tenemos todo hecho, solamente nos falta agregar unas clases a nuestras tablas de precios para que estas se oculten y se muestren correctamente, pero eso lo explico en el video, así que dale play para que aprendas cómo aplicar todos estos códigos.
¡Buenas Oscar!
Genial el tutorial, como siempre. Sin embargo estoy teniendo un fallo: Quería usar el toggle para alternar precios entre euros y dólares (mi web no tiene woocomerce instalado). Consigo ocultar la segunda tabla pero al accionar el toggle no se reproduce la segunda.
¿Alguna idea de qué puede estar pasando? Te dejo un enlace para que veas como lo estoy haciendo:
https://elchicodelmarketing.com/?page_id=861
Hola José Ángel, he inspeccionado el sitio y creo que estás colocando mal tus clases. Revisa bien el paso por paso porque con una clase o código que coloques mal puede romper toda la funcionalidad.
Oscar, excelente el tutorial, solo una pregunta. Como esito ese plan que esta oculto? ya no lo veo en el cosntructor visual
Gracias
Hola Gustavo, para editarlo hay que hacerlo desde la vista wireframe o bien, quitar por un momento este fragmento del código CSS:
Gracias Oscar…. eso es lo que hice, quitar el display:none, pero crei que habia otra solucion. Saludos Cordiales
Hola Oscar, nuevamente te molesto con una consulta
El toggle funciona perfecto, pero es posible agrgar un slider a la tabla de precios? Necesito que sean 6 columnas
Pensaba en hacerlo con ununcios en lugar de tabla de precios, pero le coloco la clase al row que contiene los anuncios y si bien logor ocultar la segunda tabla ya no funciona el toggle
https://ayeluya.com/stage/planes-2022/
Muchas gracias
Hola Gustavo, ¿Cómo insertaste el carrusel? ¿Te funcionaba con las tablas nada más?
Oscar, gracias por tu respuesta
Finalmente pude ubicar las 6 columnas en ancho completo
https://ayeluya.com/stage/planes-y-precios/
Ahora lo que intento hacer es que en el cel se vean los planes en linea y no uno debajo del otro, es muy largo asi
Abrazo grande
PD: puedo molestarte con un otro codigo para que veas por que no funciona? no logro entender que estoy poniendo mal
Para que salgan en línea en móvil, puedes usar el siguiente código CSS:
Si quieres un carrusel debes integrar una librería, yo te recomiendo flickity js, que es la librería que utilizamos en este tutorial.
Oscar, otra vez yo
Olvide poner este link en el mensaje anterior
Algo asi es que lo necesito, es posible?
https://kinsta.com/plans/?plan=visits-enterprise2&interval=month
Gracias
Me funciono bien en el modo de computadora, pero en movil tengo un error cuando tocas una superficie de los lados fuera de los precios, estos desaparecen https://yambo.es/2677-2/
Hola Frank, revisé el link de tu página y el toggle funciona bien, no veo lo que comentas que desaparecen los precios.
Hola! Antes de nada me gustaría darte las gracias porque me estaba volviendo un poco loco y necesitaba un toogle para Divi, realmente te lo agradezco. Comentarte que todo fue perfecto excepto un error que me gustaría saber si se puede solucionar.
El error en cuestión es que cuando activas el toogle (circulito a la dcha) y después haces clic en cualquier enlace de la pagina que lleve a otra pagina al volver atrás el tootgle vuelve a su posición original, sin embargo no vuelve la tabla, es decir se queda el toogle a la izquierda con el resultado de cuando está a la derecha. No se si me he explicado bien, ¿Cómo podría solucionarlo?
Nuevamente muchas gracias
Hola Hache, la verdad desconocía ese detalle que me comentas. ¿Tienes tu ejercicio en línea para ver el comportamiento?
Hola!
Claro, puedo enviartelo de alguna forma privada? te agradezco mucho tu ayuda
Puede ser por mensaje de facebook 🙂
Muchas gracias por el tutorial, tengo un problema que me queda oculto los 2 o se ven los 2, sabes que puede ser? Gracias de antemano
Hola Micaela, puede ser por algún error con una clase.
Compárteme la url de tu ejercicio para inspeccionarlo y descubrir que sucede