Skip to main content

Hikashop - Product Page Image Carousel

4 months 2 weeks ago #372286 by nmacri
-- HikaShop version -- : 6.5.0
-- Joomla version -- : 5.4.3

Hello

I'd like to know if there's a setting to change how the navigation buttons are displayed in the Hikashop product page image carousel. I'm currently using the product tab view.

Thanks!

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

4 months 2 weeks ago #372288 by nicolas
Hello,

There is a related setting in Configuration > Display: "Thumbnails slider for product page" (No / Mobile only / Always). It changes how the image navigation is laid out, but it will not change the buttons you are seeing.

The real cause is on the template/CSS side, not a HikaShop option. On your product page the previous/next buttons show the words "Anterior" and "Siguiente" in orange over the image. HikaShop's arrows are just FontAwesome chevrons, and each one also contains a screen-reader-only label wrapped in the standard Joomla class element-invisible, which is supposed to hide that text visually. Your template does not define element-invisible anywhere, so the label becomes visible. I checked your page and there is no element-invisible rule in any of your stylesheets.

Add this to your template's custom CSS:
Code:
.element-invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

I tested it on your page: the text disappears and only the chevron arrows remain.

To go further and change the arrows themselves (color, size, position), target the classes hikashop_slide_prev and hikashop_slide_next in your CSS.
The following user(s) said Thank You: nmacri

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

4 months 2 weeks ago #372294 by nmacri
Thanks!

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

Time to create page: 0.055 seconds
Powered by Kunena Forum