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.
Layout
There are two types of layout to choose from.
- List view: Show all the WooCommerce products in a list view.
- Grid type view: Choose this style to showcase WooCommerce products in a grid view.
No matter what type of layout you choose you will be able to configure the following options.
Style
From this section of the customization menu, you will be able to define the style section of your Woo Products block.
- Select columns: Set the number of columns you want to show in the block. (Available for Grid type)
- 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 Products 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 Products block.
- Number of products: Use the slider or use the manual input option to set the number of products.
- Order By: Define the order that you want to show the products by.
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.
Image Settings
Define the customization you want to make for the images found in the product cards in the Woo Products 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 Products. 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
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 Products 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 Products” block. You will be able to define the following attributes. Please keep in mind that the following settings can be applies for both the Normal & Hover state.
- Text Color
- Background
- Padding
- Border
- Border color
- Border width
- Corner
Pagination
With the Woo Products Block, you get pagination settings built-in. Pagination is ordering of the multiple pages typically found in the end section. Pagination allows you to enable/disable the page number below the block section. Which can make navigation easier for your visitors.
You will find the following settings after enabling the pagination settings.
- Enable/Disable Pagination: Enable or disable pagination as per your requirement.
- Alignment: Set the alignment of the pagination text. You can choose from left, middle, and right alignment.
- Typography: Select what typography you would like to use from these settings.
- 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. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg.
- Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
- Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom 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: Lets you apply your preferred capitalization format to the text.
- 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.
- Text Color: Select any color from the wide color palette. Click on the clear button to undo any applied color.
- Background: If you would like to show a specific color to the background to the content of the pagination 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.
- 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.
- Radius: Use the slider to set the radius of the pagination section. You can set a global value or even use the custom option to set different radius values to different sections separately.
- Padding: Use the slider to set the padding values for the pagination section. You can set a global value or even use the custom option to set different radius values to different sections separately.
- Margin: Use the slider to set the margin values of the pagination section. You can set a global value or even use the custom option to set different radius values to different sections separately.
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.