JetWooBuilder

JetWooBuilder Single Product Widgets

This block contains the detailed information about JetWooBuilder Single Product widgets which can be used for creating WooCommerce Single Product page content.

Single Add to Cart

This widget adds the Add to Cart button along with the number of pieces of product for purchasing. The button is needed when one has to add the product to cart.

Style

Button
Note, that the button stylization is available only when the product has a set regular price.
  • Typography — turn the option on to view the typography settings for the button text.

    • Size — define the font size of the button label text.
    • Family — here you can set the font family for the button label text.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the text line.
    • Letter Spacing — here you can set the space between letters.

Switch from Normal to Hover or Disabled modes to set the color scheme and box shadow for the button when in normal state, on mouse hover or when the purchase is disabled for the customers.

  • Text Color - here you can set the color of the button label text using the color picker.

  • Background Color - here you can set the background color to use for the button.

  • Box Shadow - click on the pencil icon to access the shadow option and apply the shadow for the button.

    Shadow Settings:

    • color — here you can set the color for the the shadow (use color picker tool to do it);
    • blur — in this block you can define the blur settings for the shadow;
    • spread — here you can set how large the shadow will be;
    • horizontal — here you can move the shadow horizontally (from right to left);
    • vertical — here you can move the shadow vertically (from top to bottom);
    • position — here you can apply the shadow to the inside of the button or to the outside of it.
  • Border Type - here you can select one of the available border types to use for the button: none, solid, double, dotted, dashed or groove.

    • Width - here you can define the width of the border in px.
    • Color - here you can change the color of the borders.
    • Border Radius - here you can set the border radius for the chosen border to make the border angles more round.
  • Padding - here you can set the padding values for the text placed inside the button.

  • Margin - here you can define the margins applied for the whole button contained in the column.

Quantity Input
Note, that the quantity styles are available for changing only when the product isn’t sold individually (you can check this in Product Data > Inventory, where you need to uncheck the Sold Individually box in order to enable purchasing several of the items).
  • Typorgraphy — turn the option on to view the typography settings for the items number.

    • Size — define the font size of the number.
    • Family — here you can set the font family for the number.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the number.
    • Letter Spacing — here you can set the space between the number characters.

  • Quantity Input Display - here you can set, if you want the number of items field to be displayed in line with the Add to Cart button, or you need it to be displayed in block.

  • Input width - here you can select the width of the quantity input field.

Switch between styling Normal and Focus modes to style up the number of products input field in its normal state or when it is in focus and someone puts numbers into it.

  • Text Color - here you can set the color of the text to use for the number characters.

  • Background Color - in this block you can set the color to use as a background for the quantity field where the numbers are put.

  • Border Color - here you can set the preferable color of the border for the items number for purchasing field in Normal of Focus mode.

  • Border Type - here you need to specify the type of the border to use for the products quantity field.

  • Width - here you can set the needed width to use for the border.

  • Color - here you can specify the color to use for the border.

  • Border Radius - here you can set the border radius for the chosen border to make the border angles more round.

  • Box Shadow - click on the pencil icon to access the shadow option and apply the shadow for the field. The shadow settings are similar for different elements of JetWooBuilder widgets.

  • Padding - here you can select the paddings to use for the products value added into the items quantity field.

  • Margin - here you can set the needed margin values to use for the whole items quantity element.

Description
  • Typography — turn the option on to view the typography settings for the description.

    • Size — define the font size of the description characters.
    • Family — here you can set the font family for the description.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the text.
    • Letter Spacing — here you can set the space between the letters.

  • Text Color - here you can set the color of the text to use for the description.

  • Padding - here you can specify the padding values for the description.

  • Alignment - here you can set the needed alignment (left, center or right).

Price
  • Typography — turn the option on to view the typography settings for the price text.

    • Size — define the font size of the price characters.
    • Family — here you can set the font family for the price.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the price text.
    • Letter Spacing — here you can set the space between the letters.

  • Price Color - here you can select which color you want to use for the price using the color picker tool.

  • Padding - here you can specify the padding values for the description.

  • Alignment - here you can set the needed alignment (left, center or right).

