Using Elementor, create a pricing table in WordPress with a monthly/yearly toggle switch.

Prerequisites:

• Make sure WordPress is installed on your hosting.
• Install and activate the Elementor plugin. You might need Elementor Pro for some features.

Step 1: Create a New Page

1. Go to your WordPress dashboard.
2. Navigate to Pages > Add New.
3. Click on ‘Edit with Elementor’ to open the Elementor editor.

Step 2: Add a Pricing Table Widget

1. In the Elementor panel, search for the “Pricing Table” widget and drag it into your page layout.
2. Customize your pricing table by adding the details for your plans. You might want to create one table for monthly pricing and another for yearly pricing.

Step 3: Duplicate for Yearly/Monthly Plans

1. Once you’ve set up the monthly plan table, right-click on the section handle and select “Duplicate” to create a copy for the yearly plans.
2. Adjust the details in the duplicated table to reflect yearly pricing.

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. A bit of JavaScript code to enable Toggle the following features:

<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>