WooCommerce Product Slider Pro

  1. Home
  2. Docs
  3. WooCommerce Product Slider Pro
  4. All Sliders (Add New Slider)
  5. Image Settings

Image Settings

Image Settings

(1) Image: You can Show/Hide the Product image by selecting ON and OFF from this option.

(2) Border: Show/Hide Border by turning this option ON and OFF.

(3) Border Thickness: Set Product Image Border Thickness. By default Border Thickness is 1px.

(4) Border Color: Set a Border Color for products as you like.

(5) Border Hover Color: Choose Product Border Hover Color.

(6) Image Flip: Image Flip adds a flip effect to your woo-commerce product thumbnail images. It takes the first image from the gallery and uses it as a second image for the product. When a user hovers an image the second image will show.

(7) Place Holder Image: Set a Place Holder image for those which has no product image. 

(8) Image Sizes: Image Size is the term given to describe the height and width of an image in pixels. It will determine how big or small the image is on a page of your site. This option will automatically include all the image size your site has. You can set custom image sizes also. The default value is the original uploaded image.

There will be different image cropping sizes available in the select option, like below:

  • Thumbnail – hard: 150 x 150 
  • Medium – soft: 300 x 300
  • Medium_large – soft: 768 x 0
  • Large – soft: 1020 x 1024
  • 1536X1536 – soft: 1536X1536
  • 2048X2048 – soft: 2048X2048
  • Woocommerce_thumbnail – hard: 324X324
  • Woocommerce_single – soft: 416X0
  • Woocommerce_gallery_thumbnail – hard: 100X100
  • Shop_catalog – hard: 324X324
  • Shop_single – soft: 416X0
  • Shop_Thumbnail – hard: 100 X 100
  • Original uploaded image
  • Set Custom Size

(9) Width: You can set the Product image Width as you want with this option. By default, the product image width is set as 250px.

(10) Height: The Image Height is one part of the information that determines a  picture, photo, or other image’s dimensions. You can set Product Image height for different screen sizes to make your site responsive. By default, the Product image Height is set as 300px.

(11) Crop: Turn this option ON if you want to set the product image Width and Height you have given. 

(12) Lightbox: Lightbox is a popup overlaying window that shows the original size of the Product image when clicked on it. By default, this option is turned OFF.

(13) Image Title Attribute: It is used to provide a title for your image. The text you enter inside the title tag will not be shown to the user when an image cannot be displayed. Instead, it is displayed as a popup when a user takes their mouse over to an image. Check if you want to enable this option.

(14) GrayScale: Grayscale is a range of monochromatic shades from black to white. Therefore, a grayscale image contains only shades of gray and no color. There are 4 Options:

  • Off: No grayscale effect.
  • Gray with normal on hover: The Product Slider becomes gray but when you hover the Product, the color becomes normal as it is.
  • Gray on hover: When you hover a Product the Product will turn gray.
  • Always gray: The Product Slider will be gray all the time.