Product Quick View pop-ups with WoodMart

The Quick View feature allows buyers to view product details directly on the product listing page without having to jump to another page.WoodMart comes with this feature without the need to install additional plug-ins, and the setup is very simple, which is suitable forE-commerce siteImprove the efficiency of product browsing.

Enabling Quick View

Go to the backend and click WoodMart → Theme Settings → Shop.

Find the "Quick View" option and check "Enable".

You can also adjust how Quick View pop-ups are displayed:

• Layout style: horizontal display (left image, right text) or vertical display (top and bottom)
• Display information: including product description, price, variant selection, rating, stock status, etc.
• Image style: whether to enable thumbnail rotation

Click Save after adjusting and refresh the page to take effect.

If your product listings use the Elementor maybe WPBakery build, the buttons are likewise automatically integrated in, with no need for a separate action.

Modify button style and text

Go to Theme Settings → Styles & Colors → Buttons

Scroll down to find Add Rules and select Quick View Add to Cart:

• Button color, border and font size can be modified.
• Change the button text, e.g. change "Quick View" to "Click Me to Preview" or "Product Details".
• Support for uploading custom icons or using icon fonts (e.g. Font Awesome)

If you are using the Elementor Loop Builder to customize the product list, it is recommended to unify the button class name, such as .quick-view-buttonand then in the Theme Custom CSS or Elementor Custom CSS in a uniform style, for example:

.quick-view-button {
  background-color: #111;
  background-color: #111; color: #fff;
  
  border-radius: 4px; }
}

Optimize mobile display effect

WoodMart has made the Quick View pop-up windowresponsiveAdapted, the mobile will pop up in full screen.

This can be further optimized in custom CSS:

.quick-view-popup .product-summary {
  font-size: 16px;
}
@media(max-width:768px){
  .quick-view-popup .product-image-gallery {
    display: none; /* Hide image gallery for faster loading */
  }
}

In addition, themobileIt is recommended to keep only the main information, such as the main image, price, and buy button, and to reduce distracting content, theImproved loading speedThe

Fast Track Approach

• Popups don't show up: check to see if they're enabledCaching PluginIf you want to test it, clear the cache and test it again.
• Wrong style: check if the CSS is customized, or if the theme is the latest version
• Variant loading failure: verify that the variant settings are complete and that there are no missing attributes or images

wrap-up

WoodMart The Quick View feature doesn't require a plugin to be installed and comes with a settings interface and style controls that can quickly improve the interactivity of product listing pages. With good style and mobile optimization, it can also further improve the conversion efficiency. It is recommended to enable this feature for every product to make it easier for buyers to browse and compare and place orders.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off