More prominent buttons

  • Posts: 97
  • Thank you received: 8
  • Hikamarket Frontedition Hikashop Business
2 days 10 hours ago #372826

-- url of the page with the problem -- : safetyzonespecialists.com/checkout/checkout
-- HikaShop version -- : 6.5.2
-- Joomla version -- : 5.4.7
-- PHP version -- : 8.2.31
-- Browser(s) name and version -- : Firefox 152
-- Error-message(debug-mod must be tuned on) -- : none

Hey Nic,

A small improvement suggestion.

Had two customers on the same day with the same checkout problem.

Both were guest checkouts.

They missed the OK button at the bottom of the address entry form. Tried to submit their orders without a payment or shipping method leading to confusion and customer support involvement.

I've updated to a more prominent button and added a message on both the guest checkout and address edit pages. (see attached)

Though you might want to do so in a future release as weil.

Thanks for all you do,

Cheers

Dave

Attachments:

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

  • Posts: 85952
  • Thank you received: 14140
  • MODERATOR
1 day 20 hours ago #372833

Hey Dave,

Good catch, and thanks for the detailed report. You are right that the address confirmation button did not stand out enough. Looking at it, the "OK" button that validates the address form was using the plain button style, the same one as the "Cancel" button next to it, while the other main buttons of the checkout (the "Next" button, and the "Add a new address" button) already use our highlighted "success" style. So the one button a guest really needs to click was the least visible of the group.

We have changed that for a future release: the address "OK" button now gets the same highlighted style as the other main buttons, so it stands out as the main action of that step.

If you want the exact same thing right now, two ways:

1) The quick, no override way, add a bit of CSS in your template. The button always has the class hikashop_checkout_address_ok_button, so you can target it directly:

.hikashop_checkout_address_ok_button {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
    font-size: 1.1em;
    padding: 10px 22px;
}
.hikashop_checkout_address_ok_button:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

2) The same class we are adding by default, via a view override. In the HikaShop back-end go to Display, then Views, edit the "checkout / show_block_address" view, find the OK button and add the hikabtn-success class to it:
class="<?php echo $this->config->get('css_button','hikabtn'); ?> hikabtn-success hikashop_checkout_address_ok_button"

With that class the button automatically inherits HikaShop's highlighted button style, no extra CSS needed. From there you can still fine tune it with the CSS above if you want your own colors.

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

Time to create page: 0.054 seconds
Powered by Kunena Forum