Product Thumbnail

The Product Thumbnail Widget allows you to add, style, and manage product thumbnail images anywhere on your Elementor-powered page. It’s perfect for displaying product images in a WooCommerce shop, product page, or catalog, with customizable styling options and responsive settings.

Whether you’re designing an e-commerce store, product gallery, or promotional section, the Product Thumbnail Widget makes it easy to present product images with precision and style.

Key Features:

• Display product thumbnail images for WooCommerce products
• Control image size, border, and shadow styling
• Enable zoom view and lazy loading for better performance
• Link thumbnails to product pages
• Fully responsive and optimized

🚀 How to Enable the Product Thumbnail Widget

To start using the Product Thumbnail Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Product Thumbnail widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🧩 How to Use the Product Thumbnail Widget in Elementor

Step 1: Add the Widget to Your Page

• Open your desired page using Elementor Editor.
• Search for “Product Thumbnail” in the Elementor widget panel.
• Drag and drop the Product Thumbnail TP widget onto your page canvas.
• 🔄 Tip: It includes the TP badge, which means it’s from the Topper Pack.

Step 2: Configure Thumbnail Settings

• Under the Content → Settings section:
  • Toggle Enable Zoom View to “Show” to allow users to zoom in on the thumbnail.
  • Toggle Select Specific Product to “Yes” to manually choose a product, or leave it as “No” to automatically fetch the current product (e.g., on a product page).
  • Toggle Link to Product Page to “Yes” to make the thumbnail clickable, directing users to the product page.
  • Set Custom Alt Text (e.g., “Enter alt…”) for accessibility and SEO.
  • Toggle Enable Lazy Loading to “Yes” for faster page load times.
  • Choose Placeholder Image to display when no product image is available.
  • Set Image Resolution (e.g., Full) for the thumbnail quality.

Step 3: Style the Thumbnail

• Under the Style → Style section:
  • Adjust Width and Height to set the thumbnail dimensions (e.g., in pixels).
  • Choose Object Fit to control how the image fits within its container (e.g., Cover, Contain).
  • Set Border Type (e.g., Default) and Border Radius (e.g., in pixels) for rounded corners.
  • Adjust Box Shadow to add depth to the thumbnail.

✅ Final Preview and Save

Once your product thumbnail settings and style options are applied:

Hit Publish or Update to save your page.

Click Preview Changes to see how it looks.