Variant display different from product display

  • Posts: 2
  • Thank you received: 0
4 years 10 months ago #318068

-- url of the page with the problem -- : latelierdesyovettes.fr/creations-perso/p...00-tote-bag-full-wax
-- HikaShop version -- : 4.3.0
-- Joomla version -- : 3.9.18
-- PHP version -- : 7.3.16
-- Browser(s) name and version -- : Chrome 78.0.3904.87

Greetings !
I have a problem of display for my variants on the product page.
As soon as i select a variant of a product, the display of images changes.
For the product the images are displayed in lines (several lines if necessary)
but for the variants of same product, images are displayed in one column only.
i checked many options but cannot find out where the issue comes from.

In the general configuration, "Layout on product page" is defined as "Default", and then in my product it's all "Inherited"

Please check on this example below, select any variant and you'll see the change of display for pictures :
https://latelierdesyovettes.fr/creations-perso/product/400-tote-bag-full-wax

Any idea on what to modify and where ?

Many thanks for the support,
Cheers,
Steven

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

  • Posts: 83409
  • Thank you received: 13502
  • MODERATOR
4 years 10 months ago #318077

Hi,

In the CSS of your template (in the file template.css of the template), you have CSS specific to this area but that CSS is only valid for the default thumbnails, not the other variants thumbnails.
This CSS code :

.hikashop_product_page .hk-row-fluid #hikashop_product_left_part #hikashop_small_image_div a {
    display: inline-block;
    margin: 0 5px;
    padding: 0 5px;
    border: 1px solid rgba(0,0,0,0.8);
}
should be:
.hikashop_product_page .hk-row-fluid #hikashop_product_left_part .hikashop_small_image_div a {
    display: inline-block;
    margin: 0 5px;
    padding: 0 5px;
    border: 1px solid rgba(0,0,0,0.8);
}
and this CSS code:
.hikashop_product_page .hk-row-fluid #hikashop_product_left_part #hikashop_small_image_div a img.hikashop_child_image {
    height: 100px;
}
should be:
.hikashop_product_page .hk-row-fluid #hikashop_product_left_part .hikashop_small_image_div a img.hikashop_child_image {
    height: 100px;
}
I would recommend you to contact the support of your template provider to notify them of the problem so that they can provide the appropriate patch.

The following user(s) said Thank You: steven_F

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

  • Posts: 2
  • Thank you received: 0
4 years 10 months ago #318094

Thanks a lot, i implemented the changes in my custom.css file and it works perfectly !

I'll write to the template provider as you suggested.

Thanks again for the fast and efficient support,
Steven

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

Time to create page: 0.061 seconds
Powered by Kunena Forum