Support » Plugin: WooCommerce » [3.0] Want to get captions to align with images

  • Resolved glazergallery

    (@glazergallery)


    In WooCommerce 2.6, the image captions appeared right under the images, but in 3.0, they are far beneath the image and in a random position lower left. I’d like to know if I can either center them beneath the image as they were previously, or would be okay with leaving left alignment as the default if it would align to the left bottom corner of the image and appear within 10 to 20 pixels below it. If you can tell me the CSS tag that would do that and which stylesheet it goes in, that would be great. I am comfortable editing the Custom CSS page in the WordPress Dashboard. I also know how to add code to the functions.php and upload it to the server. Also, I have FTP capabilities and can download CSS and PHP pages via Dreamweaver for editing and then upload them back to the site, if that’s a better way to make the needed changes.

    If that solid black background could be made slightly transparent, I’d like to know how to do that, too.

    Also, in the previous version of WooCommerce the image title tag popped up when the mouse hovered over a thumbnail image in the grid below the main product image. Is there a way to bring that feature back? Because I was using that, too.

    Better yet would be an option to use the 2.6 product gallery design instead. I’d be extremely happy to revert to that.

    –HGlazer–

    • This topic was modified 2 years, 9 months ago by glazergallery. Reason: remove question mark from title
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author James Koster

    (@jameskoster)

    Hey,

    I’ve had a look in to this. Turns out positioning the caption is going to be tricky because the script we’re using figures out the placement depending on the dimensions of the image being magnified. So to do this properly you’d need to modify that script which is not something I’d recommend.

    I can help you with a couple of other things though;

    
    .pswp__caption__center {
    text-align: center;
    }

    That will justify the text in your captions centrally.

    
    .pswp__caption__center {
    max-width: 500px;
    }

    That will adjust the width of the caption. Tweak the value to suit your requirements.

    
    .pswp__bg {
    background: rgba(0,0,0,.8);
    }

    That will make the background color slightly transparent.

    Also, in the previous version of WooCommerce the image title tag popped up when the mouse hovered over a thumbnail image in the grid below the main product image. Is there a way to bring that feature back? Because I was using that, too.

    That would involve modifying another script I’m afraid. Luckily that’s a script we control so you can suggest the change here; https://github.com/woocommerce/FlexSlider/issues

    Cheers

    Thanks very much, James, those all work well and I’m finally feeling somewhat relieved. I’m still not quite getting why the caption has to be all the way at the bottom if there’s a small image, instead of being positioned in a fixed relationship to the bottom of the image. But the fact that it’s centered at least makes it look as if it’s not randomly positioned, and adding the transparency helps, too, because the caption background is opaque and therefore I think it is less likely to be overlooked where the images are small as in https://www.georgeglazer.com/wpmain/product/game-fish-and-wildlife-prints-sherman-foote-denton-new-york-1896/.

    Hey James or glazergallery. I have no idea where exactly I need to put that css code to make the background almost transparent. Help please. 🙂
    I checked out the link glazergallery provided and that almost transparent background is EXACTLY what I have been looking for.
    TIA

    @tia — You have to add it to custom.css. If you are using a Site Origin theme, in the WordPress Dashboard go to Appearance: Customize: Additional CSS and copy and paste the code there. For other themes, go to Appearance: Custom CSS. If you have other custom CSS already in use, I’d suggest saving a copy of what you have right now to your hard drive as a backup first.

    • This reply was modified 2 years, 8 months ago by glazergallery.

    THANK YOU glazergallery. That worked perfectly.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[3.0] Want to get captions to align with images’ is closed to new replies.