WooCommerce Product Meta add-on with options for styling product category information, product tags and SKU. In addition, using this add-on, you can add some text before or after each of the presented entities.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
In the Content section, you can manage several basic settings of the WooCommerce Product Meta such as view types, separator, captions.
Product Meta
- View – select one of the available display types: Table, Inline.
- Separator – the toggle to enable/disable the separator. When this option is enabled, there are two types of separator available: Text(a field for entering text or character) and Icon(allows you to choose an icon from the icons library or upload your own SVG).
Captions
- Tag Single – a text field for entering the caption of the single tag.
- Tag Plural – a text field for entering the caption of plural tags.
- Category Single – a text field for entering the caption of the single category.
- Category Plural – a text field for entering the caption of plural categories.
- SKU – a text field for entering the caption of SKU.
- Missing – a text field for entering the caption for the case when SKU is missing.
Style tab
On the style tab, you can manage the element styles of the WooCommerce Product Meta widget like background, color, borders, padding/margin, etc.
Product Meta/Product Meta Captions
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
- Space Between – specify the space between meta text in different units(px, %) for desktops, tablets, or phones
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The product meta style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Caption Color – specify the caption text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Separator
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The caption style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
