Super Products

Super Products module will help you to display your store products on your website. You can style any way with huge option from the styling panel.

Content #

Display Options #

• Category – Here user will select the product category
• View Mode – Here user will select the mode (Grid, Carousel)
• Show – User will select the show option (Vertical, Horizontal)
• Image Height – User will define the Image Height here.
• Column – User will select the number of columns here.
• Number of Posts – User will select the number of posts here.
• Pagination – User will activate or deactivate Pagination here.

Woocommerce Settings #

• Product Type – You will need to select the type of product.
• Order By – User will select the order by. It can be date, sales, price review..
• Order – User will select the order of the post
• Show Ribbon – User will select if the ribbon is needed to show.
• Order – You will need to select the order style here.
• Ribbon Text – You will need to input Ribbon text here
• Show Discount – You will need to select if Discount % needed to show.
• Show Hidden Products – You will need to select if hidden products needed to show.
• Hide Free Products – you will need to select these options if free products needed to hide.

Pagination Settings #

• Alignment – User will select the alignment for here products here.
• Item Size – User will select the item size here.

Title Options #

• Show Title – User will select if the title needed to shoe
• Tag – User will select the tag for the title text.
• Link – User will select the option if the link for the title is needed.

Category #

• Show Category – User will activate the category option for the post.

Content #

• Show – User will select if the content needed to show.
• Length (Words) – User will select the number of words for the post to show.
• Alignment – User will select the Alignment.
• Show Price – User will select the option to show price here.
• Show Star Rating – User will select the option to show Star Rating here.
• Red More Button – User will select the option to show Read More Button here.
• Add to Cart Button – User will select the option to show Add To Cart Button here.
• Cart Button Text – User will input the cart button text here.
• Icon –User will select the icon here
• Icon Position – User will select the icon position here.
• Icon Spacing – User will select the icon spacing here.
• Buttons Position – User will select the Button Position here.
• Alignment – User will select the Button Alignment here.

Style #

Grid Layout Style #

• Gap Between Grids – Here user will input the gap between grids.
• Grid Padding – Here user will input grid padding.
• Content Area Padding –User will input content area padding here.
• Solid Grid Background Color – Here user will select Solid grid Background color.
• Grid Background Color – Here user will select the grid background color.
• Display Grid Shadow – Here user will select if grid shadow is needed to show or hide.
• Border Radius – Here user will input the border radius.
• Border Type – Here user will select the border type.
• Solid Image Overlay Color – Here user will select to activate solid image overlay color.
• Image Overlay Color – Here user will input image overlay color.

Woocommerce Style #

• Ribbon Text Color – Here user will select Ribbon text color
• Ribbon’s Background Color – Here user will select Ribbon Background Color.
• Ribbon Corner Color –Here user will select Ribbon Corner color.

For Discount Display #

• Top Position – You can select the top position here.
• Left Position – You can select the left position here.
• Padding – You can select the Padding here.
• Border Radius – You can select the border radius here.
• Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.
• Date Background Color – User will select the background color of date
• Date Text Color – User will select the date text color here.

       For Category #

• Bottom Position – User will select the bottom position here.
• Left Position – User will select left position here.
• Padding – here you can set the preferable custom padding for the category. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
• Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.
• Category Background Color – User will select category background color here.
• Category Text Color – User will select category text color here.

Pagination Style #

• Margin – You can input the values for the headline margins in the required fields.
• Background Color – User will select the pagination background color here.
• Text Color – User will select the pagination text color here.
• Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.
• Border Radius – Here user will define the radius of the border. It can be pixel or %.

Title Style #

• Margin – You can input the values for the headline margins in the required fields.
• Title Color – User will select the title color here.
• Title Hover Color – User will select the title hover color from here.
• Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.

Content Style #

• Margin – You can input the values for the headline margins in the required fields.
• Content Color – User will select the content color here.
• Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.

Price and Star Rating Style #

• Price Margin – You can input the values for the headline margins in the required fields.
• Price Color – User will select the price color here.
• Previous Price Strike Through Color – User will select the price strike through color here.
• Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.
• Text Background Type – User will select the text background type. It can be color, image, gradient.

Add to Cart Button #

• Margin – You can input the values for the headline margins in the required fields.
• Padding – Here you can set the preferable custom padding for Add to Cart Button. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
• Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.
• Border Radius – Here user will define the radius of the border. It can be pixel or %.
• Text Color – User will select the text color here.
• Background Type – User will select the background type. It can be color, image, gradient.
• Color – User will select the background color here.
• Border Type – Here user can select the type of the border. Various option is available as like solid, dotted, dashed, groove etc..
• Box Shadow – Here you can add some shadow to the box.