canticum

Forum Replies Created

Viewing 1 replies (of 1 total)

  • Hi,
    I found how to cut corners here with CSS.

    1. Edit this file: /public_html/stork/wp-content/plugins/woocommerce/assets/css/woocommerce.css

    2. Find this class .woocommerce-product-gallery__trigger

    3. Change this default code:

    .woocommerce-product-gallery__trigger {position:absolute;top:.5em;right:.5em;font-size:2em;z-index:9;width:36px;height:36px;background:#fff;text-indent:-9999px;border-radius:100%;box-sizing:content-box}

    into that:

    .woocommerce-product-gallery__trigger {position:absolute;z-index:9;width:100%;height:100%;text-indent:-9999px;box-sizing:content-box}

    4. Now lightobx will be triggered after clicking on any element of the gallery or on the main picture.

    5. If you wish to additionally get rid ofthis magnifying glass icon you can find and delete this css code:

    .woocommerce div.product div.images .woocommerce-product-gallery__trigger::before{content:"";display:block;width:10px;height:10px;border:2px solid #000;border-radius:100%;position:absolute;top:9px;left:9px;box-sizing:content-box}.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after{content:"";display:block;width:2px;height:8px;background:#000;border-radius:6px;position:absolute;top:19px;left:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);box-sizing:content-box}

    • This reply was modified 5 years, 5 months ago by canticum.
Viewing 1 replies (of 1 total)