Add Zoom Icon to WooCommerce Product Gallery

By default, the Total theme replaces WooCommerce’s built-in lightbox with its own enhanced version. It also makes each image clickable, opening directly in the lightbox.

This approach is generally more user-friendly than WooCommerce’s default method, which places a small icon in the top-right corner of the gallery.

If you prefer to display an icon to make the lightbox functionality more obvious to users, you can achieve this using the following custom CSS:

.woocommerce-product-gallery__image {
    position: relative;
}

/* For a better design you could instead use an SVG icon as a background,
 * but you would need to use a child theme, because it will get stripped out for security reasons
 * when saving custom CSS */
.woocommerce-product-gallery__image::before {
    content: "\1F50D";
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 99;
    height: 2.5rem;
    width: 2.5rem;
    background: #fff;
    border-radius: var(--wpex-rounded-full);
    line-height:30px;
    text-align:center;
    font-size: 1rem;
    cursor: pointer;
}

All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)

Related Snippets

This snippet was last updated on November 10, 2025