Currency Symbol
  • Color - here you can set the color of the currency symbol shown beside the price value.

    • Typography — turn the option on to view the typography settings for the currency symbol.

      • Size — define the font size of the currency symbol characters.
      • Family — here you can set the font family for the currency.
      • Weight — in this block you can select the suitable font weight.
      • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
      • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
      • Line Height — in this field you can set the height of the currency.
      • Letter Spacing — here you can set the space between the currency characters.

    Vertical Alignment

    Availability

    Switch between In Stock and Out of Stock modes to customize the availability appearance in the case the item is available or if it is out of stock.

    • Color - here you can set the color of the availability element.

    • Typography — turn the option on to view the typography settings for the availability text.

      • Sizev — define the font size of the availability text.
      • Family — here you can set the font family for the availability text.
      • Weight — in this block you can select the suitable font weight.
      • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
      • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
      • Line Height — in this field you can set the height of the availability text.
      • Letter Spacing — here you can set the space between the availability text characters.

    • Padding - here you can specify the padding values for the availability element.

    • Alignment - here you can set the needed alignment (left, center or right).

    Reset Button
    • Typography — turn the option on to view the typography settings for the button text.

      • Size — define the font size of the button text.
      • Family — here you can set the font family for the button text.
      • Weight — in this block you can select the suitable font weight.
      • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
      • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
      • Line Height — in this field you can set the height of the button text.
      • Letter Spacing — here you can set the space between the button text characters.

    Switch between Normal and Hover modes in order to customize the appearance of the Reset button when on hover or in its normal state.

    • Text Color - here you can specify the color to use it for the button text.

    • Background Color - here you can set the color to use for the button as a background for the text.

    • Border Type - here you need to set the border to use for the Reset button. The border specifics and additional features are similar to the ones of the borders described for the elements mentioned above.

    • Border Radius - here you can set the border radius for the chosen border to make the border angles more round.

    • Padding - here you can specify the paddings to use for the button text.

    • Margin - here you can set the margins to use for the button.

    • Variations Select
      • Typography — turn the option on to view the typography settings for the variations text.

        • Size — define the font size of the variations text.
        • Family — here you can set the font family for the variations text.
        • Weight — in this block you can select the suitable font weight.
        • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
        • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
        • Line Height — in this field you can set the height of the variations text.
        • Letter Spacing — here you can set the space between the variations text characters.

      • Input Width - here you can set the input width for the variations element.

      Switch between Normal and Hover modes in order to change the Variations appearance when it is unselected or on mouse hover.

      • Text Color - here you can set the color of the variations text.

      • Background Color - here you can specify the background color of the variations element.

      • Border Type - here you need to set the type of the border to use for the variations. The border specifics and additional features are similar to the ones of the borders described for the elements mentioned above.

      • Border Radius - here you can set the border radius for the chosen border to make the border angles more round.

      • Box Shadow - click on the pencil icon to access the shadow option and apply the shadow for the element. The shadow settings are similar for different elements of JetWooBuilder widgets.

      • Padding - here you can specify the paddings to use for the element.

      • Margin - here you can set the margins to use for the element.

      Variations Title
      • Typography — turn the option on to view the typography settings for the variations title text.

        • Size — define the font size of the variations title text.
        • Family — here you can set the font family for the variations title text.
        • Weight — in this block you can select the suitable font weight.
        • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
        • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
        • Line Height — in this field you can set the height of the variations title text.
        • Letter Spacing — here you can set the space between the variations title text characters.

      • Text Color - here you can set the color of the variation title text.

      • Padding - here you can specify the paddings to use for the element.

      • Margin - here you can set the margins to use for the element.

Single Attributes

This widget is used to display the attributes which are added in the Product > Product Data in the Attributes block.

Content

  • Title Text - here you can input the text to use it as a title for the product attributes.

  • Title Tag - select the title heading tag to apply to the attributes heading.

Style

Title
  • Color - here you can change the color of the title text using the color picker tool.

  • Typography — turn the option on to view the typography settings for the title text.

    • Size — define the font size of the title text.
    • Family — here you can set the font family for the title text.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the title text.
    • Letter Spacing — here you can set the space between the title text characters.

  • Margin - here you can change the margins to use them for the title of the attributes.

  • Padding - input the padding values in order to use the custom paddings for the attributes title.

  • Alignment - here you can set the preferable (right, left, center) alignment for the title text.

