Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 5, 2014 at 11:21 pm #232977
    infinweb

    Can you point me in the right direction to adjust the woocommerce product image overlay? I want to have a transparent image overlay that suggests the user can click on the image to zoom in when hovering over products within the shop?
    I was able to create a similar effect by placing my hover image within the product gallery, but then it shows up when you actually click on the product within the products’ gallery.

    I assume this can be done via CCS, but was not sure where to look within the theme.

    March 8, 2014 at 11:39 am #234140
    Dude

    Hi infinweb!

    You can replace the default overlay/icon with i.e. a magnifier icon. Use this code:

    
.single-product .image-overlay .image-overlay-inside:before {
content: '\E803';
}

    and insert it into the quick css field to change the icon. You can replace E803 with another char code if you want to use a custom icon.

    Cheers!
    Peter

    March 10, 2014 at 8:33 pm #234960
    infinweb

    Peter,

    Thanks for the reply, but I am still not seeing the change after entering your suggestion into Enfold Child Theme Options/Styling/Quick CSS. Also to be clear, I am looking to have the overlay appear within the shop catalog views as well as a single product view.

    Thanks,

    March 11, 2014 at 8:05 pm #235814
    infinweb

    I tried again after updating the theme with the latest version and it no longer displays the arrows, but rather “E803” in the circle. I assume that means there is something wrong with syntax.

    March 13, 2014 at 8:51 am #236754
    Dude

    Hi!

    The shop overview/catalog page does not support an overlay. It can just display another product image and the rating – see: http://kriesi.at/themes/enfold/shop/ . If you really need an overlay for the catalog/shop page please hire a freelancer who can help you to implement the effect.

    Can you post a link to your single product page (where you can see the “E803″ code). I’ll check why it doesn’t display an icon.

    Best regards,
    Peter

    March 13, 2014 at 7:22 pm #237133
    infinweb
    This reply has been marked as private.
    March 14, 2014 at 11:11 am #237524
    Dude

    Hey!

    I checked the css code and you mised the \ character. Please replace:

    
.single-product .image-overlay .image-overlay-inside:before {
content: 'E803';
}

    with

    
.single-product .image-overlay .image-overlay-inside:before {
content: '\E803';
}

    Regards,
    Peter

    March 14, 2014 at 5:08 pm #237741
    infinweb

    Peter,

    For some reason the “\” is being stripped out after saving using the Enfold Child Theme Options/Styling/Quick CSS menu.

    March 17, 2014 at 9:27 am #238552
    Dude

    Hi!

    I’ll ask Kriesi to look into it. For now I recommend to place the code into the child theme style.css.

    Best regards,
    Peter

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.