Qubely

Woo Carousel

This block helps you showcase your WooCommerce products with advanced customization options. Once you add it to your post/page, you will find the following settings.

Style

From this section of the customization menu, you will be able to define the style section of your Woo Carousel block.

  • Card Space: Define the space between the cards using the slider or you can also set the space using the manual input option. (Available for Grid Type)

Query

  • Product Status: Define the status of the Woo Carousel block. You can choose products to show that is featured, on sale.
  • Product by Categories: Using WooCommerce settings you have the option to set which product falls into what category. From this dropdown menu, you have the option to choose which category of products you want to show in the Woo Carousel block.
  • Order By: Define the order that you want to show the products by.
  • Number of products: Use the slider or use the manual input option to set the number of products.

Product Card

From this section of the customization option, you will be set the design and attributes for the product cards.

  • Content Alignment: You can choose the alignment you want to set. You can choose from the top, middle and bottom.
  • Card Padding: Define the padding for the cards using the slider. If you want, it is also possible to set the padding using the manual option.
  • Info Padding: From this settings option, you will be able to set the padding attributes for the information found in the product cards.
  • Show Arrow Navigation: Enable/disable the arrow navigation options for the carousel.
  • Show Dot Navigation: Choose if you want to toggle on or off the dot navigation options for the carousel.
  • Autoplay: Autoplay features automatically play the carousel when a user navigates to the carousel block.
  • Number of Columns: Define the number of columns you want to show in the carousel. You can use the slider to set the number manually using the text box. This is a mobile responsive feature so you can set different dimensions for different types of screens.
  • Gutter: Select the value of the gap between each product cards found in the Woo carousel block.

Arrow Settings

  • Navigation Style: Select the navigation arrow style you want to show for the carousel block.
  • Horizontal Position: Define the exact position for the arrow key in the horizontal position using the slider or the manual input option.
  • Vertical Position: Use the slider to set the position of the arrow in the vertical position. You can also set it manually using the box.
  • Shape Size: Set the shape of the box surrounding the arrow
  • Arrow Size: This slider lets you define the arrow size of the carousel block.

  • Normal/Active/Hover: Configuration options for defining attributes for the normal/active/hover state of the pagination section. You can set the text color, background color, and fill color.
  • Navigation Color: Select any color from the wide color palette. Click on the clear button to undo any applied color.
  • Navigation Shape Color: Selecting this will only set a solid color for your image overlay. From the Fill Color option, you can choose from a wide range of colors.
  • Border: Set a border around your arrow sign. Predefined borders include Solid, Dotted, Dashed, and Double.
  • Navigation Corner: Use the slider to set the navigation border corner for the arrow keys. You can either use the slider or set the corner radius value manually.

Image Settings

Define the customization you want to make for the images found in the product cards in the Woo Carousel block. You will be able to set

  • Image Width: Set the width value for the image found inside the product cards. You can select from predefined values such as small, medium, large, or set a custom value.
  • Image height: Define the image height values for the images found inside the product cards.
  • Image Radius: From this section of the settings, set a radius value for the images of the product cards.


Ratings:

This portion of the settings menu enables you to define the ratings for the Woo Carousel. Below is a list of the things that you will be able to customize.

  • Enable Show Ratings: Use the toggle button to enable/disable the show rating option.
  • Color: Define the color of the rating’s stars using the color picker.
  • Stars Size: Use the slider to set the start size to your liking. You can also opt-in for the manual input option.
  • Spacing: You will be able to set the spacing between the rating’s stars using the slider. You can also do it manually using the input box option.
  • Show Ratings Count: Enable if you want to show a number ratings count beside the rating stars.
  • Count Spacing: Define the count spacing between the numbers of the ratings.

Typography

Like all Qubely blocks, you have the option to define the typography of the respective block. You will be able to set the typography of the following parts of the Woo Carousel block.

  • Title
  • Price
  • Discount
  • Button

For defining the typography you will be able to set the following options.

  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list.
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: This Lets you apply your preferred capitalization formate to the text.

Colors

You can choose the color for the title and discount text using the color picker from these settings. 

Spacing

If you want to define the spacing between the title and the price text you can do that from these settings. Use the slider or input the numbers manually as to your liking.

Button

Define the customized options you want to set for the button in the “Woo Carousel” block. You will be able to define the following attributes. Please keep in mind that the following settings can be applied for both the Normal & Hover state.

  • Text Color
  • Background
  • Padding
  • Border
  • Border color
  • Border width
  • Corner

Design

  • Background: If you would like to show a specific color to the background to the content of the team member details section you have the option to do that from here. You can choose 
  • Color: Selecting this will only set a solid color for your image overlay. From the Fill Color option, you can choose from a wide range of colors.
  • Gradient Type – Linear: A linear gradient applies the gradient by an axis. It’s a linear line. The effect is applied with a Gradient Angel, which defines the starting point. And two colors applied at two ends. Color 1 starts at the defined angle point and Color 2 starts after the Color 1 endpoint.
  • Clear: Lets you reset the existing gradient effect. You can use it to start over. 
  • Border: Set a border around your content. Predefined borders include Solid, Dotted, Dashed and Double.
  • Corner: This slider lets you configure the corner radius of each post grid blocks. There is a global option to set every corner with the same value or you can select each individual corner with a separate value.
  • Padding: To set the Padding of the icon list, you can use the Padding function. You can apply the same value to all the corners by choosing the global option whereas selecting the Custom option will let you set a different value for each corner. Also, it’s a responsive feature that means you can apply different values for different device types.
  • Box-Shadow: You can apply shadow to the background using this feature. Enabling the feature will present you with the following options:
  • Color: Lets you choose the color of the shadow.
  • X: Lets you define the length of the shadow of X-axis.
  • Y: Lets you define the length of the shadow of Y-axis.
  • Blur: Lets you control the blurriness of the shadow.
  • Spread: Lets you control how far the shadow will spread.
  • Inset: Enable this feature if you want the shadows to be drawn inside the border, above the background, but below content.

Advanced

This section of the customization settings lets you override the current styling of this particular block.

Additional CSS Classes: You might need to name a block in order to make custom modifications in the future, this is the field where you define the name.

Was this helpful?

Yes No