Attributes Table
  • Table Width - here you can set the custom width for the attributes table to make it responsive.

Title

  • Color - here you can set the color to use it for the attribute.

  • Typography — turn the option on to view the typography settings for the attribute text.

    • Size — define the font size of the attribute text.
    • Family — here you can set the font family for the attribute text.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the attribute text.
    • Letter Spacing — here you can set the space between the attribute text characters.

    • Background Color - here you can set the needed background color of the attribute text.

    • Border Type - here you can set the border type you want to use for the attribute (solid, dotted, double, dashed, groove, none). The border settings are similar for different elements used in JetWooBuilder.

    • Width - here you can specify the width of the border in px.

    • Color - here you can change the color of the border.

    • Border Radius - here you can apply the border radius to make the angles more rounded and smooth.

    • Padding - input the padding values in order to use the custom paddings for the attributes.

    • Alignment - here you can set the preferable (right, left, center) alignment for the attributes.

    Value
    • Color - here you can change the color of the attribute value.

    • Typography — turn the option on to view the typography settings for the attribute value text.

      • Size — define the font size of the attribute value text.
      • Family — here you can set the font family for the attribute value text.
      • Weight — in this block you can select the suitable font weight.
      • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
      • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
      • Line Height — in this field you can set the height of the attribute value text.
      • Letter Spacing — here you can set the space between the attribute value text characters.

    • Background Color - here you can change the background of the attribute value block.

    • Border Type - here you can set the border type you want to use for the attribute value (solid, dotted, double, dashed, groove, none). The border settings are similar for different elements used in JetWooBuilder.

    • Width - here you can specify the width of the border in px.

    • Color - here you can change the color of the border.

    • Border Radius - here you can set the needed values for the borders in order to make the border angles more round and smooth.

    • Padding - here you can set your own custom padding values in px.

    • Alignment - here you can specify the left, right or center alignment according to your needs.

Single Content

This widget is used to display the content which is added in the Product content block. It has several style settings and allows displaying the already created content.
Note, that in order to display the content using this widget You need to add the content to the product into the content field.

Style

General
  • Text Color - here you can change the color of the item content text.

  • Typography — turn the option on to view the typography settings for the content text.

    • Size — define the font size of the content text.
    • Family — here you can set the font family for the content text.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the content text.
    • Letter Spacing — here you can set the space between the content text characters.

  • Alignment - here you can set the preferable alignment to use for the content (left, center, right, justified).

Single Excerpt

This widget is perfect for displaying the excerpt which is added in the Product Short Description field on the Product page.
Note, that previously to displaying the product description you need to enter the description for the product in the corresponding field on the Product editing page.

Style

General
  • Color - here you can change the color of the product description to the one more suitable.

  • Typography — turn the option on to view the typography settings for the product description text.

    • Size — define the font size of the product description text.
    • Family — here you can set the font family for the product description text.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the product description text.
    • Letter Spacing — here you can set the space between the product description text characters.

  • Alignment - here you can set the preferable alignment to use for the content (left, center, right, justified).

Single Images

This widget makes it simple to add the product featured image to the product page and has stylization options available for setting up.
Note, that before using this widget one needs to upload the featured image for the product on the Product editing page.

Style

Main Image
  • Images Block Width - here you can change the width of the block where the image is shown in percentage for different devices.

  • Margin - here you can set the preferable margins to use for the image on different devices.

  • Border type - here you can set the border to use for the image (solid, dotted, dashed, double, groove or none).

  • Width - here you can set the custom width to apply for the border.

  • Color - set the needed color to use for the border.

  • Box Shadow - here you can apply the shadow for the image container. The shadow settings are similar for all of JetWooBuilder widgets and their stylization elements.

Thumbnails
  • Thumbnails Width - here you can apply the custom width for the product image thumbnails.

  • Padding - in this block you can set the preferable padding values to use for the image thumbnails.

  • Border Type - here you can set the border to use for the image thumbnails (solid, dotted, dashed, double, groove or none).

  • Width - here you can set the custom width to apply for the border.

  • Color - set the needed color to use for the border.

  • Box Shadow - here you can apply the shadow for the image thumbnails container. The shadow settings are similar for all of JetWooBuilder widgets and their stylization elements.

