Next/Previous buttons image

verzevoul
Topic Author
Offline

6 months 2 weeks ago #371701 by verzevoul

Next/Previous buttons image was created by verzevoul

-- HikaShop version -- : 6.4.1
-- Joomla version -- : 5.4.5
-- PHP version -- : 8.3

Hi!

I want to change the arrow icons of the product's Next/Previous buttons and replace them with custom images.
Is there an HTML somewhere or can i do it with CSS?

Thank you

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

nicolas
Away

6 months 2 weeks ago #371702 by nicolas

Replied by nicolas on topic Next/Previous buttons image

Hello,

The arrow icons are produced by Font Awesome inside the Previous / Next blocks of front/views/product/tmpl/show.php (lines 37 and 47), wrapped in `.hikashop_previous_product` and `.hikashop_next_product` divs. You can replace them either with CSS only (no override).

Add this to your HikaShop custom CSS via Components > HikaShop > Configuration > tab "Display" > "Custom CSS", or to your template CSS:

Code:

.hikashop_previous_product .fa-caret-left,
.hikashop_next_product .fa-caret-right {
    display: none;
}
.hikashop_previous_product::before {
    content: url('/images/my-prev-arrow.png');
    display: inline-block;
}
.hikashop_next_product::before {
    content: url('/images/my-next-arrow.png');
    display: inline-block;
}

Replace the two image paths with your own files. The default Font Awesome arrows are hidden and replaced by your custom images.

Template override option. If you prefer to edit the markup directly, copy front/views/product/tmpl/show.php to templates/YOUR_TEMPLATE/html/com_hikashop/product/show.php and replace the two `<i class="fas fa-caret-left fa-2x"></i>` / `<i class="fas fa-caret-right fa-2x"></i>` lines with your own `<img src="...">` tags. The override survives HikaShop updates.

The following user(s) said Thank You: verzevoul

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

Time to create page: 0.041 seconds