Okay
  Public Ticket #3717837
Changing Amelia's size or Adding a step during booking (first category then service)
Closed

Comments

  • Michał started the conversation

    1. Our cosmetic services have very long names in Polish, which makes it difficult to choose a service during the booking process. The simplest solution is to enlarge Amelia so that the categories and services are visible in their entirety (even hovering the mouse does not show the entire name). The second solution could be to rebuild the step-by-step system - first we select the category (using the entire width of the window), and only then the service (again in the entire window, not half).

    2. Is there an option to add another booking (another service) in the first step? The customer selects the services and then selects the dates and times? In our case, this only appears in step 3, and the list of proposed services includes one random service from the same category. How can I increase the number of these services on the list?

    Attached files:  Screenshot_2.jpg
      Screenshot_3.jpg

  •  1,564
    Marko replied

    Hello there,

    Thank you for reaching out to us.

    1. Our support does not fully provide customization solutions, but we can try to provide some basic CSS in situations like this.

    For manipulating the width of the "outer Booking container", you can try this CSS:

    .amelia-v2-booking #amelia-container.am-fs__wrapper {    max-width: 1200px !important;    width: 100%;    height: 560px;    margin: 99px auto;    border-radius: 8px;    box-shadow: 0 30px 40px #0000001f;
    }

    For example, on our Demo page, if I add that CSS, the outer container expands like this :

    3146601994.png

    Just the background color we set is transparent, so it is not very visible on our page,

     but that width can be changed like that.

    -

    Now, if you also wish to manipulate this "inner Booking container width", you can use this CSS selector :

    .amelia-v2-booking #amelia-container .am-fs__main {        max-width: 1200px;    width: 100%;
    }

    If I add that to our Demo, here is the result :

    5856364923.png

    As you see, we have successfully changed the width this way.

    The main property to edit is "max-width" with a fixed pixel value.

    Let us know if that works for you.smile.png

    -

    If you wish to see a built-in solution for users to choose the Booking Form width from Amelia's Customize interface, 

    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.

    This should help. 

    2. This is not possible I'm afraid. This option can only show in this particular step and this an not be changed Im afraid.

    Should you have any further inquiries, we kindly request that you open separate tickets for each question and we will gladly help you there.

    We wish you all the best and hope you have a wonderful day ahead. 

    Kind Regards, 

    Marko Davidovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  • Michał replied

    Hey!

    If it worked like in your screenshot it would be much better - but for me only the first part of the code causes the effect (the transparent window is enlarged). The second code does nothing. Changing max-width to 1500-2000, does nothing. Do these codes have to be used together? Will widening the inner container not work without widening the outer container?

    Attached files:  Screenshot_5.jpg

  •  1,564
    Marko replied

    Hello again,

    Please send us the URL of the page so that we can take a closer look. 

    We wish you all the best and hope you have a wonderful day ahead. 

    Kind Regards, 

    Marko Davidovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  • Michał replied

    beautystreet.pl -> I turned off maintenance mode so you could take a look.

  •  1,564
    Marko replied

    Hello again,

    We added this CSS that we have sent you and it is working

    2505961405.png

    Perhaps you did not add it properly.

    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.

    If you need help with adding custom JS to the page, please take a look at this article.

    We wish you all the best and hope you have a wonderful day ahead. 

    Kind Regards, 

    Marko Davidovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  • Michał replied

    As per your help I added via Custom CSS in Astra theme. If the place was wrong - why does the first code work and the second one doesn't?

  •  1,564
    Marko replied

    Hello again,

    Our support does not fully provide customization solutions.

    We have sent you the only custom solution that we have and you can see that they do work on your page. You need to add it directly to that page. 

    Should you have any further inquiries, we kindly request that you open separate tickets for each question and we will gladly help you there.

    We wish you all the best and hope you have a wonderful day ahead. 


    Kind Regards, 

    Marko Davidovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  • Michał replied

    I will change your code and works now "!important;" change everything.

  • Michał replied

    It would be useful to increase this internal height to avoid scrolling down the list of categories and services. Can this be done?

    Attached files:  Screenshot_6.jpg

  •  1,564
    Marko replied


    Helloo again,

    When you have several questions or issues please open a new ticket, and we will help you there. In that way, issues and questions that are related to different subjects will be in separate tickets so other customers or our support agents can find them easily. 

    Our policy is to have one issue or question per ticket because of the reasons that are described already.

    Thank you for understanding. 

    Also as mentioned our support does not fully provide customization solutions. All option that are available you can find in customize section.

    Perhaps you can expand our booking so that you do not need to scroll down using this custom CSS

    .amelia-v2-booking #amelia-container.am-fs__wrapper {
        height: 700px !important;
    }
    .amelia-v2-booking #amelia-container .am-fs__main-content {
        height: 584px !important;
    }

    You can expand it per your needs.

    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.

    If you need help with adding custom JS to the page, please take a look at this article

    Hope it helps in case it does not we encourage you to kindly consider submitting this valuable suggestion as a feature request through the following link: https://features.wpamelia.com/. The prioritization of feature development is greatly influenced by the number of customer requests received. By participating and expressing your support, you contribute significantly to the potential expedited implementation of this feature.

    Should you have any further inquiries, we kindly request that you open separate tickets for each question and we will gladly help you there.

    We wish you all the best and hope you have a wonderful day ahead. 

    Kind Regards, 

    Marko Davidovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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