Joomshopping Plugins: Custom select attribute in product / Display image attributes in select

Your customers see the colour, material or model before they choose. The addon replaces the standard attribute dropdown on the product page with a custom select that shows the image of each attribute value next to its name, plus a large preview on hover.

Features

• Attribute value image shown directly in the dropdown — uses the native JoomShopping attribute images (image_attributes_live_path), no extra upload needed
• Selective use: enter the IDs of the desired attributes separated by commas (attrs); all other attributes keep the standard look
• Image position relative to the label: left or right (position)
• Icon width in the list is set in pixels (css_width, default 20)
• 300 px preview: a hover popup on desktop, a modal window with dimmed background, a "Choose" button and a close icon on mobile (≤ 991 px)
• no_image.png placeholder for values without an image, so the list keeps its alignment
• Fully compatible with JoomShopping logic: the choice is written back to the original select and a change event is fired, so price, stock, product code recalculation and main image switching keep working as usual
• Dependent attributes supported: the list is re-initialised after the AJAX attribute reload (jshop.reloadAttribEvents)
• The empty "not selected" option is rendered correctly, without an empty image frame
• Responsive markup; the shipped CSS can be overridden in the template
• Interface languages: en-GB, de-DE

Settings

System / Plugins / Addon custom select attribute in product

• Attributs IDs (, separator) (attrs) — comma-separated IDs of the attributes the custom select is applied to. All other attributes keep the standard look
• Position (position) — image position relative to the label: left or right (default right)
• Width (css_width) — icon width in the list, in pixels (default 20)