Display fields overlap and error on checkout page

  • Posts: 63
  • Thank you received: 1
  • Hikashop Essential
2 years 3 months ago #343696

-- url of the page with the problem -- : www.catholicsforisrael.com/bible-course/shop/checkout
-- HikaShop version -- : 4.6.1
-- Joomla version -- : 3.10.10

I've got two problems with my Hikashop checkout page:

1) The fields overlap, resulting in a messy appearance.



It seems that the problem is due to the dynamic width of the checkout page. I have noticed that if I make the page narrower, the Login section appears above the Registration section, rather than side-by-side. How can I force the two sections to be displayed above each other rather than side-by-side, like this:



2) Trying to log in or register from the Hikashop checkout screen produces errors:



Grateful for any tips on how to solve those two issues!

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
2 years 3 months ago #343703

Hello,

"1) The fields overlap, resulting in a messy appearance."
You can add this kind of css commands in your frontend file css, see how here .

#checkout_ID_html_class .login_class_part, 
#checkout_ID_html_class .registration_class_part {
    width: 100%;
}

"2) Trying to log in or register from the Hikashop checkout screen produces errors:"

In order to help us, 2 things you can do :
1. Process a test with a default template like protoStar, and make us your returns, even if that change nothing
2. Active the Joomla debug (maximum level) process a new test, and provide the screenshot with all new displayed data around your error.

Awaiting your elements for your second point.
Regards

Last edit: 2 years 3 months ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 63
  • Thank you received: 1
  • Hikashop Essential
2 years 3 months ago #343718

Thanks for your quick reply, Philip. Some issues on the two points:

1) I followed the instructions on the first point, but I'm unable to save the frontend_custom.css file. I get an "internal server error". Is this the file you meant? Not the style_custom.css file? That one saves fine.

2) As for your second point, I'm not sure I understand. What do you mean by "process a test" and "make us your returns"? Switch to a default template and make a test Hikashop purchase?

Thanks for any continued help!

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 3 months ago #343722

Hi,

1. You can add it to style_custom.css file either one is fine.

2. Activate the "debug" setting of the Joomla configuration page and reproduce the issue with that "getType" error. It will display the error message with more information on where the problem comes from.
Please provide all the information of the error so that we can understand what's going on and tell you what to do.

Please Log in or Create an account to join the conversation.

  • Posts: 63
  • Thank you received: 1
  • Hikashop Essential
2 years 3 months ago #343734

Hi Nicolas,

Thanks for the continued help. Update:

1)

#checkout_ID_html_class .login_class_part, 
#checkout_ID_html_class .registration_class_part {
    width: 100%;
}

I inserted the code Philippe suggested into the file style_custom.css but it didn't do anything. The fields continue to overlap as illustrated on the first screenshot above. As mentioned, I'm unable to modify or save the frontend_custom.css file. I get an "internal server error".

2) Regarding the error message on the checkout screen, I did turn on the debugging and was able to identify an extension that conflicted with Hikashop. I disabled the extension and it seems like the error is gone. So I think this is resolved. I will update if the problem returns.

Thanks again,

Andre

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 3 months ago #343741

Hi,

You need to adapt the CSS. Philippe only provided an example but really the checkout_ID_html_class and login_class_part and registration_class_part need to be replaced with the corresponding ID and classes by looking at the HTML elements with the inspector of your browser.
You can't just copy/paste the code "as is".

So I looked into it in your stead and the CSS code should be in your case:

.hikashop_checkout_login .hkc-lg-4, 
.hikashop_checkout_login .hkc-lg-8{
    width: 100%;
}

The following user(s) said Thank You: jazzbird

Please Log in or Create an account to join the conversation.

  • Posts: 63
  • Thank you received: 1
  • Hikashop Essential
2 years 3 months ago #343743

It looks like that code worked. Thanks very much!

Please Log in or Create an account to join the conversation.

Time to create page: 0.065 seconds
Powered by Kunena Forum