Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

How to Get Product Custom Option In Product Listing Page in Magento


Using this post you can set your product custom option on product listing page. If you want to show available product custom option on you product listing page or category page to your customer, you can easily do using this post. 

You can set your custom options like color, size etc. to your product listing page or category page. You can also add your product to cart with selected option from list page. For that you just need to change in your list.phtml file of your current THEME. There is no need to change in your php file. 

Our module is also available on magento connect for free. You can download here.
Check our latest module  Product Custom Option (Pro)

How to Get Product Custom Option In Product Listing Page in Magento

Add following code in your list.phtml after <?php $i=0; $h=0; foreach ($_productCollection as $_product): ?> line:

<?php
     //$productSku = $_product->getSku();
     //$product = Mage::getModel('catalog/product');
     //$productId = $product->getIdBySku( $productSku );
     $product = Mage::getModel("catalog/product")->load($_product->getId());
     $attVal = $product->getOptions();
     $optStr = "";
?>

Replace <div class="actions"> with following code in same page.

<div class="actions">
<?php if($_product->isSaleable()):?>
 <form action="<?php echo $this->helper('checkout/cart')->getAddUrl($_product)?>" method="post" id= "product_addtocart_form" <?php if($_product->getOptions()):?> enctype="multipart/form-data"<?php endif;?>>
<div style='float: left; width: 100px;'>
 <?php foreach($attVal as $optionKey => $optionVal)
{
     $optStr.= "<select style='display:block; clear:both;' name='options[".$optionVal->getId()."]'>";           foreach($optionVal->getValues() as $valuesKey => $valuesVal)
{
      $optStr.= "<option value='".$valuesVal->getId()."'>".$valuesVal->getTitle()."</option>";
}
$optStr.= "</select>";
}
echo($optStr );?>

 <!--Change click action in button -->
 <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="this.form.submit();"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
</div>
<?php else:?>
     <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock')?></span></p>
 <?php endif;?>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) :?>
<li>
     <a href="<?php echo $this->helper('wishlist')->getAddUrl($_product)?>" class="link-wishlist">
            <?php echo $this->__('Add to Wishlist')?>
     </a>
</li>
<?php endif;?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)):?>
<li>
     <span class="separator">|</span>
     <a href="<?php echo $_compareUrl?>" class="link-compare"><?php echo $this->__('Add to     Compare')?>
     </a>
</li>
<?php endif;?>
</ul>
 </form>
 </div>

I would love to hear from you about this post!


