Find out how to sequence #1: Picture Zoom

Product photographs in ShopWP have the choice of exhibiting a “zoom” function that many people have grown to anticipate from shops on-line. Earlier than we get began, let’s stroll by a number of essential issues to know beforehand.

First, Picture Zoom is just for product photographs and won’t work for collections. It’s additionally a pro-only function.

Second, Picture Zoom will solely work for the featured picture of every product. For instance, in case you have 5 product photographs the 4 thumbnails that present at any given time will not have zoom utilized. Solely the energetic featured picture.

Lastly, Picture Zoom is turned off by default. Subsequently, assuming you’re utilizing ShopWP Professional the very first thing you must do is flip it on. You are able to do this from one among two locations; both globally within the plugin settings or inside every shortcode.

Let’s undergo every one.

Allow Picture Zoom Globally

If you wish to activate picture zoom for all merchandise, then you definately’ll must allow it globally. You are able to do this from throughout the plugin settings.

First, open your WordPress dashboard and click on the ShopWP sidebar menu hyperlink.

From right here, you’ll wish to click on on the “Settings” tab after which the “Merchandise” sub-nav. You may then discover the picture zoom setting beneath the “Featured Photos” heading.

Allow Picture Zoom in Shortcodes

In the event you’d desire to maintain Picture Zoom disabled globally, however allow it just for particular shortcodes, you are able to do so by utilizing the show_zoom attribute. You’ll add this attribute to the

shortcode like this:

 


   
  

    @keyframes shimmer {
        0% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }

    .shopwp-skeleton-component {
        margin-bottom: 13px;
        border-radius: 15px;
        background: #eee;
        animation: shimmer 0.4s ease-out 0s alternate infinite none working;
    }

    .shopwp-skeleton-row {
        show: flex;
        justify-content: space-between;
    }

    .shopwp-skeleton-product-image {
        width: 300px;
        top: 150px;
    }

    .shopwp-skeleton-product-title {
        width: 200px;
        top: 20px;
    }

    .shopwp-skeleton-product-price {
        width: 160px;
        top: 20px;
    }      

    .shopwp-skeleton-product-buy-button {
        width: 300px;
    }

    .shopwp-skeleton-product-buy-button-value {
        width: 30%;
        max-width: 30%;
        flex: 0 0 30%;
        top: 20px;
    }

    .shopwp-skeleton-product-buy-button-cta {
        width: 300px;
        top: 40px;
    }




  
 
   
 
    
 
    
 
    
 
    
 
     
 
      
 
      
 
      
 
     
 
     
 
    
 
   
 
  

 

The show_zoom attribute solely takes “true” or “false” as values. False is about by default which implies Picture Zoom is turned off.

,