Use login/register/next buttons on checkout page

Hi Nicolas,

One of the last things I'm trying to do on my website is turn the words 'login', 'register' and 'next' on the checkout page into buttons similar to the ones I have for 'add to cart' on the product pages. I've tried doing this via css, but that was unsuccessful, so am now trying to do via the language file. However, I am encountering a few issues and need some help.

In the language file I added the image source like this:

HIKA_LOGIN="Login<img src='../idesigntest/images/login.jpg'/>"

But then I get the image next to the title of the login box well, please see attached screenshot. How can I make it appear only where folk click to login and then also make it a different image on hover?

I want to do the same thing for 'register' and 'next' also with on:hover images. If you can give me some advice on how to achieve this in Hikashop, I would be most grateful.

Thank you very much,
Johanna

You can do that, but in that case, you will have to change the "button style" option to "CSS" instead of "Normal" in the Display tab of the configuration.

Hi Nicolas,

Thank you for your reply, but I already have 'css' set in the 'display' of the configuration because I use css buttons to display 'add to cart' on the product pages.

Any other way of doing this?

Thank you!

Then why not just just CSS to replace your buttons by images like we did on our demo website ?

Hi Nicolas,

I've been trying that, but the class for the 'login', 'register' and 'next' text is hikashop_cart_button, just like the 'add to cart' button which I have. I need to add further css I realize, but am stuck with that. Can you please give me some pointers? Sorry for being a bit dim and wasting your time on something which is probably quite simple for you.

Thank you!

for the login button, you can use such CSS:
.hikashop_checkout_login_left_part .button{
background-image: url(' mywebsite.com/myimage.png ');
}

for the register button, you can use such CSS:
.hikashop_checkout_login_right_part .button{
background-image: url(' mywebsite.com/myimage.png ');
}

for the next button, you can use such CSS:
#hikashop_checkout_next_button{
background-image: url(' mywebsite.com/myimage.png ');
}

Hi Nicolas, I used the code you wrote but my login/register/next buttons are still the same with my add to cart buttons.

mysite: gifter.ro

Thank you!

Hi,

You are not using the same kind of buttons.
Use ".hikashop_cart_button" instead of ".button" in the CSS.

Regards,