Elementor Connector for WooCommerce Brands

WooCommerce Brands is a plugin for WooCommerce that allows shop owners to assign products to one (or more) brands. For more information on how the WooCommerce Brands plugin works, please consult its documentation here.

Elementor Connector for WooCommerce adds dedicated widgets for the styling and placement of WooCommerce Brands on the single product page and regular pages (depending on widget context).

In order to use these widgets, you’ll need the following:

• WooCommerce
• WooCommerce Brands
• Elementor
• Elementor Pro (For adding Brand elements to custom single product templates)
• Elementor Connector

The Brand Index widget shows an A-Z index of all brands with links to their archive pages.

Content Tab 

1. Show Scroll to Top: This control enables or disables the ‘Scroll to Top’ button. This button allows users to quickly navigate to the top of the page. 
2. Show Empty Brands: This control allows users to decide whether or not to display brands that currently have no associated products.

Style Tab

1. Hide Index: This control allows users to hide or show an alphabetical A-Z index for the brands.
2. Alignment: This control allows users to align the A-Z index to either the left or the right side of the page.
3. Background: This control allows users to customize the background of A-Z brand indexes that both show as available / unavailable (due to products being assigned to them or not).
4. Opacity: This control allows users to adjust the opacity of unavailable indexes.
5. Border, Border Radius, Margin, Padding: These controls allow users to customize the appearance and spacing around the A-Z index and the list of brands.
6. Fonts: This control allows users to customize the typography of the index, list of brands, and ‘Scroll to Top’ button.
7. Color: This control allows users to customize the color of the index, list of brands, and ‘Scroll to Top’ button.

The Brand Index widget shows all products in a certain brand.

Content Tab 

1. Products Per Page – This control allows you to set the number of products that will be displayed on each page. You can choose any number between 1 and 100. By default, 12 products will be displayed per page.
2. Columns – This control allows you to set the number of columns in which the products will be displayed. You can choose any number between 1 and 6. By default, the products will be displayed in 4 columns.
3. Order By – This control allows you to set the attribute by which the products will be ordered. The options are ‘Title’, ‘Slug’, ‘Author’, ‘Date’, ‘ID’, and ‘Random’. By default, products will be ordered by ‘Title’.
4. Order – This control allows you to set the order direction for the products. The options are ‘Ascending’ and ‘Descending’. By default, the order direction is set to ‘Ascending’.
5. Brand – This control allows you to select one or more brands to display their linked products. You can select multiple brands at once. The available brands are dynamically filled based on the brands you have in your WooCommerce store under Products > Brands.

Style Tab 

Products Section

1. Columns Gap – A slider control that adjusts the gap between the product columns. Default value for mobile is 20px. 
2. Rows Gap – A slider control that adjusts the gap between the product rows.  
3. Alignment – A choice control that allows users to align the products to the left, center, or right.  
4. Image Border – A control that allows users to set the border properties for the product images. Default value is ‘none’. *
5. Image Border Radius – A control that allows users to set the border radius for the product images. Default value is ‘0’. *
6. Title Color – A color control that allows users to set the color for the product title. *
7. Title Typography – A typography control that allows users to set the typography for the product title. *
8. Title Spacing – A control that allows users to set the spacing around the product title. Default value is ‘0’. *
9. Star Color – A color control that allows users to set the color for the product star rating.  *
10. Empty Star Color – A color control that allows users to set the color for the empty stars in the product rating. *
11. Star Size – A control that allows users to set the size for the stars in the product rating. Default value is ‘0’. *
12. Rating Spacing – A control that allows users to set the spacing around the product rating. Default value is ‘0’. *
13. Price Color – A color control that allows users to set the color for the product price.  *
14. Price Typography – A typography control that allows users to set the typography for the product price.  *
15. Regular Price Color – A color control that allows users to set the color for the regular product price.  This control is only visible if the product has a regular price.*
16. Regular Price Typography – A typography control that allows users to set the typography for the regular product price.  This control is only visible if the product has a regular price. *
17. Button Text Color – A color control that allows users to set the color for the product button text. *
18. Button Background Color – A color control that allows users to set the background color for the product button. *
19. Button Border Color – A color control that allows users to set the border color for the product button. *
20. Button Typography – A typography control that allows users to set the typography for the product button text. *
21. Button Border Radius – A control that allows users to set the border radius for the product button. Default value is ‘0’. *
22. Button Text Padding – A control that allows users to set the padding around the product button text. Default value is ‘0’. *
23. Button Spacing – A control that allows users to set the spacing around the product button. Default value is ‘0’. *
24. View Cart Text Color – A color control that allows users to set the color for the ‘View Cart’ text. *
25. View Cart Typography – A typography control that allows users to set the typography for the ‘View Cart’ text. *
26. View Cart Spacing – A control that allows users to set the spacing around the ‘View Cart’ text. Default value is ‘0’. *

