Return to previous page

Hover Over Image Offset - by barronpj67 - on WordPress WooCommerce support

This topic has 19 replies, 4 voices, and was last updated 8 years, 9 months ago ago by Robert Hall

barronpj67

Participant

March 1, 2016 at 08:20

Hello,

I really like the hover-over effect you use for products in variant 1 etc, but when I try to use this effect, the hover image is offset to the left (see the brown boots on this page: https://www.riding-gear.co.uk/riding-gear-2/). I can’t see any settings to tweak – what could be wrong??

Thanks.

#115545 Copied

18 Answers

Jack Richardson

Support staff

March 1, 2016 at 10:01

Hello,

Please provide us with WP dashboard and FTP (FTP host, FTP user, FTP password) credentials in private content.

Best regards,
Jack Richardson.

#115579 Copied

barronpj67

Participant

March 1, 2016 at 10:11

Thank you. Temporary account details below…

Please, contact administrator
for this information.

#115586 Copied

Jack Richardson

Support staff

March 2, 2016 at 09:16

Hello,

Unfortunately we can’t log in to your site Dashboard with provided details. Please check them and give us the correct ones. Also there is an empty folder if we connect via FTP with FTP account you gave.

Best regards,
Jack Richardson.

#115750 Copied

barronpj67

Participant

March 2, 2016 at 09:35

Sorry about that, I had the accounts incorrectly set up. Please can you try again?

Thank you.

#115758 Copied

Jack Richardson

Support staff

March 2, 2016 at 17:47

Hello,

FTP details are ok but we also need the correct wp-admin credentials. Thank you.

Best regards,
Jack Richardson.

#115868 Copied

talonhead

Participant

March 3, 2016 at 01:45

I was just going to start a new topic related to this issue….as I’m having the same problem. Except my hover over works fine in grid view…but goes flooey identical to the OP’s in list view. Any ideas on what’s up Jack?

#115907 Copied

barronpj67

Participant

March 3, 2016 at 09:02

oh dear, that’s a little embarrassing. I’ve reset the password again – it seems to work for me…

Please, contact administrator
for this information.

#115928 Copied
Jack Richardson

Support staff

March 3, 2016 at 17:55
Hello @talonhead,

I’ve added this css code in Global Custom CSS:
```
.products-list .product .product-image-wrapper.hover-effect-swap .show-image {
    left: 13px !important;
}
```
Please check swap effect on list view now.

Best regards,
Jack Richardson.
#116023 Copied
Jack Richardson

Support staff

March 3, 2016 at 17:59
Dear @barronpj67,

Try to add the following css code in Theme Options > Styling > Custom CSS > Global Custom CSS section:
```
.product .product-image-wrapper.hover-effect-swap .show-image {
    left: 55px !important;
}
```
Best regards,
Jack Richardson.
#116025 Copied
barronpj67

Participant

March 3, 2016 at 19:17

That’s worked a treat – thank you very much!

I’ve just had another look at this. The suggestion you gave works well for my four column layout, but if I change it to a three column grid, I need to increase the left offset quite considerably. And if I test the ‘responsiveness’ of my four column grid, it kind of works, but the hover image alignment (relative to the main image) moves around a bit, so perhaps I need to use @media to address that.

So, I like the hover image functionality (in fact, that’s what attracted me to the theme) but it does seem like this function needs a little more work…

#116035 Copied

Jack Richardson

Support staff

March 3, 2016 at 20:23

Hello @barronpj67,

You are welcome.

Best regards,
Jack Richardson.

#116041 Copied

barronpj67

Participant

March 3, 2016 at 20:32

I think I was editing my earlier post as you replied – you might want to take a look.

I’m still grateful for you looking into it though – I know what’s wrong now.

#116042 Copied

talonhead

Participant

March 4, 2016 at 09:09

You the man Jack! Worked like a charm as usual. 🙂 Thank you.

#116085 Copied
Jack Richardson

Support staff

March 4, 2016 at 13:28
Hello @barronpj67,

I’ve added additional css rules to the previously provided css code and moved it into “Custom CSS for desktop”:
```
.products-grid.row-count-6 .product-image-wrapper.hover-effect-swap .show-image {
    left: 7px !important;
}

.products-grid.row-count-5 .product-image-wrapper.hover-effect-swap .show-image {
    left: 27px !important;
}

.products-grid.row-count-4 .product-image-wrapper.hover-effect-swap .show-image {
    left: 56px !important;
}

.products-grid.row-count-3 .product-image-wrapper.hover-effect-swap .show-image {
    left: 105px !important;
}

.products-grid.row-count-2 .product-image-wrapper.hover-effect-swap .show-image {
    left: 202px !important;
}
```
Please clear browser cache and check the site.

Best regards,
Jack Richardson.
#116165 Copied
barronpj67

Participant

March 4, 2016 at 19:22

Thanks again. One slight problem (not sure if it’s related to the changes you made or not) but my Classico Child theme is no longer active (the main Classico theme is) and I can’t reactivate it. It returns the following error:
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘yourtheme_woocommerce_image_dimensions’ not found or invalid function name in /home/ridingge/public_html/riding-gear-2/wp-includes/plugin.php

But then I thought; do I actually need to use the child theme if I can put my CSS tweaks into the 8theme Options Styling area…??

#116217 Copied

Jack Richardson

Support staff

March 4, 2016 at 20:32

Hello,

You are right, you can add styling customizations in Theme Options > Styling > Custom CSS section and they will work the same way as through the child style.css file.

Best regards,
Jack Richardson.

#116228 Copied

barronpj67

Participant

March 5, 2016 at 00:44

Thanks again for all your help with this one. Feel free to close the ticket.

Paul.

#116236 Copied

Robert Hall

Support staff

March 5, 2016 at 08:21

Hello,

You’re welcome!

Regards,
Robert Hall

#116244 Copied
Viewing 19 results - 1 through 19 (of 19 total)