Messy Product Detail page

  • Posts: 77
  • Thank you received: 10
  • Hikaserial Standard Hikashop Business
4 years 3 months ago #326305

-- HikaShop version -- : 4.3.0
-- Joomla version -- : 3.9.22
-- PHP version -- : 7.3

Hi Hika Team,

I have a problem with the layout of the product detail page.
With charachteristis and custom fields it looks messy because the fields are not aligned right.
Please see attachments and numbers.

1] In att. 001 the part with the purple border is a characteristic with variants. I would like to have the label above the options. I tried to do it myself in show_block_characteristics view because I saw both parts are in a <tr> line. So I tried to put it on two different lines with separate table cells but it's not a regular table. Everything is php code and I got syntax errors with everything I tried.

a]The orange text is a custom text field with an empty language string as a label.
b]The other two are custom fields also and they are not aligned right.
c]Also the quantity input and the add to cart button are not aligned well. I can not align this with CSS because it will be applied to product listings also and in that case it will be not right aligned there.
d] And the asterix for the required field looks very strange at the bottom. In my opinion this has to be on top of the value field.

2] So on the second part I tried to make all the labels empty language strings.
Still have the asterix underneath the value field and the quantity/add to cart are not aligned well, but I could have lived with that.
At least all the fields are nicely aligned this way.

3] But as you can see when I hide the labels by making empty language strings the labels are also hidden in the cart.
So that's not an option either.

What I would like very much is something like in attachment 002 but I almost tried every trick in the book but I can achieve this.

The way it is now it also does not look good on mobile devices, see att. 003.

Normally I have no problems with tweaking this with CSS or in the views but I can't wrap my head around this.
So any help or hints are welcome.

Thank you very much in advance

Attachments:
Last edit: 4 years 3 months ago by HSD.

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

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
4 years 3 months ago #326313

Hello,

I'm quite sure that you can do this via Custom Css, so as a start have a look on this tutorial to see how to add some custom Css.

More in details now, you have use the Css commande : "display: block" on your td element from their container (via their html class)
Like on this example :

.container_html_class td {
    display: block;
}

For the required asterisk, that will be more complicated, but a little more DIY as a way of things, but you can use the command position, like on this example :
.asterisk_html_class {
    position: relative;
    top: -45px;
}

For your button "add to cart" you have to override the margin command, with a more priority css command, like this :
.product_page_class .add_to_cart_class {
    margin: 0px !important;
}

Hope this will help you to achieved what you need.
Regards

Last edit: 4 years 3 months ago by Philip.
The following user(s) said Thank You: HSD

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

  • Posts: 77
  • Thank you received: 10
  • Hikaserial Standard Hikashop Business
4 years 3 months ago #326359

Thank you so much Philip!

It was not exactly what you said but you pointed me in the right direction.
I love it how it looks now.

The following user(s) said Thank You: Philip

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

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
4 years 3 months ago #326362

Hello,

Always happy to be useful ! Thanks for this nice return !
If you want help us, leave a comment about our work, here on the Joomla Extension Directory.

Regards

Last edit: 4 years 3 months ago by Philip.

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

Time to create page: 0.060 seconds
Powered by Kunena Forum