Product Properties Description

General information about the plugin #

The Product Properties Description plugin by Develux provides additional functionality for your online store, enhancing the standard product card and product page capabilities.

In all online stores built on WooCommerce, product cards are displayed on the following pages:

• Catalog
• On the product page (Upsells)
• On the cart page (Cross-sells)

If your WooCommerce theme has not modified the standard generation of product cards and pages, the full functionality of the plugin will be available. Otherwise, only part of its features will be accessible.

With this plugin, you can perform the following actions:

1. Style additional product descriptions that will be displayed in the product card
2. Display additional informational elements in various places on the product card via the Info Items
3. Create your own library of additional information elements

Plugin compatibility #

The plugin is designed to provide additional functionality for your online store built on WooCommerce. It is not compatible with other e-commerce platforms. Our plugin works correctly with WordPress themes developed for WooCommerce, following all requirements and recommendations of the WooCommerce/WordPress developer guidelines.

Important! Our plugin uses standard WooCommerce/WordPress hooks and filters. If your theme or other plugins modify the default behavior of these hooks/filters, the plugin may not function correctly!

Important! Our plugin uses the standard jQuery/jQuery UI library. If your theme or other plugins modify or disable these libraries, the plugin may not function correctly.

Installation and configuration #

The plugin is installed using the standard method provided in WordPress.

Go to the Plugin > Installed Plugins page in the admin panel.

Click ‘Add New Plugin‘ > ‘Upload Plugin’ button and upload ZIP. archive

After the plugin installation, it will be ready for use immediately. Additionally, you will receive ready-to-use elements in the label and timer library after installation.

Video instruction: Installation

Product Properties Settings #

In the Product Properties Settings, you set the general styling for the product property list. These styles will be applied to all properties/lists displayed on the product cards.

Text Size Unit – defines the measurement units used for text size

• px is a fixed unit of measurement that does not scale based on the user’s settings or parent elements. The font size is always equal to the specified pixel value, regardless of other factors.
• em is a relative unit based on the font size of the parent element. 1em equals the font size of the parent.
• rem is relative to the root font size instead of the parent element. It is more consistent than em since it doesn’t depend on nesting.

Common Padding – defines the space inside an element, between the content and its border

Common Margin Bottom – defines the amount of space between the element and the next element underneath it

Common Gap – sets the distance between the elements

Property Font Size – sets the text size for the property

Property Font Weight – sets the text weight for the property

Property Style – sets the text style (normal or italic) for the property

Property Font Color – sets the property font color

Value Font Size – sets the text size for the value

Value Font Weight – sets the text weight for the value

Value Style – sets the text style (normal or italic) for the value

Value Font Color – sets the value font color

Collapse after items – specifies whether a collapse is needed and after which element it should occur

Collapse Icon Size – sets the icon size for the collapse

Collapse Font Color – sets the ‘plus’ color in the collapse

Collapse BG Color – sets the background color for the collapse

Collapse Size – sets the collapse’s size

Collapse Margin Top – sets the outer space between the container top and the collapse

Collapse Margin Bottom – sets the outer space between the collapse and the container bottom

Collapse Border Radius – sets the roundness of the collapse’s corners

Collapse Border Width –  sets the width of the collapse’s border

Collapse Border Color – sets the color of the collapse’s border

Collapse border style – sets the style of the collapse border

Where to display properties – allows to display properties after card or after product title

How to display properties – allows to display properties in a row or a column

The Meta Box functionality, which is placed on the product creation page #

On the WooCommerce product creation page, our plugin provides an additional meta box where you can configure the following elements that will be applied to the product you are currently working on:

Creating and styling an additional description for a product #

Using the ‘Add Property‘ button, you can create the required number of fields for product properties.

Upload icon – used to add an icon for a property item

Property – a field for the property name

Value – a field for the property value

Stylization of product properties #

To style product properties for a specific product, you need to go to ‘Properties styling’ mode and click the ‘Use this styles’ check box.

The styling tools are the same as the Product Properties settings (See the ‘Product Properties‘ section in the WooCommerce Settings)

Video instruction: Properties Styling

Creating and styling unique info items for a product #

Info Items allow you to place additional informational elements.

There are five tabs, each responsible for different location of the informational elements.

