WooCommerce product gallery slider plugin lets you display product and gallery images in slider and add the videos in the gallery.
- Download Product Gallery Slider for WooCommerce and have your.zip file
- At the WordPress admin panel, go to the Plugins section, and click ‘Add New’ to upload and install the plugin you recently downloaded from WooCommerce.com.
- Upload the .zip file to proceed with the installation.
- Wait until the plugin installs. After successful installation, activate the plugin, and move on to configuration settings.
At the admin panel go to WooCommerce > Settings and click Gallery Slider tab to configure this extension.
Here you can set the followings.
- Enable Gallery Slider: (Enable gallery slider for your website)
- Product / Category Restriction: (Select all or specific products or categories you want to apply gallery slider).
- Auto Play Slider: (Select Yes/No to auto slide the product gallery images)
- Auto Play Timeout: (Define time interval between each slide (1000 = 1s))
Click on the thumbnail settings tab to configure your thumbnail settings.
- Hide Thumbnails: (Check this option to hide gallery thumbnails on the product page)
- Thumbnails to Show: (Set number of thumbnails to show on the product page)
- Thumbnail Slider Layout: (Choose slider layout i.e. Horizontal, Vertical Left or Right)
- Selected Image Border Color: (Set border for a selected image in gallery)
After configuring the thumbnail settings, click on the bullets Settings tab to set bullets for image gallery slider.
- Show Bullets: (Check this option to show Bullets for Image Gallery Slider)
- Bullets Shape: (Select shape of bullets i.e. circle, square, & lines.)
- Bullets Placement: (Option to set placement of bullets)
- Bullets Position: (Set position of bullets, when ‘Bullets Placement’ is set to ‘Inside Image’)
- Show Bullets Thumbnail: (Option to Show thumbnails on hover bullets, when ‘Bullets Placement’ is set to ‘Below Image’)
- Bullets Background Color: (Set background color of bullets)
- Bullets Hover Color: (Select color to show on bullets hover)
Now Move to the Arrows Settings tab, Here you will find the following settings.
- Show Navigation Icons: (Option to show arrow buttons to navigate images in slider)
- Show Navigation on: (Select option to show navigation on hover or fixed)
- Navigation Button Shape: (Set navigation button shape i.e. circle or square)
- Navigation Button Background Color: (Select background color of navigation buttons)
- Navigation Button Hover Color: (Choose hover color of navigation buttons)
- Navigation Icon Color: (Select color of icon shown in navigation buttons)
- Select Navigation Icon: (Set icon to shown in navigation buttons)
In this tab, you can configure the followings.
- Light Box: (Show button for a lightbox on image)
- Lightbox Icon BG Color: (Select background color for lightbox icon)
- Lighbox BG Hover Color: (Select background hover color for lightbox icon)
- Lightbox Icon Color: (Set color for lightbox icon)
- Lightbox Position: (Set Position for lighbox icon)
- Select Lightbox Icon: (Choose icon to show in lightbox button)
- Lightbox Frame Width (px): (Select width of lightbox frame)
In the Zoom settings tab, you can set the followings.
- Zoom: (Option to show zoom box on hover)
- Zoom Box Frame Width (px): (Set zoom box frame width in px)
- Zoom Box Frame Height (px): (Set zoom box frame height in px)
- Zoom Box Radius (%): (Choose zoom box frame radius. Min 0% to Max 50%)
At the admin panel go to Products tab and add or edit any product. Here you will find Product Videos tab in Product Data section and click Add New URL button to add videos. You can add videos by URL or upload from your computer.