First- I plan to make a service available at a sliding scale price. How do I set this up in Amelia?
Second, I am using a custom font for the step-by-step service booking form, and the font is displaying quite small, but I see no way to control the size. Please see the page referenced above. How may I fix this?
I followed the link, read the instructions and tried the suggested solution. Under "Custom Duration and Pricing" I see no option for creating a sliding scale price for my service. To clarify, I would like to offer a "sliding scale" price, for instance, allowing a client to choose their price within a set range (for instance: $150-$500). How may I do this.
Regarding the font issue: I tried adding the provided css code in the wordpress site at Appearance/Customize/Additional CSS. Result: No change.
I then pasted it in the Nimva Theme settings at Theme Options/Custom CSS. Result: No change.
I then pasted it into the individual page settings for https://coffeeinspiracy.com/booking at Edit Page/Page Settings/Custom CSS settings. Result: No Change. However, when I pasted the code here, the UI presented a warning flag, with the following text: "Don't use adjoining classes. Element (dif.am-fs__init.am-fs__main-content is overqualified, just use .am-fs__init without elemment name. Element (dif.am-fs__init.am-fs__main-content is overqualified, just use .am-fs__main-content without elemment name."
The font issue persists, and I also still fail to see a mechanism for creating a sliding scale payment. Please advise.
Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways.
If you need help with adding custom CSS to the page, please take a look at this article.
Currently, there is no option to configure a sliding scale price within Amelia. I understand the importance of offering flexible pricing, and while the sliding scale feature isn't available, there is a workaround that might help.
Amelia allows you to create multiple service variations with different prices. You can set up several price points within your desired range (e.g., $150, $250, $350, $450, $500) as separate service options. This way, clients can choose from predefined prices, giving them some flexibility while booking.
I've added the snippet using all of the methods documented in the link you sent - and have just now added the method via the CodeSnippets plugin. The code is still not functioning and the text in the booking from is still tiny.
Please advise.
Also, the method you suggest as a workaround for a true sliding scale price option will not be suitable for this application. Please consider this a feature request.
#amelia-container > div > div > div.am-fs__init.am-fs__main-content > form > div > label > span{ font-size: 25px !important; }
.am-select-service-name{ font-size: 25px !important; }
to see if someone may have already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like, where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
Thank you for this code change. It is partially working. As it turns out, this css is only modifying the font size in a few places. Others are still unreadably tiny. See attached screenshots. I would like to be able to change the font sizes discretely for different locations, including the button text, the heading, additional step questions (e.g. - Bringing anyone? menu - see screenshot), calendars, etc. I think it would be a simple matter to reuse the same css and replace the relevant sections to correspond to the different locations where fonts are used. Can you provide these details?
Also, see in the second screenshot how a "continue" button is visible behind the "yes" and "no" buttons? I believe this is the continue button from the next step being partially visible because it is set to pre-load behind, but since I've chosen a semi-transparent background, it shows through. How may I correct this, while preserving the background transparency?
What I'd like to be able to do is discretely change the font sizes of any part of the form -make some bigger and other's smaller at will via the Gui or via CSS. Ideally, I'd also like to be able to choose fonts/sizes/colors for, say, all headers sub headers, body paragraphs, buttons, etc, as a group. For now, just getting the CSS codes for each text element in the GUI should suffice.
Thank you for this method and for the video. You've shown me a useful tool.
Technically, this method "works". I can, in fact, change the font size for every single element. This is very cool!
However, the method is much too complicated and tedious. For instance, often bringing up the inspector causes the window to resize, and all of the selector elements switch to "mobile" or "full-mobile" versions, making it difficult to get the correct selector description for the desktop version.
Also, for instance, to change the font size for the available time slot selectors on the calendar, I have to change the definition for every available time slot combination individually. Isn't there a single code I could enter that would change all of them?
Even with the few changes I've made, I already have a CSS code that is quite long. Very kludgy. Surely there is a more elegant solution? I'm not a coder, so I don't know how this is usually done.
Finally, let's say I'm working on a later step in the process. I now want to see the effects of the changes I've made to the CSS code. I have to reload the page, then go through the entire booking process to get to that step.
OK... I've finally gotten the form to look reasonable to my eye. This took many hours of poking around in the inspector and troubleshooting css code. My final code snippet is below. I include it here so you can see how much tweaking I had to do.
I hope you will please pass this on to the development team, along with a heartfelt feature request that you please add the ability to set specific font family, size, color, and weight discretely for every header, label and dropdown.
I have other questions as well, but I'll start another ticket for these.
Here's my css created in WP Code Snippets:
#amelia-container > div > div > div.am-fs__main-heading > span > span { font-size:40px !important; } #amelia-container > div > div > div.am-fs__init.am-fs__main-content > form > div > label > span { font-size: 30px !important; } .am-select-service-name{ font-size: 25px !important; } .am-select-service-price{ font-size: 25px !important; } #amelia-container > div > div > div.am-fs__main-heading.am-fs__main-heading-mobile > span > span{ font-size:30px !important; } #amelia-container > div > div > div.am-fs__main-heading.am-fs__main-heading-mobile > span > button { font-size:40px !important; } #amelia-container > div > div > div.am-fs__main-footer > button > span{ font-size:30px !important; } #amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-fs__bringing > div > div.am-fs__bringing-heading{ font-size:25px !important; } #amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-fs__bringing > div > div.am-fs__bringing-content > span > span.am-fs__bringing-content-text { font-size:25px !important; } #amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div {
--am-c-spb-bgr: rgba(91, 39, 22, 1.0) !important; } #amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-fs__bringing.am-fs__bringing-full-mobile-s > div > div.am-fs__bringing-content > span > span.am-fs__bringing-content-text { font-size:30px !important; } #amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-slide-popup__block-footer > button.am-button.am-button--filled.am-button--default.am-button--secondary > span { font-size:30px !important; } #amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-slide-popup__block-footer > button.am-button.am-button--filled.am-button--default.am-button--primary.is-disabled > span { font-size:30px !important; } #amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-slide-popup__block-footer > button.am-button.am-button--filled.am-button--default.am-button--primary > span { font-size:30px !important; } #amelia-container > div > div > div.am-fs-dt__calendar.am-fs__main-content > div > div > div.am-advsc__slots-wrapper > div.am-advsc__slots-heading {
font-size:30px !important; } #amelia-container > div > div > div.am-fs__main-footer{ font-size:15px !important; } #amelia-container > div > div > div.am-fs-dt__calendar.am-fs__main-content > div > div > div.am-advsc__slots-wrapper > div.am-advsc__slots > div > div { font-size:15px !important; } #amelia-container > div > div > div.am-fs__info.am-fs__main-content > div:nth-child(1) > form > div.el-form-item.is-required.el-form-item--default.am-fs__info-form__item.am-info-first-name > label > span{ font-size:20px !important; } #amelia-container > div > div > div.am-fs__info.am-fs__main-content > div:nth-child(1) > form > div.el-form-item.is-required.el-form-item--default.am-fs__info-form__item.am-info-last-name > label > span{ font-size:20px !important; } #amelia-container > div > div > div.am-fs__info.am-fs__main-content > div:nth-child(1) > form > div.el-form-item.el-form-item--default.am-fs__info-form__item.am-info-email > label > span{ font-size:20px !important; } #amelia-container > div > div > div.am-fs__info.am-fs__main-content > div:nth-child(1) > form > div:nth-child(4) > label > span{ font-size:20px !important; } #amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-heading > span{ font-size:30px !important; } #amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-price > div > div.am-fs__payments > div > div.am-fs__payments-services-info > span { font-size:25px !important; } #amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-price > div > div.am-fs__payments > div > div.am-fs__payments-services-open > div > p:nth-child(1){ font-size:20px !important; } #amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-price > div > div.am-fs__payments-app-info > div > span:nth-child(1){ font-size:25px !important; } #amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-price > div > div.am-fs__payments-app-info > div > span.am-amount{ font-size:25px !important; color: white } #amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-sentence > p{ font-size:20px !important; }
Thanks for sharing your custom code with us. I'm glad to see you were able to configure the form to be visually appealing.
We forwarded your suggestion to our developers, but I can't make any promises in this regard as the Customize section is already cluttered with options, labels, color, and font settings that are, in fact, global and we have a lot of customers complaining that it's too complicated as it is. Adding this for every header, label, drop-down, button, etc. would most likely create even more confusion so, even though I can't say that we will never work on your suggestion, I can say that if it is added to our "to-do" list, it will require a lot of planning and code revisions.
Greetings,
Two questions:
First- I plan to make a service available at a sliding scale price. How do I set this up in Amelia?
Second, I am using a custom font for the step-by-step service booking form, and the font is displaying quite small, but I see no way to control the size. Please see the page referenced above. How may I fix this?
Hello Paul,
Thank you for reaching out to us.
1. The only option is to set up the custom pricing. You can read more about it at the following link.
2. Please try the following CSS for this purpose:
#amelia-container > div > div > div.am-fs__init.am-fs__main-content > form > div > label > span{
font-size: larger !important;
} .am-select-service-name{
font-size: 17px !important;
}
Let me know if that works for you or not.
Kind Regards,
Uros Jovanovic
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi Uroš,
I followed the link, read the instructions and tried the suggested solution. Under "Custom Duration and Pricing" I see no option for creating a sliding scale price for my service. To clarify, I would like to offer a "sliding scale" price, for instance, allowing a client to choose their price within a set range (for instance: $150-$500). How may I do this.
Regarding the font issue: I tried adding the provided css code in the wordpress site at Appearance/Customize/Additional CSS. Result: No change.
I then pasted it in the Nimva Theme settings at Theme Options/Custom CSS. Result: No change.
I then pasted it into the individual page settings for https://coffeeinspiracy.com/booking at Edit Page/Page Settings/Custom CSS settings. Result: No Change. However, when I pasted the code here, the UI presented a warning flag, with the following text: "Don't use adjoining classes.
Element (dif.am-fs__init.am-fs__main-content is overqualified, just use .am-fs__init without elemment name.
Element (dif.am-fs__init.am-fs__main-content is overqualified, just use .am-fs__main-content without elemment name."
The font issue persists, and I also still fail to see a mechanism for creating a sliding scale payment. Please advise.
Hello Paul,
Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways.
If you need help with adding custom CSS to the page, please take a look at this article.
Currently, there is no option to configure a sliding scale price within Amelia. I understand the importance of offering flexible pricing, and while the sliding scale feature isn't available, there is a workaround that might help.
Amelia allows you to create multiple service variations with different prices. You can set up several price points within your desired range (e.g., $150, $250, $350, $450, $500) as separate service options. This way, clients can choose from predefined prices, giving them some flexibility while booking.
Kind Regards,
Uros Jovanovic
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi, Uroš,
I've added the snippet using all of the methods documented in the link you sent - and have just now added the method via the CodeSnippets plugin. The code is still not functioning and the text in the booking from is still tiny.
Please advise.
Also, the method you suggest as a workaround for a true sliding scale price option will not be suitable for this application. Please consider this a feature request.
Thank you!
p
Hello Paul,
Please try the following CSS code:
#amelia-container > div > div > div.am-fs__init.am-fs__main-content > form > div > label > span{
font-size: 25px !important;
} .am-select-service-name{
font-size: 25px !important;
}
Please feel free to search through our feature suggestion page,
to see if someone may have already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like, where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
Kind Regards,
Uros Jovanovic
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thank you for this code change. It is partially working. As it turns out, this css is only modifying the font size in a few places. Others are still unreadably tiny. See attached screenshots. I would like to be able to change the font sizes discretely for different locations, including the button text, the heading, additional step questions (e.g. - Bringing anyone? menu - see screenshot), calendars, etc. I think it would be a simple matter to reuse the same css and replace the relevant sections to correspond to the different locations where fonts are used. Can you provide these details?
Also, see in the second screenshot how a "continue" button is visible behind the "yes" and "no" buttons? I believe this is the continue button from the next step being partially visible because it is set to pre-load behind, but since I've chosen a semi-transparent background, it shows through. How may I correct this, while preserving the background transparency?
Thank you.
Paul
Attached files: Screenshot 2024-07-08 at 9.35.50 PM.png
Screenshot 2024-07-08 at 9.36.10 PM.png
Hello Paul,
Would you like to make each string on the booking form larger?
Let me know and I will provide you with an update on this.
Kind Regards,
Uros Jovanovic
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi, Uroš
What I'd like to be able to do is discretely change the font sizes of any part of the form -make some bigger and other's smaller at will via the Gui or via CSS. Ideally, I'd also like to be able to choose fonts/sizes/colors for, say, all headers sub headers, body paragraphs, buttons, etc, as a group. For now, just getting the CSS codes for each text element in the GUI should suffice.
p
Hello Paul,
Thank you for clearing that up.
Instead of me providing you with each code as it is really time-consuming, I can show you how to find each seletor, if that is fine with you.
Please check the following video on this.
Kind Regards,
Uros Jovanovic
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi, Uroš
Thank you for this method and for the video. You've shown me a useful tool.
Technically, this method "works". I can, in fact, change the font size for every single element. This is very cool!
However, the method is much too complicated and tedious. For instance, often bringing up the inspector causes the window to resize, and all of the selector elements switch to "mobile" or "full-mobile" versions, making it difficult to get the correct selector description for the desktop version.
Also, for instance, to change the font size for the available time slot selectors on the calendar, I have to change the definition for every available time slot combination individually. Isn't there a single code I could enter that would change all of them?
Even with the few changes I've made, I already have a CSS code that is quite long. Very kludgy. Surely there is a more elegant solution? I'm not a coder, so I don't know how this is usually done.
Finally, let's say I'm working on a later step in the process. I now want to see the effects of the changes I've made to the CSS code. I have to reload the page, then go through the entire booking process to get to that step.
Frustrating!
Any advice?
Hello Paul,
Thank you for your feedback on this.
Here is the CSS for this purpose:
.fc-daygrid-day *{font-size: 30px !important;
}
Please let me know if that works for you or not.
Kind Regards,
Uros Jovanovic
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
HI, Uroš
OK... I've finally gotten the form to look reasonable to my eye. This took many hours of poking around in the inspector and troubleshooting css code. My final code snippet is below. I include it here so you can see how much tweaking I had to do.
You can see the results here: https://coffeeinspiracy.com/booking/
I hope you will please pass this on to the development team, along with a heartfelt feature request that you please add the ability to set specific font family, size, color, and weight discretely for every header, label and dropdown.
I have other questions as well, but I'll start another ticket for these.
Here's my css created in WP Code Snippets:
#amelia-container > div > div > div.am-fs__main-heading > span > span {
font-size:40px !important;
}
#amelia-container > div > div > div.am-fs__init.am-fs__main-content > form > div > label > span {
font-size: 30px !important;
}
.am-select-service-name{
font-size: 25px !important;
}
.am-select-service-price{
font-size: 25px !important;
}
#amelia-container > div > div > div.am-fs__main-heading.am-fs__main-heading-mobile > span > span{
font-size:30px !important;
}
#amelia-container > div > div > div.am-fs__main-heading.am-fs__main-heading-mobile > span > button {
font-size:40px !important;
}
#amelia-container > div > div > div.am-fs__main-footer > button > span{
font-size:30px !important;
}
#amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-fs__bringing > div > div.am-fs__bringing-heading{
font-size:25px !important;
}
#amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-fs__bringing > div > div.am-fs__bringing-content > span > span.am-fs__bringing-content-text {
font-size:25px !important;
}
#amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div {
--am-c-spb-bgr: rgba(91, 39, 22, 1.0) !important;
}
#amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-fs__bringing.am-fs__bringing-full-mobile-s > div > div.am-fs__bringing-content > span > span.am-fs__bringing-content-text {
font-size:30px !important;
}
#amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-slide-popup__block-footer > button.am-button.am-button--filled.am-button--default.am-button--secondary > span {
font-size:30px !important;
}
#amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-slide-popup__block-footer > button.am-button.am-button--filled.am-button--default.am-button--primary.is-disabled > span {
font-size:30px !important;
}
#amelia-container > div > div > div.am-fs__init.am-fs__main-content.am-oxvisible > div > div > div.am-slide-popup__block-footer > button.am-button.am-button--filled.am-button--default.am-button--primary > span {
font-size:30px !important;
}
#amelia-container > div > div > div.am-fs-dt__calendar.am-fs__main-content > div > div > div.am-advsc__slots-wrapper > div.am-advsc__slots-heading {
font-size:30px !important;
}
#amelia-container > div > div > div.am-fs__main-footer{
font-size:15px !important;
}
#amelia-container > div > div > div.am-fs-dt__calendar.am-fs__main-content > div > div > div.am-advsc__slots-wrapper > div.am-advsc__slots > div > div
{
font-size:15px !important;
}
#amelia-container > div > div > div.am-fs__info.am-fs__main-content > div:nth-child(1) > form > div.el-form-item.is-required.el-form-item--default.am-fs__info-form__item.am-info-first-name > label > span{
font-size:20px !important;
}
#amelia-container > div > div > div.am-fs__info.am-fs__main-content > div:nth-child(1) > form > div.el-form-item.is-required.el-form-item--default.am-fs__info-form__item.am-info-last-name > label > span{
font-size:20px !important;
}
#amelia-container > div > div > div.am-fs__info.am-fs__main-content > div:nth-child(1) > form > div.el-form-item.el-form-item--default.am-fs__info-form__item.am-info-email > label > span{
font-size:20px !important;
}
#amelia-container > div > div > div.am-fs__info.am-fs__main-content > div:nth-child(1) > form > div:nth-child(4) > label > span{
font-size:20px !important;
}
#amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-heading > span{
font-size:30px !important;
}
#amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-price > div > div.am-fs__payments > div > div.am-fs__payments-services-info > span {
font-size:25px !important;
}
#amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-price > div > div.am-fs__payments > div > div.am-fs__payments-services-open > div > p:nth-child(1){
font-size:20px !important;
}
#amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-price > div > div.am-fs__payments-app-info > div > span:nth-child(1){
font-size:25px !important;
}
#amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-price > div > div.am-fs__payments-app-info > div > span.am-amount{
font-size:25px !important;
color: white
}
#amelia-container > div > div > div.am-fs__main-content > div.am-fs__payments > div.am-fs__payments-sentence > p{
font-size:20px !important;
}
Hello Paul.
Uros is out of the office, so I'll jump in.
Thanks for sharing your custom code with us. I'm glad to see you were able to configure the form to be visually appealing.
We forwarded your suggestion to our developers, but I can't make any promises in this regard as the Customize section is already cluttered with options, labels, color, and font settings that are, in fact, global and we have a lot of customers complaining that it's too complicated as it is. Adding this for every header, label, drop-down, button, etc. would most likely create even more confusion so, even though I can't say that we will never work on your suggestion, I can say that if it is added to our "to-do" list, it will require a lot of planning and code revisions.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables