WP Carousel Pro

  1. Home
  2. Docs
  3. WP Carousel Pro
  4. Shortcode Generator Settings
  5. Style Settings (Woo Product Source)

Style Settings (Woo Product Source)

Style Settings (Woo Product Type)

(1) Filter Products: Select one for Filter Products. You can choose among:

  • Latest: If you choose this option, All the latest Products will be displayed in the Woo Product Carousel.
  • Category: Category is the way to organize your products into categories and Subcategories. Select Which product category you want to display in the Woo Product Carousel.
  • Specific: When you select this option Only your selected product will be displayed in the carousel. Set Products in the Select Product option that you want to show in the Woo Product Carousel.

(2) Category Term(s): When You select Category from the Filter Products option this option will appear. Set Which Product categories you want to display in the Woo Product Carousel.

(3) Operator: Select the Category Term Operator to show the products. Options are:

  • IN: Show Products associated with one or more terms.
  • AND: Show Products which match all terms.
  • NOT IN: Show Products which don’t match the terms.

(4) Limit: Set the Number of Total products to show in the Woo Product Carousel. The default value for the total product is 10.

(5) Section Title: Show or hide the Carousel section title.

(6) Space Between: Set space or gap between the Products inside the carousel. The default value is 20px. You can set the value as you wish.

(7) Content Position: Content position is where you want to display your Product content. Select a position for the Product Title, Description, Category, etc. The options are the following: 

    A. Top: Product Content will display Below the image.

    B. Bottom: Product Content will display Above the image.

    C. Right: Product Content will display at the Right of the image.

    D. Left: Product Content will display at the Left of the image.

    E. Overlay: Product Content will display over a product image.

The above options are given below with the screenshots example.

A. Bottom Content Top Product Image:

Bottom Content Top Product Image
Bottom Content Top Product Image

B. Top Content Below Product Image:

Top Content Below Product Image
Top Content Below Product Image

C. Right Content Left Product Image:

Right Content Left Product Image
Right Content Left Product Image

D. Left Content Right Product Image:

Right Content Left Product Image
Left Content Right Product Image

E. Overlay Content:

Overlay Content
Overlay Content

(8) Same Height: Check to make all items/slides the same height as the tallest one.

(9) Inner Padding: Inner Padding is the space that’s inside the carousel item between the product and the border. The default value for Inner Padding is 0px.

(10) Product Name: You can Show/Hide Product Name by this option. By default, the Product Name is Shown.

(11) Length: Set product title length in letters. Leave it empty if you want to show the full title.

(12) Product Price: You can Show/Hide Product Price by this option. By default, the Product Price is Shown.

(13) Product Description: This is the option you can Show/Hide the Product Description as you wish. By default, the Product Description is Shown.

(14) Limit Product Description: You Can set the Product Description Word Limit by this option.

(15) Description Word Count: Number Of words to show as the Product Description. The default value for Description Word Count is 15 Words.

(16) Read More: You can Show or Hide product content Read More button.

(17) Read More Button Level: User is also allowed to change the read more button level text as they like.

(18) Product Rating: Show or Hide Product rating.

(19) Rating Star Color: Set the Color of product Rating stars.

(20) Rating Alignment: Rating Alignment means decorating your product rating in a way that makes a line or row. There are three ways you can set the Star Rating Alignment. Such as:

  • Left Alignment: left Alignment or left justify is formatting that Product Rating star along the left side of the WooCommerce Product Carousel. 
  • Center Alignment: Center Alignment is formatting that Product Rating star neither the left nor right margin but the center of the WooCommerce Product Carousel.
  • Right Alignment: Right Alignment or Right justify is formatting that Product Rating star along the Right side of the WooCommerce Product Carousel.

(21) Add To Cart Button: You can Show/Hide the Product Add To Cart Button. By default Add To Cart Button is Show.

(22) Add To Cart Color: Set Add To Cart button Color, Hover Color, Background,  Hover Background, Border, Hover Border color as you want.

(23) Image: You Can Show/Hide Product Image. By default the value is Show.

(24) 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 show different available image cropping sizes in the option to choose from (Including, Orginal uploaded image and Set custom size):

  • 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

(25) Custom Size: This feature allows you to set a custom height and width for your Product image as you like. You can also select Soft-crop and Hard-crop.

  • Soft-crop: The Soft Crop in WordPress is the same as what’s commonly known as a Fit crop and is what we’d normally think of as a pure resize. It’s proportional, so the entire area of the image is retained. The entire image will fit in a box of the dimensions you specify without cutting any of the images. So if the shape of the image is not exactly the same as the shape of the box, you’ll end up with blank space.
  • Hard-crop: The hard crop will fill a box of whatever dimensions you specify and cut out any other parts of the image that don’t fit in that box. If you want to create square thumbnails from rectangular images, make the width and height the same. You can set different types of square and rectangular hard crops. It has the property of making sure all the thumbnails are the same shape, which I prefer for its tidiness.

(26) Image Height CSS: 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.

(27) Image Border: Set Border and Border color for the product image.

(28) Border Radius: Set a Border-Radius for the Woo Product carousel image. The border fits well in a square size image. The Default value of the Border Radius is 0px.

(29) Variable Width: Variable Width specifies the column width for the display of images in the Woo Product carousel. It has no effect on the resolution of the image. If this option is ON the number of the column will be set depending on the column width. By default, this option is OFF.

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

(31) Lazy Load: Lazy loading (also called on-demand loading) is an optimization technique for online content like a website or a web app. Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the content of the web page is loaded as and when the user scrolls down the page.

(32) Zoom: This option allows you to move your mouse over a product and instantly magnify it, without clicking or opening anything. Available options are:

  • Off
  • Zoom In
  • Zoom Out

(33) Image Mode: Select an image mode from 4 different options. They are:

  • Normal: No grayscale effect.
  • Grayscale and normal on hover: The image becomes gray but when you hover the image color becomes normal.
  • Grayscale on hover: When you hover an image the image will turn gray.
  • Always grayscale: The images will be gray all the time.

(34) Image 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 in a popup when a user takes their mouse over to an image.

Watch the Video: How to Create WooCommerce Product Carousel