Magento 1.7 – Custom Options & Simple Configurable Products Fix

Those who recently upgraded their Magento store to Magento 1.7 may have encountered the issue of the product price resetting to zero when choosing a custom option. This error can occur due to several reasons, especially on custom themes and happens both on configurable products' custom options and that of simple products.

• Fix for Custom Options Price
• Fix for Simple Configurable Products Price Reset

Price Resetting to 0.00 when Custom Option Clicked

• The error is JavaScript related and occurs due to html block conflicts
• The price change error is dynamic, hence the price is accurate when checking out
• It occurs on any custom option types, including drop-downs, multiple select, radio buttons and checkboxes
• The issue also occurs on simple products associated with configurable products, group and bundled products

Fix Price Resetting on Magento 1.7

If you are not using a Magento plugin for your custom options, the error would be likely theme related. If you are just starting your Magento development, I recommend using the Magento plugin Simple Configurable Products. If you intend to use the plugin or already use it, you can skip to the Simple Configurable Product Custom Options Fix. Otherwise, Here are some possible solutions to fix the custom options error on your custom theme (remember to backup files you overwrite):

1. Updating catalog/products/view .phtml files

If your base theme files are updated, you can use them to update your custom theme files by moving options.phtml, price.phtml and other theme files:

Move the files from /app/design/frontend/base/default/template/catalog/product/view/ to /app/design/frontend/default/[yourtheme]/template/catalog/product/view/

Some custom themes may not have the files in your product/view/ folder, yet adding them will still make Magento prioritize them if the files exist. Consider transferring the .XML files from the /layout folder as well.

2. Editing the price_clone.phtml block

Should the above option not work for you, you can also edit the price_clone.phtml block in two ways. Note that this method will only make the bottom price-block not change. So if you use custom options that change prices, or only use the top price block, this option may not be suitable.

Via template file:

Find your price_clone.phtml block in the product/view/ folder and find the following line:

<?php echo $this->getPriceHtml($_product, false, '_clone') ?>

and Replace with:

<?php echo $this->getPriceHtml($_product, false) ?>

Via local xml file:

For those who prefer editing their xml layout files, they can deactivate the block instead in catalog.xml. In catalog.xml, find the bottom.phtml block:

<block type="catalog/product_view" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="catalog/product/view/options/wrapper/bottom.phtml" translate="label">
<label>Bottom Block Options Wrapper</label>
<action method="insert"><block>product.tierprices</block></action>
<block type="catalog/product_view" name="product.clone_prices" as="prices" template="catalog/product/view/price_clone.phtml"/>
<action method="append"><block>product.info.addtocart</block></action>
<action method="append"><block>product.info.addto</block></action>
</block>

And replace the highlighted line (241) with:

<block type="catalog/product_view_type_configurable" name="product.info.configurable" as="product_type_data" template="catalog/product/view/type/default.phtml"/>

3. Editing the product.js file

If the above methods don't work or if you're looking for a more orthodox solution, you can change the JavaScript files themselves to work according to your theme. For this part, a well explained post has been posted here.

The last method should resolve the custom options issue and allow dynamically updating the price upon switching of options. If those don't fix the error then the issue would be theme or plugin related, which brings us to the SCP plugin fix.

Fix Simple Configurable Products Custom Options Pricing

SCP is a great plugin for configurable products, which is why it's been supported by the community ever since it was deprecated. Since the last Magento update, there have been more issues than just the custom options, specifically related to the Product / Price Indexing, which I will cover on the next post.

• You installed the most recent SCP extension on your Magento 1.7.x site.
• Assure that the plugin works, other than the error and indexing issues (if those occur). So when you checkout, the price of the custom option is active, or if its a configurable product, that the simple product price shows up.
• Although this is optional, I advise to copy over the plugin files from the base folder into your active template folder, if it isn't already.

Next, you will edit the plugins scpoptions.phtml file, which requires 4 small changes to fix the custom options. Open the file app/design/frontend/default/[your_theme]/template/catalog/product/view/scpoptions.phtml and make the changes to the following lines, simply by adding .price in the parseFloat:

if (this.config[optionId]) {
                    if (element.type == 'checkbox' || element.type == 'radio') {
                        if (element.checked) {
                            if (config[optionId][element.getValue()]) {
				price += parseFloat(config[optionId][element.getValue()].price);
                            }
                        }
                    } else if(element.hasClassName('datetime-picker') && !skipIds.include(optionId)) {
                        dateSelected = true;
                        $$('.product-custom-option[id^="options_' + optionId + '"]').each(function(dt){
                            if (dt.getValue() == '') {
                                dateSelected = false;
                            }
                        });
                        if (dateSelected) {
			    price += parseFloat(this.config[optionId].price);
                            skipIds[optionId] = optionId;
                        }
                    } else if(element.type == 'select-one' || element.type == 'select-multiple') {
                        if (element.options) {
                            $A(element.options).each(function(selectOption){
                                if (selectOption.selected) {
                                    if (this.config[optionId][selectOption.value]) {
					price += parseFloat(this.config[optionId][selectOption.value].price);
                                    }
                                }
                            });
                        }
                    } else {
                        if (element.getValue().strip() != '') {
                            price += parseFloat(this.config[optionId].price);
                        }
                    }
                }
            });

After adding the .price to the highlighted lines, you can upload and replace the original which should resolve the custom options issue. Make sure to clear your cache before testing.

Continue to references and other errors on the next page.

Other Errors

If you just started using Simple Configurable Products on your Magento install, you may encounter other unrelated issues, such as the re-indexing of flat products and prices. You can find most fixes to any of these issues from this SPC pull request on github. But the ones I found most important are:

• Product Indexing Fix: SPC - Configurable.php
• Custom Options Fixed File: scpoptions.phtml