Magento’s custom options feature is very handy for creating products that can be customized by shoppers. Unfortunately, the display options are not comprehensive. While you can enter custom option titles and and options, Magento does not have functionality for custom option descriptions out of the box.

Fortunately, this shortcoming can be overcome with an extension and some minor code edits. Follow the steps below to get it up and running:custom-option-description-1

1) Install the Custom Option Description extension via Magento Connect (while it only list compatibility with 1.7, we have this working on a store running Magento 1.8.1. This adds a new field on the Edit Product > Custom Options page in the Magento admin panel that lets you specify a description for a custom option that is separate from the option’s title.

2) Next, update your template files to display the info that is entered in the new field on the Custom Options page. The below example is based on the /app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/product/view/options/type/text.phtml template file and will add descriptions to all custom options that are set to the text value. If this file does not exist, copy it over from /app/design/frontend/base/default/template/catalog/product/view/options/type/text.phtml

IMPORTANT: If you need to add custom option descriptions to custom options that are set to check boxes or radio buttons, you will need to copy and edit select.phtml instead of test.phtml, or whatever the appropriate .phtml file is to successful display the description on the product page.

3) Open text.phtml and add the below code snippet at line 29:

<?php if ($_option->getDescription()): ?>
    <span style="margin-left:20px">
        <?php echo $this->htmlEscape($_option->getDescription()) ?>
    </span>
<?php endif ?>

With the surrounding code it should look like the below:

<dt><label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>><?php if ($_option->getIsRequire()) echo '<em>*</em>' ?><?php echo  $this->htmlEscape($_option->getTitle()) ?></label>
    <?php if ($_option->getDescription()): ?>
        <span style="margin-left:20px">
            <?php echo $this->htmlEscape($_option->getDescription()) ?>
        </span>
    <?php endif ?>
    <?php echo $this->getFormatedPrice() ?></dt>

That’s all. Enter a description for a custom option in the Mageno admin and check the product page to see it displaying.
custom-option-description-2

{ 0 comments }

logo_magentoSometimes it is necessary to add descriptive text in front of the price display in Magento. For instance, you may be selling something priced per unit, such as flooring by the square foot or fabric by the yard. Luckily, this is a quick and easy edit, just follow the steps below. While optimized for Magento 1.8.1, the below steps should work on earlier versions. However, line references may be slightly different:

 

1) Open app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/product/price.phtml. If you have not yet created an override file for your theme, you can copy the file from \app\design\frontend\base\default\template\catalog\product\price.phtml.

2) At line 206, locate the below block of code:

<?php else: ?>
     <span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>">
     <?php if ($_finalPrice == $_price): ?>
     <?php echo $_coreHelper->formatPrice($_price, true) ?>
     <?php else: ?>
          <?php echo $_coreHelper->formatPrice($_finalPrice, true) ?>
<?php endif; ?>

3) Add the below code on line 207 right below <?php else: ?>

<span class="NAME_YOUR_SPAN"><?php echo $this->__("CUSTOM TEXT") ?></span>

4) Your updated code should look like:

<?php else: ?>
     <span class="NAME_YOUR_SPAN"><?php echo $this->__("CUSTOM TEXT") ?></span>
     <span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>">
     <?php if ($_finalPrice == $_price): ?>
     <?php echo $_coreHelper->formatPrice($_price, true) ?>
     <?php else: ?>
          <?php echo $_coreHelper->formatPrice($_finalPrice, true) ?>
<?php endif; ?>

All done! Your custom text will be displayed before the price in both the catalog and the product pages. If you only wish to display the custom text in one location, use CSS to hide span .NAME_YOUR_SPAN in the appropriate location.

{ 0 comments }

Scaling (or zooming) the content of an iFrame can be useful when you are trying to display an object in an area that does not match its original size. The below code scales an iFrame that is 1000 pixels wide down to 710px.

The values for the original dimensions are input after the #scaled-frame id selector and the scaled values are input after the #wrapper id selector. Just multiply the original dimensions by the zoom ration you want to use. For example, if you want to scale to 71% as shown in the example below, 1000px x 2000px becomes 710px x 1420px.

The zoom factor is input for the zoom, -moz-transform, -o-transform, and -webkit-transform properties.

Unless the @media screen and (-webkit-min-device-pixel-ratio:0) is defined, the iFrame will be scaled twice in Google. Leave this value set to 1.

To use the below code, simply copy and paste it into your html and update src="http://your-url.com/" to whatever content you’d like to display.

<style>
#wrapper { width: 710px; height: 1420px; padding: 0; overflow: hidden; }
#scaled-frame { width: 1000px; height: 2000px; border: 0px; }
#scaled-frame {
    zoom: 0.71;
    -moz-transform: scale(0.71);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.71);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.71);
    -webkit-transform-origin: 0 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #scaled-frame  { zoom: 1;  }
}
</style>

<div id="wrapper"><iframe id="scaled-frame" src="http://your-url.com/"></iframe></div>

{ 0 comments }

Magento Extensions Not Displaying on Frontend After Install

October 9, 2013

If you are using a custom Magento theme and are having problems getting extensions to display correctly on the frontend, there is a good chance that it is an issue of file location. Extensions usually install to default/default/ or base/default/ because there is no way for the developer of an extension to predict whether you […]

Read the full article →

Invalid Table Rates File Format — Magento Table Rates CSV

October 7, 2013

In Magento, table rates are excellent for specifying shipping rates to different destinations and are fairly easy to set up. The main issues that users encounter when they try to configure table rates usually have to do with improper formatting of the required CSV file. If the CSV file is not properly formatted for import, […]

Read the full article →

Customize WordPress Search Box and Initial Text

September 23, 2013

Customizing the search box in WordPress is pretty straightforward once you understand what file to edit. The form for the search box is defined in searchform.php. Unless your theme has a searchform.php file, your site will revert to the default WordPress searchform.php. To avoid editing the default WordPress template, you can create a searchform.php file […]

Read the full article →

Change Currency Symbols Magento 1.7

September 12, 2013

With the release of Magento 1.7, changing currency symbols has become much easier. All currency symbols can be adjusted in the backend and no coding is required. Simply follow the below steps: 1) Define the currencies you would like to use in your store under System > Configuration > General > Currency Setup > Allowed […]

Read the full article →

Add Popup to Magento Pages

September 9, 2013

If you want to make sure that visitors to your site are made aware of new products or announcements, a popup display on the homepage or other popular pages can be an effective tactic. This benefit must be weighed against the fact that some people find popup displays quite annoying. Know your audience and only […]

Read the full article →

Custom Fonts in Internet Explorer, Chrome, Firefox, and Safari

September 3, 2013

Getting custom fonts to work across browsers can be somewhat challenging at times; different browsers require different font formats. Internet Explorer is (unsurprisingly) the worst offender, but even Chrome and Firefox prefer different formats. To avoid all the headaches that this causes, simply use the fail safe code below: @font-face { font-family: 'CustomFontFamily'; src: url('customfont-webfont.eot?#iefix') […]

Read the full article →

SEO — What to Expect From Google Over Coming Months

May 28, 2013

Matt Cutts, Google’s head of search spam, recently released a video that gives SEOs and webmasters a preview of what to expect over the next few months in terms of SEO for Google. Cutts addresses 10 points, which we have summarized below. The general goal of all of these updates is to improve search results […]

Read the full article →