Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #232977

    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.

    #234140

    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

    #234960

    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,

    #235814

    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.

    #236754

    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

    #237133
    This reply has been marked as private.
    #237524

    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

    #237741

    Peter,

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

    #238552

    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

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