Configurable product modification in Magento

In this article, I’ll give you extension that will change drop down selection (select field) to radio buttons on configurable products in Magento Community edition.
Well, what I had to do is rewrite Mage_Catalog_Block_Product_View_Type_Configurable block, and create a custom phtml file (configurable.phtml) with some custom validation on it.
Everything I just told you equals to this config.xml:
<?xml version="1.0"?>
<config>
<modules>
<Inchoo_Configurable>
<version>0.1.1</version>
</Inchoo_Configurable>
</modules>
<global>
<models>
<configurable>
<class>Inchoo_Configurable_Model</class>
</configurable>
</models>
<blocks>
<configurable>
<class>Inchoo_Configurable_Block</class>
</configurable>
<catalog>
<rewrite>
<product_view_type_configurable>Inchoo_Configurable_Block_Frontend_Configurable</product_view_type_configurable>
</rewrite>
</catalog>
</blocks>
</global>
<frontend>
<layout>
<updates>
<configurable module="Inchoo_Configurable">
<file>configurable.xml</file>
</configurable>
</updates>
</layout>
</frontend>
</config>
And block rewrite consisted of addition of new method “getRegularConfig” that corresponds to “getJsonConfig”, except it doesn’t return Json encoded data.
And custom template packed in attached zip file is located under “test” theme folder. For installation you need to extract both layout (configurable.xml) and phtml (configurable.phtml) files.
Notice: keep folder structure for phtml file in your theme
And finally, on modern theme it changes configurable product view from this:
And finally, you can download it here.
Cheers!
137 comments
Hello,
I’ve installed this extension and it’s working great! I was even able to customize it to display the actual simple product price rather than the plus or minus difference from the base price. Where I’m running into an issue is setting the sort order. This doesn’t appear to be looking at the Product Attribute Options “Order” and is just sorting by the simple product sku. Is there any way to set the “order” of the attribute options and have that order be reflected in the options? Any help would be greatly appreciated.
Thanks!
how do you able to customize it to display the actual simple product price rather than the plus or minus difference from the base price
plz i’m stuck here and i want to display actual simple product price
plz rpy asap…
Hi, How do I auto-select the first option as default?
Hi
and thank you for that nice extention. I have trouble with the price building. After install i read comments here and add code for multiple options and code looks like below:
I found another hints to price building in comments, but do not know, how to make them work correct. The Problem is now, when i click the first radio button, the price updates correct, when i click in second row on another radio button, the price is not added, it is overritten.
For the Test, i provide this URL to you to have a look:
Test configurable product
I would be very pleased to figure this out with you
With best regards from Germany:
Alex
Your module is great ! Thank you so much.
The only thing is I don’t get the right currency symbol. I want to display € in the radio button area.
I am using CE 1.7 and after long trials on code edition, I can’t find out! Although base currency is € everywhere else on my store… Thank you so much if you could help
So easy in fact, the currency symbol doesn’t display dynamically, but is simply written in code in \app\design\frontend\default\YOURTHEME\template\configurable\product\view\type\options\configurable.phtml
at line #24 :
(+ $)
Change + $ by + €. Or even better for €, do it like this :
(+ €)
So easy in fact, the currency symbol doesn’t display dynamically, but is simply written in code in \app\design\frontend\default\YOURTHEME\template\configurable\product\view\type\options\configurable.phtml
at line #24 :
CHANGE
BY
And you will get the result (+ 100 €) instead of ( +$100)
Hi,
I have copied files from app/design/frontend/default test to my custome theme but nothing change on frontend.
Does anyone could help me please ?
Is it necessary to copy Inchoo folder in app/code/local ?
Thanks
What about displaying configurable product just in a table including all children products?
I am demanding for this and I seek for extensions on Magento Connect and see this:
https://www.magentocommerce.com/magento-connect/pro-configurable-grid-table-view-extension.html
But I wonder that whether i can use code for this kind of display or not?
In configurable.phtml after
insert the below code.
Great extension, but it seemed to break the configurable swatches function in Magento 1.9. When selecting an option on a configurable product (i.e. Color), I can’t get the main product image to change. Does anyone know a fix for this?
Thanks for this extension. It really helped me alot
Good Extension, but have some issues:
1. Price not update when options chosen
2. For product with multi attributes like: color, size… it’s some confuse when all values always show in configuration box, need only display size/color. Ex: when chose one size then one fit color just display
In configurable.phtml the code for displaying attribute options is altready part of an attribute loop, however the function getRegularConfig() returns all attributes.
To fix, encaspulate the loop with:
attribute_id ) { ?>
To prevent things like this
in configurable.phtml file do the following:
Before
add
Using this extension, having one problem regarding price. On product view page it shows only regular price for all additional products. Additional price is not displaying. Please reply ASAP.
Hi,
Could you explain how to use this zip folder as am beginner to magento and want to make configurable product attribute size into a radio button instead of dropdown.
any help will be appreciable & waiting for your response.
thanks
This code is great ! Thank you so much.
When you say “multiple attributes” you mean transforming the radio into checkbox right ? So the cost of each attribute will be summed
If not. Do you have a solution for that ?
I found a solution for multiple attributes:
in configurable.phtml change:
and in Configurable.php add in the end of the function add
if anyone knows any way to change the images based on one of the attributes?
Any solution for multiple attributes ?
Addition:
I have tried the above solution (comparing the label which I changed to attribute ID as it made more sense to me) but it still shows ALL available options of this attribute, not only the ones, that my product offers.
(If I offer my shirt in black and white where black has sizers S and L and white has M and L it still shows S, M and L for both colors)
Is there a satisfying solution for multiple attributes yet?
Otherwise great extension! Love it!
Hello!
Great work with this plugin! Thank you very much it works like a charm!
But can I ask you how can I get the simple product attributes to show on each option. For example I want to add the simple product Image next to the radio button.
How can I achieve this?
Example: http://www.crystal-fashion.ro/crystal-fashion-jewellery/cercei/angelina-chaton-pear-8-18-gl.html
I have also multiple attributes and my better workaround for the moment is to compare the label :
getLabel() == $config[‘label’]): ?>
…
Nicolas
When using with multiple attributes every attribute gets all options.
i want radio for perticular one option as a customize configuration.phtml default with ur file i get radio button but price not change
The blog cutted some codes… So I put it where anyone can see:
http://snipt.org/AiaY0
Hi
Can you repost your code? The link to http://snipt.org/AiaY0 doesn’t work any more and your solution would be idea for me 🙂
Best regards
Phil
Just figured out how to fix it when working with multiple currencies.
In the top of configurable.phtml add these two lines:
$baseCurrencyCode = Mage::app()->getStore()->getBaseCurrencyCode();
$currentCurrencyCode = Mage::app()->getStore()->getCurrentCurrencyCode();
In the id attribute, in the , change the original:
id=”getPrice();?>”
for
id=”currencyConvert($_product->getPrice(), $baseCurrencyCode, $currentCurrencyCode);?>”
It does not work with multiple currencies, right?
In the cart the total is right, but in the products page when you choose an option, the total is wrong. If I find the fix I will post here.
Hi Everybody,
I need some help on magento from you guys on the ongoing topic i used inchoo module ” https://inchoo.net/ecommerce/magento/configurable-product-modification-in-magento/ ” to modify configurable options from dropdown to radio button but having this problem http://tigatest.co.uk/baildon/index.php/building-timber/75products
does any body have the solution for it.
Thanks
Hi,
Thanks for this extension. I see that the prices are not updated. Could you please tell me how i can fix this?
Thanks for nice extension .it’s working fine for me
image configuration product error? http://i1195.photobucket.com/albums/aa396/krites007/1a.gif How to edit it? Please teach me. please.
Thanks for nice extension .it’s working fine for me
can u help me .
i would like to set attribute option like “amazon” button
so is there any type of plugin available?
Unfortunately it does not work with special prices. I saw in configurable.php that it gets the special price by ->getFinalPrice but on the frontend it always displays the regular price.
In configurable.phtml you must replace:
<label class="label-radio-configurable" id="getPrice();?>”>
with:
<label class="label-radio-configurable" id="getFinalPrice();?>”>
For me it works!