1 min read

How To Change WooCommerce Magnifying Glass

Shashank Dubey
Content & Marketing, Wbcom Designs · Published Sep 13, 2024 · Updated Mar 18, 2026
WordPress Experts by Wbcom Designs - galaxy background with handwriting text

WooCommerce is a highly versatile and widely used eCommerce plugin for WordPress, offering a range of features to enhance your online store’s functionality. One such feature is the magnifying glass icon, commonly associated with the image zoom functionality on product pages. This zoom feature allows customers to closely examine product images, improving their shopping experience by providing more detail.

Although this feature is beneficial, you might want to customize the magnifying glass icon to better align with your site’s design or branding. In this article, we’ll learn the steps to change the magnifying glass icon in WooCommerce, adhering to Google’s Helpful Content Guidelines to ensure this content is both informative and accessible, especially for those utilizing WooCommerce services.

Introduction to WooCommerce Magnifying Glass Icon

The magnifying glass icon in WooCommerce is often part of the product image gallery, which allows users to zoom in and examine products more closely. This feature is essential for enhancing user experience, especially in eCommerce stores that sell products where details matter, like fashion, electronics, or artwork.

Methods to Change the WooCommerce Magnifying Glass Icon

Method 1: Change the Magnifying Glass Icon Using Custom CSS

Steps:

  1. Identify the Class for the Magnifying Glass Icon
  2. Open WordPress Customizer
  3. Add Custom CSS to Change the Icon
.woocommerce-product-gallery__trigger { 
 background-image: url('your-new-image-url'); 
 background-size: contain; 
 background-position: center; 
 background-repeat: no-repeat; 
 width: 30px; height: 30px; 
}

Method 2: Modify Theme Files (Using a Child Theme)

Method 3: Use a Plugin to Customize the Icon

Enhancing Your WooCommerce Store with a Custom Magnifying Glass Icon

Customizing the magnifying glass icon in WooCommerce is a great way to enhance the aesthetics and functionality of your online store.

Updated on March 14, 2026


Sell High-Value Product With WooCommerce

Can WooCommerce Do A 75 000 ACH Payment

Woo Sell Services

Shashank Dubey
Content & Marketing, Wbcom Designs

Shashank Dubey, a contributor of Wbcom Designs is a blogger and a digital marketer. He writes articles associated with different niches such as WordPress, SEO, Marketing, CMS, Web Design, and Development, and many more.

Related reading