Adding Product Options With Pictures (and more)

-- url of the page with the problem -- : drbensppc.com/index.php/en/hikashop-menu...uct/jimmyjane-form-2
-- HikaShop version -- : 2.6.3
-- Joomla version -- : 3.5.1 Stable
-- PHP version -- : 5.4.45
-- Browser(s) name and version -- : Firefox 43.0.3 on Fedora 23 MATE

Hi,

I have an option for all my products for a Gift Wrap.
I have three types of gift wraps (so I have a picture of each wrap).
So in total, I have 4 options:
* No gift wrap, with price 0.
* Three gift wraps for an additional price.

Questions:
=========
1. When "No Gift Wrap" is selected, it is added to the chopping cart, although it is actually an empty variant.
Can I avoid it through a Hikashop option rather than messing up with PHP?
If not - Can you show me where to modify so that if no gift wrap is selected it will not be added to the cart?

2. I would really like to present the gift wraps as radio buttons (just as I display colors), so users may select them with a picture icon rather than text.
For this, I thought of adding them as characteristics rather than options, but then, the price per wrap is fixed rather than added on top of the product price - not good.
Can I do this somehow?
(When I created the gift wrap characteristics, I selected "Characteristics selection method" as "Radio Buttons" but it doesn't help).

3. How can I add to the gift wrap option (rather than just an independent option), a text field for a greeting?

Thanks a lot.

Yeeepie.....

1. Works like charm. Thanks.

2. Actually no need for anything complex. It works very simply with css.
Here is the code snippet for anyone wishing to achieve the same...
To obtain the right values (hikashop_product_option number and the values of the options) use Firebug.

select.inputbox{
	height: 2em;
}
select.inputbox option {
	background-repeat:no-repeat;
	background-position:bottom left;
	padding-left:60px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
select#hikashop_product_option_0 option[value="0"] {
	height:2em;
}
select#hikashop_product_option_0 option[value="7"] {
	background-image:url(/images/giftWrap_general_ico.jpg);
	height:64px;
}
select#hikashop_product_option_0 option[value="8"] {
	background-image:url(/images/giftWrap_Anniversary_ico.jpg);
	height:64px;
}
select#hikashop_product_option_0 option[value="9"] {
	background-image:url(/images/giftWrap_Birthday_ico.jpg);
	height:64px;
}

Thank you for sharing this code!

I tired it but unfortunately it didn't work for me: I couldn't see the images!
Is it probably because recent updates in the Hikashop package?

Best,
Saad