Payments: Add a divider in the product listing.

  • trystoneso
    Asked on October 22, 2018 at 2:26 PM

    Is it possible to add a border/divider in this payment method? I need to add some sort of border underneath "Tendril Pea Organic." There is a difference in these products and I need them to be separated. 


    thanks,


     1540232664Screenshot (8) Screenshot 10

  • arthurprc
    Replied on October 22, 2018 at 4:06 PM

    I've checked that the payment widget does not accept a divider in the middle of the payment element.

    1540238600divider2 Screenshot 10

    It would be possible to put a divider between two payment elements, however, you can only have one payment field per form.

    1540238749divider1 Screenshot 21

    We'll open a feature request for our developers to update this feature and allow dividers in payment elements, however, it would not be possible to define an ETA for this update.

    Let us know if you need further assistance, we'll be happy to help!

  • trystoneso
    Replied on October 22, 2018 at 4:27 PM

    Is there a way we can add a boarder with CSS code? for example adding a bottom boarder to "Tendril pea organic?" I know they were able to figure out custom CSS on each item, thats how we removed the "free" symbol. 

  • arthurprc
    Replied on October 22, 2018 at 5:26 PM

    In order to add a bottom border with CSS in your specific product fields, open the Advanced Designer:

    1540243372advanceddesigner Screenshot 10

    Then, do a double click on the product fields and add the Border-bottom CSS property in the specific field (all boxes contains a red line below in my example because it seems to not be possible to select these specific boxes, though it would be possible to select some specific fields as in the example)

            border-bottom: 5px solid red;

    1540243535bottonborder Screenshot 21

    In case it doesn't look clear by dividing with only one border, you could try to put colors in all boxes, dividing the categories by different colors.

    Let us know if you need further assistance.