Please support us, Like us on Facebook.

  1. Very Nice, anyway to make it add the correct option into the cart correctly from the category page?
    With this code it does not transfer the custom option in to the cart.

    ReplyDelete
    Replies
    1. Yes you can do it. please check updated code.
      Thanks,

      Delete
  2. I've been trying to get this for some time, maybe it is a problem with Ver 1.7.0.2? Any help is appreciated. I can almost get it to work correctly Combining a few different pieces of code together. Your looks much cleaner.

    http://unlimitedinternationalcellular.com/help.txt

    ReplyDelete
  3. No, there is no problem with magento Ver 1.7.0.2. Its working great in this Ver too.

    ReplyDelete
  4. Can someone tell me how i can load "getChildHtml('product_type_data') ?>" on list.phtml page?
    Plz

    ReplyDelete
    Replies
    1. Which content you want to display in you list page?

      Delete
  5. Really great post...!
    Thanks Hardik.

    ReplyDelete
  6. Can I use this solution to display the option for configurable products on category view page?

    Thanks

    ReplyDelete
  7. Thanks for this! It's exactly what I have been searching for!

    Is it possible to use this to show a single product in a static block or cms page?
    I need to show just a single configurable product with attribute options on a static block without the all the catalogue stuff.

    Is someone able to help with that?

    ReplyDelete
    Replies
    1. Thanks William,
      You can do it like create one category and add that product which you want to show in a static block or in your cms page.

      {{block type="catalog/product_list" category_id="Your category id" template="catalog/product/cmslist.phtml"}}

      now copy your list.phtml file and paste with cmslist.phtml and remove whatever you don't want to show in your cms page.

      That's it.

      Delete
  8. Nice one. Thanks Hardik....

    ReplyDelete
  9. Thanks Hardik,

    I can nearly get this to work but I get an error around line 115 with the code because of the comments about replacing the image. Have tried a few things but keep getting parse errors. Can anyone help with how the code should be at the start without the line about replacing the image?

    ReplyDelete
    Replies
    1. On which line you are getting error? can you please let me know in details not only line number.
      Thanks,

      Delete
  10. It is on line 115 with the code below, if i take out the line it doesn't like the opening bracket of the next php tag. many thanks.

    113 <div class="actions">

    114 <?php foreach($attVal as $optionKey => $optionVal)

    115 <!--Replace "buttonImage.png" with any button image in your skin images -->.

    116 <?php else:?>

    117 <?php if($_product->isSaleable()):?>

    ReplyDelete
    Replies
    1. I have updated my code for you. can you replace in your code?
      let me know is it working for you or not?
      Thanks,

      Delete
  11. yes that works, thanks very much!

    ReplyDelete
  12. Is there anyway for this to automatically update the price? So for example if one of my custom options adds $5.00 to the price, is there any way to update the price automatically before the customer add's it to the cart? Or minimally, can the price of the custom option be displayed in the drop down? This is a great modification, thank you for your work!

    ReplyDelete
    Replies
    1. yes that is possible. it's required more modification.
      please like my page on www.facebook.com/developersarea
      so we can communicate further. Thanks

      Delete
  13. Hello,

    first i want to say thank you for that piece of code. it worked quite well out of the box for me. i got only one bigger issue.

    i use an ajax cart extension fpr my magento shop 1.8.1. after adding your code the ajax extension thows an error when adding a item to the cart. after looking into your code i have seen that you use an input type=button" tag for sumbmitting the form. when i replace that input type=button tag with the magento default button tag the error is gone but i can´t add an item with options directly to the cart.

    so my question, is it possible to use your code with the magento default button tag?

    thanks for any answer.

    cheers,
    subhead

    ReplyDelete
  14. Really useful post thankyou.

    Got it working on 1.8.1 with adaptive Theme. Very Happy

    ReplyDelete
  15. $attVal = $product->getOptions(); for result empty, please help

    ReplyDelete
    Replies
    1. Khong Thanks for your comment.
      Are you using dropdown option?

      Delete
  16. yes, i using magento 1.9. but options is empty. why?

    ReplyDelete
    Replies
    1. It is working in magento 1.9 as well. Sorry but make sure you copy everything properly.

      Delete
  17. Hello!
    How to make this work in RWD theme magento 1.9?
    I could not!

    ReplyDelete
    Replies
    1. Please contact us on our facebook page @ www.facebook.com/developersarea
      I'll provide you code for RWD theme from there.
      Thanks.

      Delete
  18. Hello
    This is exactly what I need. How can I change the layout so that product image is on left and everything else on right. I don't see where the files are. Thanks.

    ReplyDelete
    Replies
    1. What is the url of your product page? if possible please send me from our contact us page.
      Thanks,

      Delete
  19. Hi,
    Nice tutorial it's worked for me. I searched many post and blog nothing worked for me except this one.....
    Thanks

    ReplyDelete
  20. Thanks Dear Nice post

    ReplyDelete
  21. THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! :)

    ReplyDelete
  22. hi,
    how to change price display after selecting option from the dropdown

    thanks

    ReplyDelete
    Replies
    1. Hi,
      You need to add some extra code. Let's contact us on our facebook page. Will share code there.
      https://www.facebook.com/developersarea

      Delete
  23. I wanna get it on category page / Product list page in layered Navigation, Is there any Idea to do it?

    ReplyDelete
    Replies
    1. Hello,
      Go to customoption.xml file and add "Category layered navigation layout" or you can add all layout references in this file.

      Delete
  24. Sorry I still cant get U
    could you please tell me something in detail, But 1st of all, is it possible to add custom options to layered navigation?

    ReplyDelete
    Replies
    1. Hello,
      Please contact us from our contact us page. I will explain you in details by email.
      Thanks,

      Delete
  25. hi.I am new to magento . I try this code for custome option nd it works grt.. But I want same thing for configure produtc in list.phtml page with add to cart. plz givee any solution ..
    thanks.

    ReplyDelete
    Replies
    1. Hello,
      Right now i haven't such a code for configurable product on list page with add to cart option. Will update here once i have something about this.
      Thanks,

      Delete
  26. What is the location of list.phtml ?

    ReplyDelete
    Replies
    1. Hello, Location of list.phtml is app/design/frontend/[YOUR THEME]/default/template/catalog/product/list.phtml

      Delete
  27. hello hardik can you help me? i am using a template have ajax add to cart feature. i had add code after learning your blog for show custom options on product listing page i need to add product (with selected option) in cart via ajax. can you help me?

    ReplyDelete
  28. related to me previos post..........

    this is my code for add product in cart

    < button type=" button" title="__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('getAddToCartUrl($_product) ?>')">< span >< span >__('Add to Cart') ?>

    ReplyDelete
    Replies
    1. Hi Rahul,
      Which ajax cart module you are using?

      Delete
  29. i am using creatip theme & ajax add to cart is inbuild with theme. i made some changes after learning your blog show custom options are showing in list page. But how to add it in cart
    http://themeforest.net/item/creatip-responsive-magento-digital-themes/10935792

    ReplyDelete
    Replies
    1. If possible please email me your current list.phtml file on hkpatel201@gmail.com.

      Delete
  30. hello hardik - can you tell please,

    How to add product in cart with custom option via querystring

    I am trying to add products with custom options in cart via query string but it does not worked.

    i copied this url from source.

    http://localhost/magento_bnsb_guide/index.php/checkout/cart/add/product/7?qty=2&options[3]=1

    ReplyDelete
    Replies
    1. i fixed it using form_key.. but thanks for previous support

      Delete
  31. I need to change price also pls help me to achieve this and also I need to proceed view page also thanks in advance

    ReplyDelete
  32. i have installed a color swatches it is working fine in product detail page but not coming in product listing pages i have tried various code but still not able to get the color swtaches on the product listing page can u help me.

    ReplyDelete
    Replies
    1. Please try this one.

      http://hkpatel201.blogspot.in/2015/01/product-custom-option-pro-with-optionswatch.html

      Delete
  33. Hey,

    I have implemented your code on list page its working fine but now i have custom option in checkbox acc. your code its only work with selection how can i set for checkbox custom option ,also please let me know about price change on choose value

    Thanks

    ReplyDelete
  34. Hi Hardik. Any news for a custom code to work on configurable products?This really is a pain.. I am loading "related-products" via a show/hide box in the product's view , i am able to display the configurable options there as dropdowns but any scenarios i tried after i select options and click addtocart it will redirect to the product page to "please fill required options" (although i have checked in my dropdowns) or will conflict with the main product addtocart function. I am using this in the product page view.phtml , i do not care for list.phtml categories. Thank you.

    ReplyDelete
  35. Hi,
    I see your post its very helpfull. i need like as below.
    My simple product have custom option, which are not requred. now i setted that in group product. so from group product when i do add to cart i want to send product in cart with first option auto select from custom option for every simple product.

    So please can you guide me.

    ReplyDelete
  36. magento 1.9.3.7 -- works like a charm! thanks!

    ReplyDelete
  37. show Uncaught ReferenceError: opConfig is not defined
    at HTMLInputElement.onclick (benches.html:500) error

    ReplyDelete
    Replies
    1. Hello Sanjay,

      What is your list page url?

      Thanks,

      Delete
  38. Uncaught ReferenceError: opConfig is not defined
    at HTMLInputElement.onclick (benches.html:500)

    ReplyDelete
  39. Hi Hardik, Nice snippet to start. Is this supporting in magento 2.3.

    i need weight field as dropdown and price to change with respect to weight.

    ReplyDelete
  40. please help me if I want to display radio buttons on list grid page and quantity button please

    ReplyDelete
  41. Can I use this solution to display the option for configurable products on category view page?

    ReplyDelete

 

Copyright @ 2017 HKBlog.