Return to previous page

Swap Images pictures push the second picture above first

This topic has 17 replies, 3 voices, and was last updated 8 years, 8 months ago ago by Olga Barlow

Frank Worcester

Participant

August 30, 2016 at 17:41

Hello!

Thanks very much again for the support, we’ve got the categories thing working (around 90% done) thanks to your suggestion (we tried the free plugins, but they didn’t work, this one does thanks)!

Ive been uploading images and ive noticed that the Swap hover effect on the shop page pushes the second image up and above the first, so you can see the bottom of the first image. I’ll put the details below so you can check for yourself. Sorry to keep bothering you about this, we really appreciate it.

Thanks!
Frank

Please, contact administrator
for this information.

#138360 Copied Theme version: Latest version 1.7 WooCommerce version: Latest 4.6

16 Answers
8theme

Support staff

August 31, 2016 at 08:52
Hello,

Try to fix it by adding the following code to your Custom CSS

.content-product .available-on-backorder { position: absolute; font-weight: 700; font-size: 12px; text-transform: uppercase; text-align: center; background-color: rgba(255, 255, 255, 0.7); -webkit-border-radius: 100%; border-radius: 100%; z-index: 10; display: block; line-height: 15px; padding-top: 20px; width: 80px; height: 80px; margin-bottom: 0; color: #000; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; }

Regards
#138395 Copied
Olga Barlow

Participant

August 31, 2016 at 09:07

Hello,

Homer image is image that appears above the main image, that’s why we recommend to use images with the same size to avoid problem with incorrect displaying. You have displayed additional information at the top of main image block “Available on back-order”, that moves the main image to the bottom of block. Hover image is still at the top of the block. To fix issue you have you may add the following code in Theme Options > Styling > Custom CSS

.content-product .product-image-wrapper.hover-effect-swap .image-swap {bottom: 0;}

We would recommend to use child theme if you need to change any template files. If you change theme files without child theme then you woun’t be able to update the to latest version and it will cause problems in future.

That’s why if you changed any files, please, install child theme and move all the changed files in child theme.

Regards

#138401 Copied

Frank Worcester

Participant

August 31, 2016 at 11:33

Wow guys thanks very much for that! Ive changed the position to the top left, so i shows more of the product, still need to test all of this on mobile properly, but so far everything is great!

As for changing stuff, all I believe I’ve done is change the wp debug to false, added this custom code and installed a bunch of plugins. I can just copy and paste the code again if an update changes it, I really don’t want to change any template files if I can.

Thanks again peoples, you’re awesome as always,
Frank

#138425 Copied

Frank Worcester

Participant

August 31, 2016 at 12:26

ooh sorry, but just a thing I found when searching, the Available on Back-order goes above the search results when I search in the top bar, is there a way to fix this? Sorry about this,

Thanks!
Frank

#138427 Copied

Olga Barlow

Participant

August 31, 2016 at 14:05

Hello,

Could you provide screenshot, because I don’t see described problem.

Regards

#138454 Copied

Frank Worcester

Participant

August 31, 2016 at 14:32

Ah ok here it is, it only happens sometimes, but if it can be fixed maybe?

Thanks!
Frank

http://prnt.sc/ccida4

#138457 Copied

Olga Barlow

Participant

August 31, 2016 at 15:03

Hello,

Oh, I see. Change z-index to 1 instead of 10.

Regards

#138466 Copied

Frank Worcester

Participant

August 31, 2016 at 15:15

Ah that worked thank you again!

Thanks!
Frank

#138475 Copied

Olga Barlow

Participant

August 31, 2016 at 17:28

You are welcome!

Regards

#138499 Copied

Frank Worcester

Participant

October 30, 2016 at 00:36

Hello again!

Thanks for the help so far again!

I’m trying now to have it so that the text is above the image, so not on the image at all. However, when the image swap happens, it puts the second image on top of the text for some reason. I have all images set to 700×800 pixels, which is due to mostly the first supplier having the images at those sizes. I’ve tried the codes posted here, but they don’t seem to work at the moment.

An example is with this link, you can see what I mean (if you hover over the Abraxas Surcoat):

https://www.apprenticegames.co.uk/product-category/larp/page/2/

Other than that, everything seems to be going well so far, we’ve been in business and now have over 5000 products, which is pretty good. Hopefully we’ll grow and expand!

Thanks,
Frank

#144391 Copied Theme version: 2.5 WooCommerce version: 2.6.7

Frank Worcester

Participant

October 30, 2016 at 10:47

Also, this happens where it isn’t aligned as well:

http://prnt.sc/d0rdad

Take care,
Frank

#144396 Copied
Olga Barlow

Participant

October 31, 2016 at 13:43
Hello,

Add the following code in Theme Options > Styling > Custom CSS

.content-product .available-on-backorder { position: static; font-weight: 400; font-size: 12px; text-transform: uppercase; text-align: center; background-color: transparent; -webkit-border-radius: 0; border-radius: 0; z-index: 3; display: block; line-height: 24px; padding-top: 0px; width: auto; height: auto; margin-bottom: 0; color: #6b6b6b; left: 50%; top: 0; margin-left: 0px; margin-top: 0px; }

Regards
#144486 Copied
Frank Worcester

Participant

November 2, 2016 at 01:10

Ah hey Olga,

Thanks for your help, I don’t think I was clear sorry.

Would it be possible to have the ‘Available on Backorder’ notification as a bar in the same position as the Button Hover on the products page? So when the bar hovers over the ‘Available on Backorder’ notification, the Button Hover covers the ‘Available on Backorder’ notification?

I know this is probably hard to do, and it is a small detail, but I would really appreciate any help on this 🙂

Thanks again!
Frank

#144678 Copied
Olga Barlow

Participant

November 2, 2016 at 11:22
Hello,

Do you want something like this http://prntscr.com/d22atl ?
Then add the following code

.content-product .available-on-backorder { background-color: rgba(255, 255, 255, 0.9); -webkit-border-radius: 0; border-radius: 0; padding: 7px; width: 90%; height: auto; margin-bottom: 0; left: 0; right: 0; top: inherit; bottom: 1.07rem; margin: auto; }

If you need something else you may play with styles to get necessary effect.

Regards
#144707 Copied
Frank Worcester

Participant

November 2, 2016 at 19:25

Thanks very much, exactly what we needed!

Thanks so much!

Frank

#144749 Copied

Olga Barlow

Participant

November 3, 2016 at 11:52

You are welcome!
I’m glad that my answer was helpful.

Regards

#144814 Copied
Viewing 17 results - 1 through 17 (of 17 total)