How To Change WooCommerce Magnifying Glass?

Last Updated on May 28, 2025 by Nurul Afsar

A subtle icon swap can freshen your store’s look and reinforce your branding. Below are four reliable approaches—ranging from a quick CSS snippet to a full template override—so you can choose the level of control that suits your workflow. Each technique assumes you already know your way around the WordPress Customizer, child themes, and basic file management.

If you are not familiar with these and want help, Numinix’s WooCommerce development team can take of that for you.

Disclaimer

The guidance is offered for informational purposes only. Implementing any code, template edits, or plugin changes is done at your own discretion. Always back up your site and test on a staging environment before modifying a live store. Numinix is not responsible for any data loss, downtime, or other issues that may arise from following these instructions, and no warranties—express or implied—are provided. If you are uncertain about any step, consult a qualified developer.

---

Why Change the WooCommerce Magnifying-Glass Icon?

Stock icons rarely capture a store’s unique personality. Swapping WooCommerce’s default magnifying-glass icon reinforces branding, improves usability, and can even trim load times. By introducing a custom SVG or icon-font glyph, the zoom trigger and search button instantly align with your color palette, stroke weight, and overall design language, creating a cohesive, professional impression that fosters trust. Usability rises because a clearer or larger symbol guides shoppers who might otherwise miss the zoom feature or search bar, reducing friction and keeping them engaged longer. A high-contrast or animated icon also helps meet accessibility guidelines, giving keyboard and screen-reader users clear cues and lowering legal risk. Performance may benefit, too: an inline SVG eliminates the extra HTTP request required by bulky icon sets. At a glance, this subtle tweak signals meticulous care—suggesting your store is well maintained, frequently updated, and worth revisiting—achieved with a simple, five-minute adjustment on your storefront.

---

1. Get Ready: Backups, Child Theme, and Icon Assets

• Back up your site. A staging copy or a snapshot from your host lets you roll back if something breaks.
• Activate a child theme (or create one). Direct edits in a parent theme disappear with updates.
• Collect your replacement icon:
  • SVG (preferred for sharp scaling).
  • PNG at 2× the largest size it will appear.
• Note the two places where WooCommerce shows magnifiers:
  • Product-image zoom trigger (.woocommerce-product-gallery__trigger).
  • Search bar submit button (theme-dependent markup or a plugin such as FiboSearch).

---

2. Fast Fix: Replace the Icon with Pure CSS

Perfect when your theme already loads an icon font (Font Awesome, LineIcons, etc.).

/* Add in Customizer ▸ Additional CSS */
.woocommerce-product-gallery__trigger::before {
    content: "\f002";          /* Font Awesome search icon glyph */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;          /* solid style */
    font-size: 20px;
    color: #444;               /* match your palette */
}
.woocommerce-product-gallery__trigger img {
    display: none;             /* hide the original SVG/PNG */
}

Why it works

• CSS content inserts a font character.
• No PHP edits, so it survives WooCommerce updates.
• You can adjust size, color, and hover state in a few lines

---

3. Swap the Graphic File (Template Override Method)

If you prefer a custom SVG or need total markup control:

1. Copy the template

wp-content/plugins/woocommerce/templates/single-product/product-image.php

to

wp-content/themes/your-child-theme/woocommerce/single-product/product-image.php

2. Open the copied file and locate

<button class="woocommerce-product-gallery__trigger" ... >
    <?php echo wc_get_svg_icon( 'zoom' ); ?>  <!-- original icon -->
</button>

3. Replace the call with your SVG, e.g.:

<svg aria-hidden="true" width="20" height="20" class="custom-zoom">
    <use href="#icon-search"></use>
</svg>

4. Flush caches and confirm the new graphic appears at every breakpoint.

Tip: Keep any ARIA labels intact to preserve accessibility.

This technique persists through plugin updates because WooCommerce will load the overridden template from your child theme first.

---

4. Control Everything with a Dedicated Plugin

If you want point-and-click settings—size sliders, color pickers, and optional lens effects—install Product Image Zoom for WooCommerce and:

1. Plugins ▸ Add New ▸ Upload the ZIP.
2. WooCommerce ▸ Settings ▸ Product Image Zoom ▸ General.
3. Adjust Icon Color, Icon Size, and Icon Shape fields to match your design.
4. Save changes and clear site + browser cache

Plugins vary, but most bundle several zoom styles (fade-in, inner zoom, lens) and handle retina icons automatically.

---

5. Changing the Search-Bar Magnifier

Many stores also want the same branding in the header search.

• Theme markup: Search for get_search_form() or header partials inside your child theme, then swap the <input type=”submit”> text for an SVG or Font Awesome glyph exactly as in Section 2.
• FiboSearch (AJAX Search) plugin: Add the snippet below to Appearance ▸ Customizer ▸ Additional CSS to overwrite its default icon:

.dgwt-wcas-search-submit::before {
    content: "\e900";               /* your icon font glyph */
    font-family: "IconFont";
    font-size: 18px;
}
.dgwt-wcas-search-submit svg,
.dgwt-wcas-search-submit img {
    display: none;
}
``` :contentReference[oaicite:4]{index=4}

---

6. Test & Troubleshoot

Symptom	Fix
Icon does not appear	Confirm font family loads; inspect in DevTools for 404 errors.
Wrong icon on mobile	Ensure mobile header uses the same selector; some themes switch IDs.
Icon shows twice	Hide originals (display:none) after the theme stylesheet loads.
Caching or CDN still serves old	Purge cache, then hard-refresh (Ctrl + Shift + R).

---

7. Finishing Touches

• Hover states: add :hover rules for color changes or subtle transforms (transform: scale(1.1)).
• Accessibility: keep <span class="screen-reader-text">Zoom product image</span> or aria-label attributes.
• Performance: inline small SVGs (<4 KB) to avoid extra network requests.
• Consistency: update every location where the magnifier shows (quick-view modals, mobile search overlay, sticky headers).

Replacing WooCommerce’s default magnifying-glass icon is straightforward once you decide whether you want a CSS, template, or plugin-based approach. A lightweight CSS swap is fastest, a template override offers pixel-perfect control, and a plugin delivers a GUI with bonus zoom features. Whichever route you take, keep changes inside a child theme, maintain accessible markup, and clear your caches for immediate results. Your refreshed icon will blend seamlessly into your store’s aesthetic while keeping shoppers focused on what matters—your products.