Create a Pricing Table with Monthly/Yearly Toggle Switch in WordPress using Elementor

 

 

1. Code snippet for Monthly/Yearly Toggle:

selector{
    --inactive-color: #E2E2E2;
    --padding: 5px;
    --size: 23px;
}
selector.monthly .elementor-widget-container{
    background: var(--inactive-color);
}
selector .elementor-divider{
    position: relative;
    cursor: pointer;
}
selector .elementor-divider:after{
    content: "";
    position: absolute;
    top: var(--padding);
    left: calc(100% - var(--size) - var(--padding));
    height: var(--size);
    width: var(--size);
    background: #fff;
    border-radius: 100%;
    transition: all 0.3s ease-in-out;
}
selector.monthly .elementor-divider:after{
    left: var(--padding);
}

 

2. Code snippet for Discount Badge:

selector{
    left: calc(50% + 112px);
}
@media (max-width: 767px){
selector{
    left: calc(50% + 50px);
} 
}

 

3. JavaScript Code snippet for enabling Toggle functionality:

<style>
.pricing-tables-1{
    display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
var $ = jQuery

$(document).ready(function(){
$('.price-toggle').on('click', function(){
    $(this).toggleClass('monthly')
    $('.pricing-tables').toggle()
})
})
</script>