How can I make the Yearly tab in Webflow's Ecommerce Section responsive, allowing users to switch between monthly and yearly pricing options? Currently, only monthly pricing is visible.

TL;DR
  • Use Webflow's Tabs component or custom interactions to toggle between Monthly and Yearly pricing, duplicating and adjusting pricing plans within each tab.  
  • Ensure both views are fully designed, responsive across devices, correctly bound to product data, and test visibility and toggle functionality in preview mode.

You're trying to implement a responsive pricing toggle in Webflow's Ecommerce section to let users switch between monthly and yearly pricing. If only monthly pricing shows, the toggle functionality or visibility/hide logic isn't set up properly.

​

1. Use Webflow Tabs to Create Monthly/Yearly Options

​

  • Use a Tabs element to define two tabs: Monthly and Yearly.
  • Under each tab pane, place the appropriate product elements (duplicate your pricing plans but change the price and details for yearly).
  • Make sure both tab panes are styled appropriately and are set visible in the Designer for editing.

​

2. Set Initial Tab Visibility

​

  • Webflow loads the first tab (Monthly) by default. You can reorder your tabs if needed.
  • Ensure the Yearly tab has content (clone the Monthly layout if needed and adjust prices).

​

3. Make the Tabs Toggle Clearly Visible

​

  • Style the tab menu so both tabs are visible and functional for desktop, tablet, and mobile views.
  • Use Webflow's responsive settings (lower left sidebar) to test and adjust how the tabs appear on different screen sizes.

​

4. Use Interactions (Optional) for More Advanced Toggle Behavior

​

  • If you're not using the Webflow Tabs component and using custom toggle buttons instead (e.g., a switch), set up mouse click (on click) or tap interactions:
  • Show/hide or display: none/flex respective pricing blocks.
  • Add animation to enhance the toggle experience.

​

5. Double-Check Ecommerce Binding

​

  • Make sure each pricing section (Monthly and Yearly) is correctly bound to separate Ecommerce Product CMS collections or individual product elements if you change pricing manually.
  • If using dynamic data, use conditional visibility (e.g., show Monthly if a pricing field equals “Monthly”) within each tab content section.

​

6. Preview and Test on All Devices

​

  • Use Preview mode and resize the screen.
  • Click between tabs to confirm both Monthly and Yearly pricing are visible and switch as expected.
  • Check mobile view: make sure the tabs don’t collapse or hide behind other elements.

​

Summary

​

Use Webflow's Tabs component (or custom interactions) to allow toggling between Monthly and Yearly pricing. Ensure both pricing views are created and responsive, and test across device sizes to confirm visibility and switching behavior.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is there a reason why my Webflow navigation instance (burger menu) is not updating in preview or when I publish the site, even after trying multiple browsers and clearing the cache?
How can I show ellipsis (...) when text is cut off in a Webflow textbox due to the size of the block? Can anyone provide the necessary code or solution? Thank you!
How can I edit the display of images in my Webflow template and ensure that each image is unique to its respective project on my portfolio site without the same image appearing on every page when using a Quick stack layout?
How can I remove the green color that appears when selecting a section in the navigation bar for mobile on Webflow?
Why is one of the images on my Webflow site appearing rotated after publishing, even though it displays correctly in the Webflow Editor and Preview?
How can I create an animated hero section on my website using Webflow?
Can the background color of a fixed navbar in Webflow be changed from transparent to a different color when a visitor starts scrolling?
How do I make a contact-slide-in-sidebar scrollable in Webflow on mobile devices? Also, how can I coordinate the actions of two triggers so they don't bug when opening and closing the sidebar?
Has there been an update or change of keys in Webflow to move a heading and image into the same grid box using the Ctrl + drag on Windows method mentioned in the Cards video of the Webflow 101 course?
Can sections be named in Webflow for easier identification and organization?
How can I fix automatic redirect issues in Webflow when changing page slugs within a folder?
Is it possible to insert bullet points in a list within a paragraph using Webflow?
How can I style a newsletter form in Webflow with custom CSS, specifically to have the submit button inside the input field?
How do I enable scrolling within a popup in Webflow using the mouse wheel or trackball on devices without touchscreens or trackpads?
How can I create a carousel slider using the Owl Carousel 2 plugin with Touch and Drag Support, Responsive design, and over 60 options, and integrate it with Webflow CMS?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?