Adding an image to the radio and checkbox option
How to add a picture to the radio or checkbox option in OpenCart
Creation, development, manufacturing sites | WEB-STYDIA.COM

5/51 rating

Today one of my customers who bought ready online store required a little modification site, namely, emu it was required to add to the item option with the type of radio image.

I think you already know that in the options of the online store on the basis of opencart to each value there is an opportunity to add a picture, but it is displayed only with the type of option ("Image"). Today, we'll look at how to make the image display with other types of options, in this case we will display images for the radio option types and checkbox.

As in most cases, in order to perform this task you need to change the code of the online store a little, in this case you need to make changes only to one single file of your template, namely to the file that is responsible for the product card /catalog/view/theme/default/template/product/product.tpl.

As everything looks like you can see in the photo below, click to enlarge.

The general we proceed, we will deduce a picture of value of an option for the above types of options. First of all, we add the picture to the type of the radio option, to do this, open the above file and look for a piece of code in it that is responsible for the output of this type of option, namely we need to find two lines:

And between these two lines we add the following code which will display the picture of the option:

That's all, now the picture will be displayed with the type of option radio. For the checkbox option type, we do everything by analogy, look for the output of the checkbox option, ie, there are two lines:

and between these lines we add the image output:

More and more you do not need to do anything, well, except that you can process all this with beautiful CSS styles so that everything looks beautiful and displayed.

And do not forget to add this image to the admin panel in the options values :) .


There are still cases when there is a desire to do so that when clicking on the image option the photo increases in the pop-up window as for example the picture of the product increases with the click, let's consider this option and make the increase of the picture option when clicking on it.

In order to make the pop-up window of the picture option in full size you need in the same product.tpl file instead of the code:

add another code namely:

And you also need to make changes to the controller file /catalog/controller/product/product.php, in it we find the line:

and after it we add the following code:

That's all.  I would be happy if the article will be useful to someone. Good luck to you.

You may also like

No Comment

You can post first response comment.

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter a message.