Above card info items allows to place information block above card

Before title info items allows to place information block before title

After title info items allows to place information block after title

After price info items allows to place information block after price

After card info items allows to place information block after card

For stylization info items, click ‘Info item styles’ tab and turn on ‘Use this Info Items’ checkbox

Property text styles

Font Size – sets the text size

Font Weight – sets the text weight

Style – sets the text style (normal or italic)

Font Color – sets the text color

Common repeater blocks styles

Repeater Icon Width – sets the icon width in repeater

Repeater-2 Icon Width – sets the icon width in repeater-2

Margin Left – sets the outer space on the left side of an element, pushing it away from adjacent elements

Margin Bottom – sets the outer space below an element, pushing it away from elements under it

Margin Top – sets the outer space above an element, pushing it away from elements above it

List padding – sets the inner space between the list container’s edges and its content, affecting the spacing inside the list

List gap – sets the space between list items

Above & After Product Card Displaying

Show before (On Hover) – the element is shown when the user hovers over a specific area or element

Show before (Always Visible) – the element is displayed at all times, regardless of user interaction

Show before (Above Product) – the element is positioned above a specific product or item

Show before (Higher Position) – similar to the above, but this refers to the placement of the element at a higher position relative to other content on the page

Show after (On Hover) – the element is shown when the user hovers over a specific area or element

Show after (Always Visible) – the element appears at all times and it is shown after product card

Show after (Absolute Positioning) – the element is positioned using CSS absolute positioning, meaning it is placed relative to its nearest positioned ancestor, not the normal document flow

Show after (Static Positioning) – the element will appear after other elements based on the natural flow of the page

Backgrounds

Above Card / After Title Background– sets the color of background for the Before / After Item Repeater

Above Card / After Title Background Opacity – sets the transparency level of the background color

Tooltip Styles for Repeater

Tooltip Background – sets the color of tooltip background

Tooltip Width – sets the width of tooltip background

Tooltip Padding – sets the inner space around the text in the tooltip

Tooltip Border Color – sets the border color for tooltip

Tooltip Border Width – sets the border width for tooltip

Tooltip Border Style – sets the border style of the tooltip

Tooltip Border Radius – sets the roundness of the tooltip’s corners

Tooltip Shadow X / Tooltip Shadow Y – sets vertical and horizontal position of the shadow

Tooltip Shadow Dispersion – sets the density of the shadow

Tooltip Shadow Opacity – sets the level of transparency for the shadow

Tooltip Shadow Color – sets the color for the tooltip shadow

Card Preview tab displays all changes made to the product card and allows you to review them once before updating.

Video instruction: Creating and styling unique info items

 Product Card Properties #

 Product Card Properties allows you to create additional info items in different locations (Above card info items, Before title info items, After title info items, After price info items, After card info items) and assign them to the multiple products at once.

You can use:

• Categories
• Tags
• Include or exclude specific products

WooCommerce Categories – the info item will be displayed on all categories’ products.

WooCommerce Tags – the info item will be displayed on all products with this tag.

Include products – adding the info item to a specific product.

Exclude products – remove the info item from these products (the element will not be displayed on these products).

Video instruction: Product Card Properties

Recommendations and solutions to potential problem #

Each theme is partially unique and may have different settings, along with various ways to implement the same elements.

Properties Display Modes: Row vs. Column

By default, properties are shown in a row, making them align horizontally with other product details. However, if your theme displays six or more products per row, the available space for custom properties, values, and icons may become too narrow, causing layout issues.

In such cases, switching to Column mode will help by stacking properties vertically, ensuring better readability.

Another reason to use Column mode is when property names or values contain long text. If the text is too large to fit comfortably in a single row, displaying them in a column will improve clarity and presentation. Users can choose the mode that best fits their design and content needs.

Rem and Em unites

Em unit changes depending on the font size of its parent element.

Rem unit is fixed relative to the root element’s font size and doesn’t change based on the parent’s font size.

Important! Measurement units depend on the theme.

Theme influence on the display of Info Items in the product card

As we mentioned above, each theme has different settings and various ways to implement the same elements.

For instance, when the ‘After Price Info Items’ block is set in the product card, it may display in the ‘After Title Info Items’ location in some themes.

To resolve such issues, you need to switch to a different theme.