Pricing Table Development
Budget: $30 – $250 USD
Requirement:
Current Design - https://prnt.sc/265ac0b , https://jumpshare.com/v/lWnfhjMyriQ8Bpee5vZk
Need to make a modern design pricing page which should have these elements
1 - Currency Changer: We have 2 currency - USD & INR. If someone selects USD then the amount should change in USD and if someone selects INR then the amount should be in INR.
SAMPLE - https://prnt.sc/265nh5l , https://prnt.sc/265nj53
2 - Monthly/Yearly: If someone selects the monthly plan it should show monthly value of it and same with Yearly (should work for both USD and INR). Also we have a discount on yearly subscription so if someone selects yearly then the actual price should be striked and discounted price should be shown (If the price of monthly and yearly is same then the amount should not be striked and should be shown directly) -
SAMPLE - https://prnt.sc/265ni9g , https://prnt.sc/265ns4s
3 - A tooltip : The pricing table and some text below it should have a tooltip option to add to whichever option we want to add it on. So we can explain what the point is about or whats included in that key point. This should done in such a way where we can show it anywhere on that page.
SAMPLE - https://prnt.sc/265azvh
4 - Full Features List: Need a button that will load an html popup on the same page and will show full detail of plans in depth. It should have Add to cart option, Tooltip, Billing cycle, and again pricing and discount strikethrough.
SAMPLE - https://jumpshare.com/v/EHPShjD0wharf8U0PKJo click on view full features, it opens a pop-up where we can compare all our plans and all the features that we offer and select the savings in monthly as well as annually. Image 1 - https://prnt.sc/265bo95 Image 2 - https://prnt.sc/265bma3
5- Coupon: There should be an option to show pre-applied coupon. Suppose we run an offer of 20% off pre-applied then that discounted price should directly reflect our current pricing. We just need to enter the percentage off and it should auto calculate, Also there should be an option where we can edit the coupon text.
THINGS TO KEEP IN MIND
- Should be responsive.
- Should be easy to edit. Not hard coded. The values should be added via JS so its easier to edit them rather than editing them via HTML.
- The design should be neat and clean and should reflect the theme.
- This code will be added via HTML element of elementor. so make sure the code will work on wordpress elementor (We can connect on this to discuss how we will add JS scripts).
- Design Samples for pricing panel - https://prnt.sc/265c6db , annual and usd inr design sample - https://prnt.sc/265cky8
- You are free to use your own creativity as well
Current Design - https://prnt.sc/265ac0b , https://jumpshare.com/v/lWnfhjMyriQ8Bpee5vZk
Need to make a modern design pricing page which should have these elements
1 - Currency Changer: We have 2 currency - USD & INR. If someone selects USD then the amount should change in USD and if someone selects INR then the amount should be in INR.
SAMPLE - https://prnt.sc/265nh5l , https://prnt.sc/265nj53
2 - Monthly/Yearly: If someone selects the monthly plan it should show monthly value of it and same with Yearly (should work for both USD and INR). Also we have a discount on yearly subscription so if someone selects yearly then the actual price should be striked and discounted price should be shown (If the price of monthly and yearly is same then the amount should not be striked and should be shown directly) -
SAMPLE - https://prnt.sc/265ni9g , https://prnt.sc/265ns4s
3 - A tooltip : The pricing table and some text below it should have a tooltip option to add to whichever option we want to add it on. So we can explain what the point is about or whats included in that key point. This should done in such a way where we can show it anywhere on that page.
SAMPLE - https://prnt.sc/265azvh
4 - Full Features List: Need a button that will load an html popup on the same page and will show full detail of plans in depth. It should have Add to cart option, Tooltip, Billing cycle, and again pricing and discount strikethrough.
SAMPLE - https://jumpshare.com/v/EHPShjD0wharf8U0PKJo click on view full features, it opens a pop-up where we can compare all our plans and all the features that we offer and select the savings in monthly as well as annually. Image 1 - https://prnt.sc/265bo95 Image 2 - https://prnt.sc/265bma3
5- Coupon: There should be an option to show pre-applied coupon. Suppose we run an offer of 20% off pre-applied then that discounted price should directly reflect our current pricing. We just need to enter the percentage off and it should auto calculate, Also there should be an option where we can edit the coupon text.
THINGS TO KEEP IN MIND
- Should be responsive.
- Should be easy to edit. Not hard coded. The values should be added via JS so its easier to edit them rather than editing them via HTML.
- The design should be neat and clean and should reflect the theme.
- This code will be added via HTML element of elementor. so make sure the code will work on wordpress elementor (We can connect on this to discuss how we will add JS scripts).
- Design Samples for pricing panel - https://prnt.sc/265c6db , annual and usd inr design sample - https://prnt.sc/265cky8
- You are free to use your own creativity as well