To enable the toggle add a second List Section to your List Section page. The first List Section will display whilst ‘Monthly’ is active, and the second List Section whilst ‘Annually’ is active.

Copy and Paste the code below into your Custom CSS area to further customize.

div[data-wm-plugin="pricing-table"] {
  --toggle-width: 220px;
  --toggle-height: 45px;
  --toggle-alignment: center;
  --toggle-spacing: 17px;
  --toggle-border-radius: 55px;
  --toggle-border: 2px solid var(--list-section-simple-card-color);
  --toggle-active-background: var(--list-section-simple-card-color);
  --toggle-text: black;
  --toggle-active-text: white;
  --active-toggle-width: 110px;
  --active-toggle-height: 35px;
}

To edit the ‘Monthly’ & ‘Annual’ text add the below code to your Site Header Injection Area.

<script>
  window.wmPricingTableSettings = {
    monthlyText: 'Monthly Plan', // Custom text for the monthly toggle
    annuallyText: 'Annual Plan', // Custom text for the annual toggle
  }; 
</script>
Next

Pricing Suffix