Joomla Templates Club 406,261 posts

[ronron6 Friend ronron6Join date: January 2016Posts: 116Downloads:32Uploads:35 Thanks: 9]

#997653

hi

at the moment the product images are not clickable, you have to click on the title to make it clickable. How can we make the product images clickable?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#997797

Hi,

As the concept of this template, when you hover the product image, the add to cart button will popup over the image. There is link with add to cart, do you think it will be confused?

Regards

[ronron6 Friend ronron6Join date: January 2016Posts: 116Downloads:32Uploads:35 Thanks: 9]

#999227

hi,

yes it is confusing. we tested it with some users and all of them clicked on the image.

now since it cant be clicked they dont know what to do. We had to tell them to click on the title.

how can we make it clickable?

thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#999568

So you want to have product image clickable and still keep the ‘Add to cart’ button when hovering image?

[ronron6 Friend ronron6Join date: January 2016Posts: 116Downloads:32Uploads:35 Thanks: 9]

#999749

yes please…

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#999778

To achieve this, you will need to remove the mask above each product image:

• Go to file: ROOT/templates/ja_jason/less/extras/com_hikashop.less
• At approx line 194, remove this declaration:

&:after {
top: 0;
left: 0;
bottom: 0;
right: 0;
background: @black;
content: "";
position: absolute;
z-index: 1;
.opacity(0);
.transition(all 0.35s ease 0s);
}

&:before {
border: 1px solid @white;
bottom: 10px;
content: "";
left: 10px;
position: absolute;
right: 10px;
top: 10px;
z-index: 2;
.scale(1.1);
.opacity(0.6);
.transition(all 0.35s ease 0s);
}

Like this screenshot: http://prntscr.com/drphol

This change is on LESS file so to see the change on the front-end, you will need to backup all current CSS files first then go to template manager > Compile LESS to CSS.

Regards

[ronron6 Friend ronron6Join date: January 2016Posts: 116Downloads:32Uploads:35 Thanks: 9]

#1000429

i got this to work.

bit is it possible to retain the mask above as well?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1000736

I’m afraid that you can have one of them only, with the mask, you can’t click the image.

[ronron6 Friend ronron6Join date: January 2016Posts: 116Downloads:32Uploads:35 Thanks: 9]

#1001316

is it possible to hide the add to wishlist button and make it appear when you hover over the image?

thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1001490

It’s not related to that button, if the mask is over image, you can’t click

[ronron6 Friend ronron6Join date: January 2016Posts: 116Downloads:32Uploads:35 Thanks: 9]

#1002517

hi

when i compile less to css some images gets lost. i have to redo some revisions and images.

why?

also i have the following files which should i use?

/home/…/templates/ja_jason/css/extras/com_hikashop.css
/home/…/templates/ja_jason/local/css/extras/com_hikashop.css
/home/…/templates/ja_jason/local/css/custom.css
/home/…/templates/ja_jason/css/custom.css

thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1002971

Hi,

Could you describe more details? which images are lost?

[Author]

Posts