How to get Product custom option and show into custom page.this is a product custom option.

enter image description here

Now when add to cart this product then it's show like this

enter image description here

When click on add to list data store into table with custom option. I want to show custom option like cart page showing.Problem is showing custom options into custom page.

enter image description here

Update I get this type of array when add to list and I store option into database using jsonencode().

    [listid] => 18
    [prdid] => 4
    [product] => 4
    [selected_configurable_option] => 
    [related_product] => 
    [item] => 4
    [form_key] => h6EN0ffZOHD3Ta5K
    [options] => Array
            [3] => 7
            [4] => Custom Val
            [5] => Array
                    [0] => 8
                    [1] => 9

            [6] => 10
            [7] => Area Text
            [8] => Array
                    [0] => 12
                    [1] => 13


    [options_10_file_action] => save_new
    [qty] => 1

Store into table like this

{"options":{"3":"7","4":"Custom Val","5":["8","9"],"6":"10","7":"Area Text","8":["12","13"]}}

How to do it ?

Please Help me.

  • you are getting cart items on your custom page right? Oct 12, 2020 at 6:21
  • No not getting cart item. on product page when i add to list then product added into custom list page. problem is getting and showing custom option like cart page.
    – Msquare
    Oct 12, 2020 at 6:24
  • cart cart page they have added the custom options and additional option to cart item. when you getting the same are you ding the same or just getting the product.. because that will not work obviously. because you are not getting any custom or additional options on your custom listing page. Oct 12, 2020 at 6:28
  • Please check my updated question. and update me.
    – Msquare
    Oct 12, 2020 at 6:33
  • not sure, how to achieve full thing but you can try looking into the /vendor/magento/module-checkout/view/frontend/templates/cart/item/default.phtml form line no 46 <?php $_formatedOptionValue = $block->getFormatedOptionValue($_option) ?> Oct 12, 2020 at 6:43

2 Answers 2


First of all, fetch the product id which you want to display a custom page. then after you get any custom option using the below code you can get the all custom option. pass product id in the second line. Paste the below code in your custom page phtml file

    $_objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $_product = $_objectManager->create('Magento\Catalog\Model\Product')->load(4);
    $customOptions = $_objectManager->get('Magento\Catalog\Model\Product\Option')->getProductOptionCollection($_product);
    foreach ($customOptions as $option) {
        //you can get custom option value here.
  • from above code i can not get drop down labels and radio button values.
    – Msquare
    Oct 13, 2020 at 9:53

Step-1 : Create registration.php file at app/code/Custom/Blog and add below code.


Step-2 : Create module.xml file at app/code/Custom/Blog/etc and add below code.

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Custom_Blog" setup_version="1.0.0">

Step-3 : Create routes.xml file at app/code/Custom/Blog/etc/frontend and add below code.

<?xml version="1.0" ?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route frontName="blog" id="blog">
            <module name="Custom_Blog"/>

Step-4 : Create Index.php file at app/code/Custom/Blog/Controller/Index and add below code.


namespace Custom\Blog\Controller\Index;

use Magento\Framework\App\Action\Action;

class Index extends \Magento\Framework\App\Action\Action
    protected $resultPageFactory;
    protected $customerSession;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;

    public function execute()
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->set(__('My Custom Page'));
        return $resultPage;

Step-5 : Create CustomBlock.php file at app/code/Custom/Blog/Block and add below code.


namespace Custom\Blog\Block;

use Magento\Framework\View\Element\Template;

class CustomBlock extends Template
    protected $_productloader;
    protected $_imageBuilder;
    protected $_customOptions;

    public function __construct(
        Template\Context $context,
        \Magento\Catalog\Model\ProductFactory $_productloader,
        \Magento\Catalog\Block\Product\ImageBuilder $_imageBuilder,
        \Magento\Catalog\Model\Product\Option $customOptions,
        array $data = []
    ) {
        $this->_productloader = $_productloader;
        $this->_imageBuilder = $_imageBuilder;
        $this->_customOptions = $customOptions;
        parent::__construct($context, $data);

    public function getLoadProduct($id)
        return $this->_productloader->create()->load($id);

    public function getImage($product, $attributes = [])
        $imageId = 'product_base_image';
        return $this->_imageBuilder->setProduct($product)

    public function getCustomOptions($data)
        return $this->_customOptions->getProductOptionCollection($data);

    public function getOptionHtml($prd_data, \Magento\Catalog\Model\Product\Option $option)
        $type = $this->getGroupOfOption($option->getType());
        $renderer = $this->getChildBlock($type);
        return $this->getChildHtml($type, false);

    public function getGroupOfOption($type)
        $group = $this->_customOptions->getGroupByType($type);
        return $group == '' ? 'default' : $group;

Step-6 : Create Customfile.phtml file at app/code/Custom/Blog/view/frontend/templates and add below code.

$id = 4;
// get product collection
$prd_data = $block->getLoadProduct($id);
// get product image
$image = $block->getImage($prd_data);
// get product option data
$prd_custom_op =  $block->getCustomOptions($prd_data);
<div class="product-data-show-main">
    <div class="prd-name"><h2><?php echo $prd_data->getName(); ?></h2></div>
    <div class="product-image-part">
        <?= $image->toHtml() ?>
    <div class="product-options-part">
        <?php foreach ($prd_custom_op as $_option): ?>
            <?= $block->getOptionHtml($prd_data, $_option); ?>
        <?php endforeach; ?>

Step-7 : Create blog_index_index.xml file at app/code/Custom/Blog/view/frontend/layout and add below code.

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
        <referenceContainer name="content">
             <block class="Custom\Blog\Block\CustomBlock"
                <block class="Magento\Catalog\Block\Product\View\Options\Type\DefaultType"

                <block class="Magento\Catalog\Block\Product\View\Options\Type\Text"

                <block class="Magento\Catalog\Block\Product\View\Options\Type\File"

                <block class="Magento\Catalog\Block\Product\View\Options\Type\Select"

                <block class="Magento\Catalog\Block\Product\View\Options\Type\Date"

Step-7 : Run Magento upgrade command after creating above file

bin/magento setup:upgrade
bin/magento c:f

Step-8 : Run below URL


I Hope This Helps You.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.