Box Section

1. Border Width – A dimensions control that sets the width of the border around the box. The units can be ‘px’, ‘%’, ’em’, ‘rem’, ‘vw’, ‘custom’.
2. Border Radius – A slider control that sets the border radius of the box. The units can be ‘px’, ‘%’, ’em’, ‘rem’, ‘custom’. The range is from 0 to 200px.
3. Padding – A responsive dimensions control that sets the padding around the box. The units can be ‘px’, ‘%’, ’em’, ‘rem’, ‘vw’, ‘custom’. The range is from 0 to 50px.
4. Shadow – A group control that sets the box shadow in the normal state.
5. Background Color – A color control that sets the background color of the box in the normal state.
6. Border Color – A color control that sets the border color of the box in the normal state.
7. Shadow Hover – A group control that sets the box shadow in the hover state.
8. Background Color Hover – A color control that sets the background color of the box in the hover state.
9. Border Color Hover – A color control that sets the border color of the box in the hover state.

Pagination Section

1. Pagination Spacing: This control adjusts the spacing for the pagination. It uses a slider control type, and you can specify the size in px, em, rem, or custom units.
2. Show Pagination Border: This switcher control allows you to toggle the border of the pagination on or off. By default, the border is shown (‘yes’).
3. Pagination Border Color: This color control changes the color of the pagination border. It only appears if the ‘Show Pagination Border’ control is set to ‘yes’*.
4. Pagination Padding: This slider control adjusts the padding for the pagination. The size can be specified in px, %, em, rem, vw or custom units. For em, the minimum value is 0, maximum is 2, and it increases in steps of 0.1.
5. Pagination Typography: This group control adjusts the typography of the pagination.
6. Pagination Style Tabs: These tabs allow you to adjust the Link Color and Background styles of the pagination in three different states: Normal, Hover, and Active.

Sale Flash Section

1. Sale Flash: This switcher control allows you to show or hide the sale flash. The default state is ‘yes’ (shown).
2. Text Color: Changes the color of the text within the sale flash.*
3. Background Color: Changes the background color of the sale flash.*
4. Typography: Adjusts the typography of the text within the sale flash. 
5. Border Radius: Adjusts the border radius of the sale flash. You can specify the size in px, %, em, rem, or custom units.*
6. Width: Adjusts the width of the sale flash. The size can be specified in px, %, em, rem, vw or custom.*
7. Height: Adjusts the height of the sale flash. The size can be specified in px,  em, rem, vw or custom.*
8. Position: Sets the horizontal position of the sale flash, either to the left or the right.*
9. Distance: Adjusts the distance of the sale flash from the edge of the product. The size can be specified in px,  em, rem, or custom units. For pixels, the range is -20 to 20; for em, the range is -2 to 2.* 

This widget shows a single brand’s image with a link to its archive page. This only works on single product pages. Note that showing brands on the single page with this widget will only show one brand and not all (assuming the product is linked to multiple brands).

Content Tab

1. Width – This control adjusts the width of the product brand image. It has a slider type control that allows you to choose the width in either  px,  %, or em. The minimum value is 0. The maximum value for pixels can be customized up to 1000, and for percentage, it’s 100. The default value is 64px. Please refresh the page to see image size updates.*
2. Height – Similar to the Width control, this adjusts the height of the product brand image. The minimum value is 0. The maximum value for pixels can be customized up to 1000, and for percentage, it’s 100. The default value is 64px. Please refresh the page to see image size updates.*
3. Alignment – This control allows you to align the product brand. The options available are left, center, and right. The default alignment is to the left.
4. Select Product – This control allows you to select a specific product. If left blank, it will be used on the single product page.