Single Meta

This widget embeds the SKU number, category and tag used for the product to the page, and allows changing the color, typography and alignment for this information.
Note, that before displaying the SKU using this widget one needs to add the SKU value in the Product Data > Inventory. You should also add the categories and the tags for the product before displaying them with the widget.

Style

SKU
  • Color - here you can set the custom color to use it for the SKU unique product value.

  • Typography — turn the option on to view the typography settings for the product SKU text.

    • Size — define the font size of the product SKU text.

    • Family — here you can set the font family for the product SKU text.

    • Weight — in this block you can select the suitable font weight.

    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.

    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).

    • Line Height — in this field you can set the height of the product SKU text.

    • Letter Spacing — here you can set the space between the product SKU text characters.

  • Margin - here you can set the preferable margins to use for the SKU text and value.

  • Alignment - here you can set the preferable alignment to use for the content (left, center, right).

Value
  • Color - here you can set the specific color separately to the SKU value.

  • Typography — turn the option on to view the typography settings for the product SKU value.

    • Size — define the font size of the product SKU value.
    • Family — here you can set the font family for the product SKU value.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the product SKU value.
    • Letter Spacing — here you can set the space between the product SKU value characters.
    Categories
    • Color - here you can set the specific color to use for the categories.

    • Typography — turn the option on to view the typography settings for the product categories.

      • Size — define the font size of the product categories.
      • Family — here you can set the font family for the product categories.
      • Weight — in this block you can select the suitable font weight.
      • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
      • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
      • Line Height — in this field you can set the height of the product categories.
      • Letter Spacing — here you can set the space between the product categories characters.

    • Margin - here you can set the preferable margins to use for the categories.

    • Alignment - here you can set the preferable alignment to use for the categories (left, center, right).

    Link
    • Typography — turn the option on to view the typography settings for the product category links.

      • Size — define the font size of the product category links.
      • Family — here you can set the font family for the product category links.
      • Weight — in this block you can select the suitable font weight.
      • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
      • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
      • Line Height — in this field you can set the height of the product category links.
      • Letter Spacing — here you can set the space between the product category links characters.

    Switch between Normal and Hover modes in order to customize the color of the categories in the normal state or when on mouse hover.

    • Color - here you can set the color to use for the category links on hover or in normal state.

    Tags
    • Color - here you can set the specific color to use for the tags.

    • Typography — turn the option on to view the typography settings for the product tags.

      • Size — define the font size of the product tags.
      • Family — here you can set the font family for the product tags.
      • Weight — in this block you can select the suitable font weight.
      • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
      • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
      • Line Height — in this field you can set the height of the product tags.
      • Letter Spacing — here you can set the space between the product tag characters.

    • Margin - here you can set the preferable margins to use for the tags.

    • Alignment - here you can set the preferable alignment to use for the tags (left, center, right).

    Link
    • Typography — turn the option on to view the typography settings for the product tag links.

      • Size — define the font size of the product tag links.
      • Family — here you can set the font family for the product tag links.
      • Weight — in this block you can select the suitable font weight.
      • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
      • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
      • Line Height — in this field you can set the height of the product tag links.
      • Letter Spacing — here you can set the space between the product tag links characters.

    • Switch between Normal and Hover modes in order to customize the color of the tag links in the normal state or when on mouse hover.

      • Color - here you can set the color to use for the tag links on hover or in normal state.

Single Price

This widget makes it easy to embed the product price and sale price to the Single Product page. One can also customize the prices along with the currency signs.
Note, that You need to set the product price in the Product data > General previously to adding it using this widget.

Style

  • Typography — turn the option on to view the typography settings for the product price.

    • Size — define the font size of the product price.
    • Family — here you can set the font family for the product price.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the product price.
    • Letter Spacing — here you can set the space between the product price characters.

  • Color - here you can change the general color which is applied to the prices.

  • Space Between Prices - use the controls to set the space between the prices (regular and sale price) and make it responsive.

