How to move the currency to the right side of the product's price

  • COORPO
    Demandé le 9 juillet 2023 à 08:13

    Bonjour,


    Je rencontre un problème sur mon formulaire de commande : le symbole € est positionné à gauche au lieu d'être à droite. Pouvez-vous me fournir un code CSS pour résoudre ce problème ?


    Il y a également un problème de traduction : le texte "sous-total" ne se traduit pas une fois intégré sur la page de mon site. Pourtant, lorsque je teste le visuel sur Jotform, la traduction fonctionne correctement. Avez-vous un moyen de forcer la traduction ou pouvez-vous m'indiquer la source du problème ?

    Merci

    Jotform Thread 5311099 Screenshot
  • Billy Jotform Support
    Répondu le 9 juillet 2023 à 19:55

    Hi COORPO,

    Thank you for reaching out to Jotform Support. Our French support is currently not available so we'll respond to you in English but if you prefer to receive assistance in your native language, let us know.

    According to my translator, you want to move the currency to the right side of the product's price. That requires CSS code so allow me some time to work on it. I'll reach out again as soon as I have an update.

    We appreciate your patience and understanding.

  • COORPO
    Répondu le 9 juillet 2023 à 22:38

    All right, thanks. I'll be waiting for your reply.


    I would like to move the € symbol.


    I'm also asking you to solve the problem of translating the subtotal because on my site the text is in English? What could be the problem? I'd like it to be in French ;)
  • Billy Jotform Support
    Répondu le 11 juillet 2023 à 00:29

    Hi COORPO,

    Thanks for patiently waiting. I have the CSS code ready. It's easy to inject into the form, let me show you how:

    1. Open the form in Form Builder
    2. Click on the roller-paint icon (Form Designer) located in the upper right corner
    3. Click on the Styles tab
    4. In the Inject Custom CSS section, insert/paste the code below and click on Save
    /* Change the color of the "$" to white. The actual price will also be black so additional CSS code is required */
    .form-product-item-detail .form-product-container .form-product-details > b > span, .form-payment-price> span {
      color: #fff !important;
    }
    /* Change the color of the actual price to black */
    .form-product-item-detail .form-product-container .form-product-details > b > span > span, .form-payment-price> span > span {
      color: #000 !important;
    }
    /* Create the "$" and append it to the actual price */
    .form-product-item-detail .form-product-container .form-product-details > b > span > span:after, .form-payment-price> span > span:after {
      content: "€";
      margin-left: 4px;
    }

    You may check this sample form.

    Your concern about translating the subtotal was moved and will be answered shortly. You can find it here.

    Reach out again if you need any other help.

  • COORPO
    Répondu le 11 juillet 2023 à 05:00

    Thank you, how can I do the same for the subtotal? 

    In order to move the € to the right of the subtotal price.


    I await your return ;)

  • Olivia Jotform Support
    Répondu le 11 juillet 2023 à 07:34

    Hi COORPO,

    Thanks for getting back to us. You can move the currency symbol in subtotal to the right also with CSS Code. You'll just need to add the code below:

    span.form-product-item .form-product-container [data-wrapper-react=true] {
    flex-direction: row-reverse;
    display: flex;
    }

    Give it a try and let us know if you need any other help.