Style Tab

1. Border –  This control allows you to adjust the border of the product brand image. You can customize the border type, width, and color.
2. Border Radius –  This control allows you to adjust the border radius of the product brand image. You can set the top, right, bottom, and left radius in either px, %, or em.
3. Margin –  This control allows you to adjust the margin of the product brand image. You can set the top, right, bottom, and left margin in either  px, %, or em.
4. Padding –  This control allows you to adjust the padding of the product brand image. You can set the top, right, bottom, and left padding in either  px, %, or em.

This widget adds all brand names to the single product page as meta information.

Style Tab

1. Background –  Set the background of the brand meta using classic or gradient options.
2. Border –  Modify the border of the brand meta by adjusting its type, width, and color.
3. Border Radius –  Control the border radius of the brand meta.*
4. Margin –  Adjust the margin around the brand meta.*
5. Padding –  Set the padding inside the brand meta.*
6. Fonts –  Customize the typography of the brand meta including font family, size, weight, transform, style, decoration, line-height, and letter spacing.
7. Color Text –  Determine the text color for the brand meta.
8. Color Links –  Configure the color of links within the brand meta for both default and hover states –
   1.    Default –  Set the regular color for links.   
   2.    Hover –  Define the hover color for links.

This widget shows a list of all product brand thumbnails with brand descriptions and links to their archives.

Content Tab

1. Columns –  Determines the number of columns to display. You can choose a number between 1 and 6. Default is 4.
2. Show Empty –  This switcher control allows you to decide whether to display brands that don’t have any products. Default is set to ‘Yes’.
3. Order By –  This control allows you to sort the displayed brands based on ‘Title’, ‘Slug’, ‘Author’, ‘Date’, ‘ID’, ‘Random’, or ‘Name’. Default is ‘Title’.
4. Exclude –  Allows you to exclude certain brands from being displayed. You can select multiple brands from the dropdown list.
5. Number –  Controls the number of brands to display. You can choose a number between 1 and 100. Default is 12.

Style Tab

Thumbnails Section

1. Border –  Adjust the border of the brand thumbnails.
2. Border Radius –  Modify the border radius of the brand thumbnails. This control will only appear if the border is not set to ‘none’ or empty.*
3. Padding –  Set the padding inside the brand thumbnails.
4. Minimum Height –  Define the minimum height of the brand thumbnails. You can choose a value between 1px and 1000px.

Description Section

1. Alignment –  Set the alignment of the brand description text. You can choose ‘Left’, ‘Center’, or ‘Right’.
2. Margin –  Adjust the margin around the brand description text.*
3. Padding –  Set the padding inside the brand description text.*
4. Fonts –  Customize the typography of the brand description text.
5. Color –  Set the color of the brand description text.

This widget shows a list of all product brand thumbnails with links to their archives.

Content Tab

1. Columns – Determines the number of columns to display. You can choose a number between 1 and 6. Default is 4.
2. Show Empty – This switcher control allows you to decide whether to display brands that don’t have any products. Default is set to ‘Yes’.
3. Order By – This control allows you to sort the displayed brands based on ‘Title’, ‘Slug’, ‘Author’, ‘Date’, ‘ID’, ‘Random’, or ‘Name’. Default is ‘Title’.
4. Exclude – Allows you to exclude certain brands from being displayed. You can select multiple brands from the dropdown list.
5. Number – Controls the number of brands to display. You can choose a number between 1 and 100. Default is 12.

Style Tab

1. Border – Adjust the border of the brand thumbnails.
2. Border Radius – Modify the border radius of the brand thumbnails. This control will only appear if the border is not set to ‘none’ or ’empty’.*
3. Padding – Set the padding inside the brand thumbnails.*
4. Minimum Height – Define the minimum height of the brand thumbnails. You can choose a value between 1px and 1000px.