Categories: How To

Replace downloadable products radio buttons with dropdown options on Product Page in Magento

While offering downloadable products in Magento, you mandate customers to login to their “My Account” section after purchase to download document, file, Ebook or any other downloadable product you sell. Whenever there are multiple version of your downloadable products available, you require users to choose appropriate version and thus you create radio buttons to opt for version selection.

As radio buttons uses large space of your product page, sometimes it looks ugly. What if you want to minimize the space allocation used by these radio buttons? You require to replace them with dropdown options. For that, you need to custom code.

Here, I’m presenting you with code to replace downloadable products radio buttons with dropdown options on Product Page in Magento:

First of all, go to app\design\frontend\[Your_theme]\[Your_package]\template\downloadable\catalog\product from Magento root. Now find links.phtml file and replace the code of the file with below custom code.

<pre class="lang:default decode:true ">
<?php /* @var $this Mage_Downloadable_Block_Catalog_Product_Links */ ?>
<?php $_linksPurchasedSeparately = $this->getLinksPurchasedSeparately(); ?>
<?php if ($this->getProduct()->isSaleable() && $this->hasLinks()):?>
    <dl>
        <?php $_links = $this->getLinks();
  if(sizeof($_links)>1):?>        
        <?php $_isRequired = $this->getLinkSelectionRequired(); ?>
        <dt><label<?php if ($_isRequired) echo ' class="required"' ?>><?php if ($_isRequired) echo '<em>*</em>' ?><?php echo $this->getLinksTitle() ?></label></dt>
        <dd<?php /* if ($_option->decoratedIsLast){?> class="last"<?php } */ ?>>
            <ul id="downloadable-links-list" class="options-list">
            <?php $count = 1;?>
             <select name="links[]">
              <?php foreach ($_links as $_link): ?>
                 
                 <span class="label downlabel">
                     <?php if ($_linksPurchasedSeparately): ?>
                        <option <?php if($count == 1):?> selected="selected" <?php endif; ?> class="radio<?php if($_isRequired):?> validate-one-required-by-name<?php endif; ?> product-downloadable-link" >

The output looks like this:

Hope this blog have helped you replacing downloadable products radio buttons with dropdown options to minimize space allocation on product page. Let me know if you want more help regarding. If you find any queries, ask me anytime, I’m always there to answer you!

Happy Coding!

Click to rate this post!
[Total: 2 Average: 5]
Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate ?️ Certified Magento Developer?‍?. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.?

Recent Posts

How to Add Tooltip in Checkout Shipping Field in Magento 2?

Hello Magento Friends, In today’s blog, I will explain How to Add Tooltip in Checkout…

2 days ago

How to Integrate and Use MongoDB with Laravel?

MongoDB is a popular NoSQL database that offers flexibility and scalability when handling modern web…

4 days ago

NodeJS | Callback Function

In NodeJS, callbacks empower developers to execute asynchronous operations like reading files, handling requests, and…

4 days ago

How to Show SKU in Order Summary in Magento 2?

Hello Magento Friends, In today’s blog, we will learn How to Show SKU in Order…

6 days ago

Best Colors to Use for CTA Buttons

The "Buy Now" and "Add to Cart" buttons serve as the primary call-to-action (CTA) elements…

1 week ago

Magento 2: How to Save Custom Field Value to quote_address for Multi-Shipping Orders

Hello Magento Friends, In Magento 2, the checkout process allows customers to choose multiple shipping…

1 week ago