<\/span><\/h2>\n\n\n\nPerfect when your theme already loads an icon font (Font Awesome, LineIcons, etc.).<\/p>\n\n\n\n
\/* Add in Customizer \u25b8 Additional CSS *\/\n.woocommerce-product-gallery__trigger::before {\n content: \"\\f002\"; \/* Font Awesome search icon glyph *\/\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900; \/* solid style *\/\n font-size: 20px;\n color: #444; \/* match your palette *\/\n}\n.woocommerce-product-gallery__trigger img {\n display: none; \/* hide the original SVG\/PNG *\/\n}\n<\/code><\/pre>\n\n\n\nWhy it works<\/strong><\/p>\n\n\n\n\nCSS content inserts a font character.<\/li>\n\n\n\n No PHP edits, so it survives WooCommerce updates.<\/li>\n\n\n\n You can adjust size, color, and hover state in a few lines<\/li>\n<\/ul>\n\n\n\n<\/span>3. Swap the Graphic File (Template Override Method)<\/span><\/h2>\n\n\n\nIf you prefer a custom SVG or need total markup control:<\/p>\n\n\n\n
1. Copy the template<\/p>\n\n\n\n
wp-content\/plugins\/woocommerce\/templates\/single-product\/product-image.php\n<\/code><\/pre>\n\n\n\nto <\/p>\n\n\n\n
wp-content\/themes\/your-child-theme\/woocommerce\/single-product\/product-image.php<\/code><\/pre>\n\n\n\n2. Open the copied file and locate<\/p>\n\n\n\n
<button class=\"woocommerce-product-gallery__trigger\" ... >\n <?php echo wc_get_svg_icon( 'zoom' ); ?> <!-- original icon -->\n<\/button><\/code><\/pre>\n\n\n\n3. Replace the call with your SVG, e.g.: <\/p>\n\n\n\n
<svg aria-hidden=\"true\" width=\"20\" height=\"20\" class=\"custom-zoom\">\n <use href=\"#icon-search\"><\/use>\n<\/svg>\n<\/code><\/pre>\n\n\n\n4. Flush caches and confirm the new graphic appears at every breakpoint.<\/p>\n\n\n\n
Tip: Keep any ARIA labels intact to preserve accessibility.<\/p>\n\n\n\n
This technique persists through plugin updates because WooCommerce will load the overridden template from your child theme first.<\/p>\n\n\n\n
<\/span>4. Control Everything with a Dedicated Plugin<\/span><\/h2>\n\n\n\nIf you want point-and-click settings\u2014size sliders, color pickers, and optional lens effects\u2014install Product Image Zoom for WooCommerce<\/strong> and:<\/p>\n\n\n\n\nPlugins \u25b8 Add New \u25b8 Upload<\/strong> the ZIP.<\/li>\n\n\n\nWooCommerce \u25b8 Settings \u25b8 Product Image Zoom \u25b8 General<\/strong>.<\/li>\n\n\n\nAdjust Icon Color<\/em>, Icon Size<\/em>, and Icon Shape<\/em> fields to match your design.<\/li>\n\n\n\nSave changes and clear site + browser cache<\/li>\n<\/ol>\n\n\n\nPlugins vary, but most bundle several zoom styles (fade-in, inner zoom, lens) and handle retina icons automatically.<\/p>\n\n\n\n
<\/span>5. Changing the Search-Bar Magnifier<\/span><\/h3>\n\n\n\nMany stores also want the same branding in the header search.<\/p>\n\n\n\n
\nTheme markup:<\/strong> 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.<\/li>\n\n\n\nFiboSearch (AJAX Search) plugin:<\/strong> Add the snippet below to Appearance \u25b8 Customizer \u25b8 Additional CSS<\/strong> to overwrite its default icon:<\/li>\n<\/ul>\n\n\n\n.dgwt-wcas-search-submit::before {\n content: \"\\e900\"; \/* your icon font glyph *\/\n font-family: \"IconFont\";\n font-size: 18px;\n}\n.dgwt-wcas-search-submit svg,\n.dgwt-wcas-search-submit img {\n display: none;\n}\n``` :contentReference[oaicite:4]{index=4}\n<\/code><\/pre>\n\n\n\n<\/span>6. Test & Troubleshoot<\/span><\/h3>\n\n\n\nSymptom<\/th> Fix<\/th><\/tr><\/thead> Icon does not appear<\/td> Confirm font family loads; inspect in DevTools for 404 errors.<\/td><\/tr> Wrong icon on mobile<\/td> Ensure mobile header uses the same selector; some themes switch IDs.<\/td><\/tr> Icon shows twice<\/td> Hide originals (display:none<\/code>) after<\/em> the theme stylesheet loads.<\/td><\/tr>Caching or CDN still serves old<\/td> Purge cache, then hard-refresh (Ctrl + Shift + R).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<\/span>7. Finishing Touches<\/span><\/h3>\n\n\n\n\nHover states<\/strong>: add :hover<\/code> rules for color changes or subtle transforms (transform: scale(1.1)<\/code>).<\/li>\n\n\n\nAccessibility<\/strong>: keep <span class=\"screen-reader-text\">Zoom product image<\/span><\/code> or aria-label<\/code> attributes.<\/li>\n\n\n\nPerformance<\/strong>: inline small SVGs (<4 KB) to avoid extra network requests.<\/li>\n\n\n\nConsistency<\/strong>: update every location where the magnifier shows (quick-view modals, mobile search overlay, sticky headers).<\/li>\n<\/ul>\n\n\n\nReplacing WooCommerce\u2019s 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\u2019s aesthetic while keeping shoppers focused on what matters\u2014your products.<\/p>\n","protected":false},"excerpt":{"rendered":"
A subtle icon swap can freshen your store\u2019s look and reinforce your branding. Below are four reliable approaches\u2014ranging from a quick CSS snippet to a full template override\u2014so 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…<\/p>\n","protected":false},"author":271,"featured_media":7019,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[586],"tags":[],"class_list":["post-7013","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"modified_by":"Nurul Afsar","jetpack_featured_media_url":"https:\/\/www.numinix.com\/wordpress\/wp-content\/uploads\/2025\/05\/WooCommerce.jpg","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts\/7013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/users\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/comments?post=7013"}],"version-history":[{"count":0,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts\/7013\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/media\/7019"}],"wp:attachment":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/media?parent=7013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/categories?post=7013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/tags?post=7013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}