WordPress Carousel Pro

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

Style Settings (Woo Product Carousel)

Style Settings -Woo Product Carousel
Style Settings -Woo Product Carousel

(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 Filter Products option this option will appear. Set Which Products 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 which associates with one or more terms
  • AND: Show Products which matches all terms
  • NOT IN: Show Products which don’t match the terms

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

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

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

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

B. Bottom: Product Content will display Below 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. Top Content Below Product Image:

Top Content Below Product Image
Top Content Below Product Image

B. Bottom Content Top Product Image:

Bottom Content Top Product Image
Bottom Content Top 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
Right Content Left Product Image

E. Overlay Content:

Overlay Content
Overlay Content

(6.1) Content position: When a user selects Content Position Overlay, some new options will appear. They are:

(6.2) Overlay Content Visibility: You can set Overlay Content visibility in two ways. They are: 

  • Always: Check Above E.Overlay content to see how it looks.
  • On Hover:  Check below to see how it display on the screen:

(6.3) Overlay Background Color: Set a background color for overlay as you wish.

(7) 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 0 px.

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

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

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

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

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

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

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

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

(16) Rating Star Color: Set Color of product Rating stars.

(17) 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 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.

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

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

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

(21) 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 size also. The default value is the original uploaded image.

    There will show different available image cropping sizes in the option to choose (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

Set 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 be 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.

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

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

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

(25) 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 set depends on the column width. By default, this option is OFF.

(26) 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.

(27) 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.

(28) 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

(29) 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, like:

  • Off: No grayscale effect
  • Gray and normal on hover: The Product image becomes gray but when you hover the image color becomes normal as it.
  • Gray on hover: When you hover a product the image will turn into gray.
  • Always gray: The product images will be gray all the time.

(30) 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. 

How to Create WooCommerce Product Carousel

Tags