Switch between Regular and Sale modes in order to customize both product prices.

  • Color - here you can change the color to use it for the price.

  • Text Decoration - here you can add the text decorations for the prices (none, line through, e.g., when the regular price is no more active, and underline to make the price stand out.

  • Size - here you can set the needed size for the prices to make them responsive.

  • Font Weight - here you can specify the font weight to use for the prices.

Surrency Sign
  • Color - here you can specify the color to use for the currency sign only.

  • Size - here you can set the size to use for the currency sign to make it responsive.

  • Vertical Alignment - here you can change the currency sign alignment to position it beside the price value.

Switch between Regular and Sale mode in order to customize both sale and regular prices.

  • Color - here you can change the color of the currency sign.

  • Size - use the controls in order to set the size of the currency sign and make it responsive.

Single Rating

This widget is invaluable when adding the product rating to the Single Product page and styling it up according to one’s vision.
Note, that in order to view how the style changes look, there must be at least 1 review added to one of the products.

Style

  • Elements Display - here you can specify if you want the stars and review link to be shown in line or as a block.

  • Alignment - here you can set the rating to be shown in the center, justified, or align it right or left.

  • Stars

    Switch between All and Rated modes in order to customize the appearance of both.

    • Color - here you can change the color of the stars in the rating.

    • Font Size - in this block you can change the size of the stars.

    • Margin - set the custom margins to apply for the stars.

    • Reviews Link
      • Typography — turn the option on to view the typography settings for the review link.

        • Size — define the font size of the review link.
        • Family — here you can set the font family for the review link.
        • Weight — in this block you can select the suitable font weight.
        • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
        • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
        • Line Height — in this field you can set the height of the review link.
        • Letter Spacing
        • — here you can set the space between the review link characters.

      Switch between Normal and Hover modes in order to make changes in the appearance of the Review links on mouse hover and in its normal state.

      • Color - here you can specify which color you want to apply for the review link.

      • Margin - in this block you can set the custom margins to use for the review link.

Single Reviews Form

This widget allows displaying the reviews for the product along with the field for adding a new review. The Single Reviews Form widget is necessary when one wants the customers to be able to leave reviews.
Note, that at least 1 review needs to be added to the product for you to be able how the advanced appearance changes look.
Pay attention, that the widget has no stylization settings besides the Advanced ones (the overview of the Advanced settings is available in the Advanced Settings documentation block).

Single Sale Badge

This widget makes it simple to add the Sale badge to the product’s page. Note, that one should set the Sale price in Products > Product Data Sale Price field to enable this functionality.
Note, that to be able to view how the style settings affect the widget’s appearance one needs to add a Sale price for the product in the corresponding field via Product Data > General.

Style

  • Color - here you can change the color to use it for the Sale badge text.

  • Background - here you can change the color of the Sale badge background.

  • Typography — turn the option on to view the typography settings for the Sale badge text.

    • Size — define the font size of the Sale badge text.
    • Family — here you can set the font family for the Sale badge text.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the Sale badge text.
    • Letter Spacing — here you can set the space between the Sale badge text characters.

  • Border Type - here you can change the appearance of the Sale badge border by selecting one of the border types.

  • Border Radius - here you can change the border radius in order to make the angles more smooth and rounded.

  • Box Shadow - here you can apply the shadow to use for the badge.

  • Padding - here you can apply custom padding in order to use it for the element.

  • Alignment - in this block you can select the alignment to use for the sale badge (right, left, center).

Single Sharing

This widget adds social icons for the product. Please, note that you need to install and activate the JetPack plugin for WordPress (it is completely free and available at wordpress.org) and set the icons for the JetWooBuilder templates and Product pages. The icons can’t be styled.

The widget has only Advanced settings the overview of which is available in the Advanced Settings. documentation block.

Single Tabs

This widget provides the opportunity to place the reviews and product description into tabs, which can be opened on click. This widget allows to effectively use the space of the Single Product page.
Note, that the content displayed in the tabs should be added to the product previously to displaying it.

Style

General
  • Tabs Position - here you can select the most preferable position for the tabs (top, left or right).

  • Tabs Items Display - here you can set the width to use for the Tab containers.

  • Tabs Alignment - in this block you can select the alignment to use for the tabs (right, left, center, stretch).

Tabs Nav
  • Background Type - here you can set the preferable background type to use for the tab controls (boxes). It can be Classic or Gradient background.

    Classic Background Type

    • Color - here you can set the specific color to use for the tab controls.

    • Image - click the image box and upload an image in order to use it as a background for the tab controls.

    • Position - here you can position the image used for the background according to your needs.

    • Attachment - here you can make the image fixed or allow it to be scrolled.

    • Repeat - here you can allow the image to be repeated horizontally, vertically, tiled or restrict repeating.

    • Size - select Cover, Contain or Auto image sizing in order to make it fitted into the tabs controls container.

    • Gradient Background Type

    • Color - add the first color to use for the gradient background of the tab controls.

    • Location - here you can change the location of the first gradient color.

    • Second Color - add the second color to use for the gradient background.

    • Location - here you can change the location of the second gradient color.

    • Type - here you can change the gradient location from linear to radial.

    • Angle - if the gradient type is lineer, you can change the angle to use for it.

    • Position - if the gradient is radial, here you can change the position of its center to the preferable one.

    • Padding - here you can set the padding for the tabs content.

    • Border type - here you can change the border type to the one needed (solid, dotted, dashed, double, groove or none).

    • Width - here you can set the width of the border in px.

    • Color - here you can choose the color to use for the border.

    • Border Radius - here you can apply a radius for the border andles to make them more smooth.

    Tabs Nav Item
    • Typography — turn the option on to view the typography settings for the tabs nav text.

      • Size — define the font size of the tabs nav text.
      • Family — here you can set the font family for the tabs nav text.
      • Weight — in this block you can select the suitable font weight.
      • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
      • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
      • Line Height — in this field you can set the height of the tabs nav text.
      • Letter Spacing — here you can set the space between the tabs nav text characters.

    • Item Text Alignment - here you can change the text alignment in the tabs (left, center or right).

    • Padding - here you can apply the paddings for the tabs controls content.

    • Margin - here you can set the margins for the tabs nav elements.

    • Border Type - here you can set the type of the border to use (solid, dotted, double, dashed, groove or none).

    • Border Width - here you can specify the border width in px.

    • Border Color - here you can set the color of the borders to use.

    • Border Radius - here you can apply the radius for the border angles to make them more rounded and smooth.

    Switch between Normal, Hover and Active modes to change the appearance of the tabs on mouse hover, when they are opened or inactive.

    • Text Color - here you can apply the borders to use for the tabs nav items.

    • Background - here you can set the color to use for the tab nav items.

    • Box Shadow - here you can set the shadow for each of the item nav boxes.

    Tabs Content
    • Background Type - here you can set the preferable background type to use for the tab item content box. It can be Classic or Gradient background. The settings are similar to the ones for the backgrounds used for another JetWooBuilder elements.

    • Padding - here you can define the specific padding values to use for the tabs content.

    • Border Type - here you can specify the suiting border type to use for the tabs content (solid, dotted, double, dashed, groove or none).

    • Width - here you can set the width to use for the border in px.

    • Color - here you can specify the color to use for the border.

    • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.

Single Title

This widget allows adding the product title to the Single Product page. It adds the title set on the Product page in the Title field and provides stylization settings for it.

Style

General
  • Color - here you can specify the color to use for the product title.

  • Typography — turn the option on to view the typography settings for the title text.

    • Size — define the font size of the title text.
    • Family — here you can set the font family for the title text.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the title text.
    • Letter Spacing — here you can set the space between the title text characters.
  • Margin - here you can specify the margins to use for the product title text.

  • Padding - here you can apply the custom padding values in order to position the title.

  • Alignment - here you can specify the alignment of the title (left, center, right).

Single Upsells

This widget adds the products which may also be needed by the customer when he purchases the product shown on the Single Product page. The upsell products can be set in Linked Products Upsells field available in Products > Product Data block.

Style

Title
  • Color - here you can change the color of the widget title.

  • Typography — turn the option on to view the typography settings for the title text.

    • Size — define the font size of the title text.
    • Family — here you can set the font family for the title text.
    • Weight — in this block you can select the suitable font weight.
    • Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
    • Style — in this block you can choose from the dropdown menu the style of the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
    • Line Height — in this field you can set the height of the title text.
    • Letter Spacing — here you can set the space between the title text characters.

  • Margin - here you can specify the margins to use for the widget title text.

  • Alignment - here you can specify the alignment of the widget title (left, center, right).