Display custom fields readonly last checkout page

-- HikaShop version -- : 2.4.0
-- Joomla version -- : 3.4.1

Hi there,

I've created a number of custom fields (order) which needs to filled in. On the last page of my checkout process I would like to show these fields ass readonly in order to have a final check. Can this be done and how?
Thanks in advance.

Kind regards, Hans

Hello,
I didn't totally understood what you wanted to do so can you give me more information about it so that I can understand it and help you ?
Also, note that if you want to change the order of your fields using the "Order" column of the "Hikashop->Display->Custom fields".
Thanks .

Hi,

Please see attached screen. It's the order form, in Dutch. On top you have custom fields (and more above), billing address and so on. And a payment button. Instead of going to the payment directly, my next checkout step needs to be an overview of all order details, which then can be checked. If something is wrong, they can go back to the previous step. However, these custom fields need to be displayed as plain text, not as fill out form fields.

Hi,

You could potentially do that thanks to some css properties, for example if the last step is the step 2 you could use css like:

.hikashop_checkout_page_step2 input{
     -webkit-user-select: none !important;
     -moz-user-select: none !important;
     -ms-user-select: none !important;
     -o-user-select: none !important;
     user-select: none !important;
    border: 0 !important;
    outline: none !important;
}

Hi,

Thanks for your e-mail. This might work, however, some field types are still editable, like dropdown fields, text area, datepicker...
Do I have tot extend the css? And can you please tell me how to do it?
Thanks.

Kind regards, Hans

Hi,

You can potentially extend the css thanks to this code:

.hikashop_checkout_page_step2 input, .hikashop_checkout_page_step2 select, .hikashop_checkout_page_step2 textarea{
     -webkit-user-select: none !important;
     -moz-user-select: none !important;
     -ms-user-select: none !important;
     -o-user-select: none !important;
     user-select: none !important;
    border: 0 !important;
    outline: none !important;
    pointer-events: none;
    cursor: default;
}