Add to cart button alignment

  • Posts: 50
  • Thank you received: 0
4 years 3 weeks ago #329863

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.24
-- PHP version -- : 7.4
-- Browser(s) name and version -- : Firefox 85.0.1

Hi,
How can i align the add to cart button as show on the attached screenshot.
Height consistency is already activated but as product titles have varying lengths it causes some issues.
I would like the button at a fix space from the bottom of the cell.
Thanks in advance

Attachments:

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

  • Posts: 83404
  • Thank you received: 13498
  • MODERATOR
4 years 3 weeks ago #329882

Hi,

You can do it by adding custom CSS.
For example:
stackoverflow.com/questions/585945/how-t...-a-div-to-the-bottom
A good start:

.hikashop_container {
    position: relative;
}
.hikashop_container a.hikacart {
    position: absolute;
    bottom: 0;
}
www.hikashop.com/support/documentation/1...ize-the-display.html

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

  • Posts: 50
  • Thank you received: 0
4 years 3 weeks ago #329897

Thanks Nicolas, a good start effectively.
The button goes down with the provided CSS but i'd like to keep it 2 or 3 px from the bottom.
However, the button now is totally off center and even out of the container (See enclosed)
I turn around to see if i can find the right part to edit but have no success.
I'll appreciate if you can help me again on that
Thanks in advance

Attachments:

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

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
4 years 3 weeks ago #329902

Hello,

The most simple way, will be to add some left command, AND adjust the bottom value like this :

.hikashop_container a.hikacart {
    position: absolute;
    bottom: 10px;
    left: 75px;
}

Where "bottom: 10px;" & "left: 75px;" are value exemple, you will have I guess to adapt this value to fit your needs.
Hope this will help you to solve this.

Regards

Last edit: 4 years 3 weeks ago by Philip.

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

  • Posts: 50
  • Thank you received: 0
4 years 3 weeks ago #329963

Thanks Mohamed, i adjust the values and yes it works great, the "add to cart" buttons are aligned and now centered within the cells.
However, in some cases, the product code & the qty available are covered by the add to cart button (see enclosed)
I try to edit the product "name" with a very long title, it works to a certain extend as all the cells on the same page expends accordingly, but this means that in every pages at least 1 cell still looks weird in order for all others to look ok.
So is there a way to push down the add to cart buttons and expend the cells accordingly?
Is there a way to determine a specific height for the cells (3 columns layout) instead of variable?
Thanks in advance

Attachments:

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

  • Posts: 83404
  • Thank you received: 13498
  • MODERATOR
4 years 2 weeks ago #329965

Hi,

Yes. You just need to increase the height of the div of the cell.
For example, with such CSS:

.hikashop_subcontainer{
    height: 500px;
}

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

  • Posts: 50
  • Thank you received: 0
4 years 2 weeks ago #329979

Thanks Nicolas, it works like a charm!!!

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

Time to create page: 0.068 seconds
Powered by Kunena Forum