[Skip to main content](#vessel-content) # Adding Product Options With Pictures (and more) ## - **[bshomer](/forum/user/42675-bshomer "View bshomer's Profile")** - [![bshomer's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/42675-bshomer "View bshomer's Profile") Topic Author - [ Offline](/forum/user/42675-bshomer) Less More - Posts: 29 - Thank you received: 1 - - 10 years 3 months ago - 10 years 3 months ago [\#245859](#245859) by [bshomer](/forum/user/42675-bshomer "View bshomer's Profile") *[Adding Product Options With Pictures (and more)](/forum/26-product-category-display/885641-adding-product-options-with-pictures-and-more#245859 "-- 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.")* was created by *[bshomer](/forum/user/42675-bshomer "View bshomer's Profile")* -- url of the page with the problem -- : [ drbensppc.com/index.php/en/hikashop-menu...uct/jimmyjane-form-2](http://drbensppc.com/index.php/en/hikashop-menu-for-categories-listing/product/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. Last edit: 10 years 3 months ago by [bshomer](/forum/user/42675-bshomer "View bshomer's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODU2NDEtYWRkaW5nLXByb2R1Y3Qtb3B0aW9ucy13aXRoLXBpY3R1cmVzLWFuZC1tb3JlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86358 - Thank you received: 14293 - - 10 years 3 months ago [\#245866](#245866) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adding Product Options With Pictures (and more)](/forum/26-product-category-display/885641-adding-product-options-with-pictures-and-more#245866 "-- 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.")* Hi, 1. It will require a small modification of the option view and the removal of the "no" variant: [ hikashop.com/forum/product-category-disp...t-option.html#138030](https://hikashop.com/forum/product-category-display/864582-how-to-show-none-as-default-for-product-option.html#138030) 2. Options only have one display mode for now. You can try changing the text genericlist to radiolist in the "option" view file, but I'm not sure the javascript code handling the refresh of the code will still work with radios. It might require further and more complex modifications. The following user(s) said Thank You: [bshomer](/forum/user/42675-bshomer "View bshomer's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODU2NDEtYWRkaW5nLXByb2R1Y3Qtb3B0aW9ucy13aXRoLXBpY3R1cmVzLWFuZC1tb3JlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[bshomer](/forum/user/42675-bshomer "View bshomer's Profile")** - [![bshomer's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/42675-bshomer "View bshomer's Profile") Topic Author - [ Offline](/forum/user/42675-bshomer) Less More - Posts: 29 - Thank you received: 1 - - 10 years 3 months ago [\#245970](#245970) by [bshomer](/forum/user/42675-bshomer "View bshomer's Profile") Replied by *[bshomer](/forum/user/42675-bshomer "View bshomer's Profile")* on topic *[Adding Product Options With Pictures (and more)](/forum/26-product-category-display/885641-adding-product-options-with-pictures-and-more#245970 "-- 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..... ![;)](/media/kunena/emoticons/24.png ";)") 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. Code: 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; } The display calls are for the vertical alignment of the text. This displays the potions with images next to the selections and it works great. The following user(s) said Thank You: [Kittisak112](/forum/user/60983-kittisak112 "View Kittisak112's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODU2NDEtYWRkaW5nLXByb2R1Y3Qtb3B0aW9ucy13aXRoLXBpY3R1cmVzLWFuZC1tb3JlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[soule](/forum/user/34061-soule "View soule's Profile")** - [![soule's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34061-soule "View soule's Profile") - [ Offline](/forum/user/34061-soule) Less More - Posts: 38 - Thank you received: 1 - - 6 years 4 months ago [\#321382](#321382) by [soule](/forum/user/34061-soule "View soule's Profile") Replied by *[soule](/forum/user/34061-soule "View soule's Profile")* on topic *[Adding Product Options With Pictures (and more)](/forum/26-product-category-display/885641-adding-product-options-with-pictures-and-more#321382 "-- 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.")* 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 Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODU2NDEtYWRkaW5nLXByb2R1Y3Qtb3B0aW9ucy13aXRoLXBpY3R1cmVzLWFuZC1tb3JlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86358 - Thank you received: 14293 - - 6 years 4 months ago [\#321417](#321417) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adding Product Options With Pictures (and more)](/forum/26-product-category-display/885641-adding-product-options-with-pictures-and-more#321417 "-- 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.")* Hi, This CSS code is still ok. However, please note that you need to adapt it to your needs. hikashop_product_option_0 targets the first option on the product details pages. If you have several options, you'll have to adapt that. Also you need to change the xxx in Code: [value="xxx"] of the CSS to use the values that you have on your end (it's the id of the products / variants). And finally, you need to change the background-image url to use the images you have on your end. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODU2NDEtYWRkaW5nLXByb2R1Y3Qtb3B0aW9ucy13aXRoLXBpY3R1cmVzLWFuZC1tb3JlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.057 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)