I've added a custom "add to cart" button by overwriting the configurable.phtml file in my theme.

The button adds the product to the cart, however it doesn't seem to show up in the minicart -


Looking at the newtwork tab, it doesn't seem to pick up any actual items -

Network tab

Whereas using the default template it passes stuff over in this -

enter image description here

Am I missing something in passing over this data?

I'm essentially changing the configurables from showing in a drop down menu, to having each simple product have an "add to basket" button on the page.

I've tried both adding to cart with AJAX and with refreshing the page, but neither seems to work. Once you go to the actual cart page, you can see what these items are - it's just the minicart that isn't displaying the items.

I'm also including the

 <script type="text/x-magento-init">
            "#product_addtocart_form": {
                "configurable": {
                    "spConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>,
                    "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
            'Magento_ConfigurableProduct') ?: 'replace'; ?>"

On the page, which has all the simple product details in JSON.

Here is a code excerpt of how i'm displaying / using the buy now button on my custom template -

        foreach ($_children as $child) :
            $productName = $child->getName();

            if ( strpos($productName, '-UK') !== false ) :

        <div class="configurable-details">
            <div class="configurable-details--left">
                <div class="configurable-price"><?php
                    $price = $child->getPrice();
                    echo $this->helper('Magento\Framework\Pricing\Helper\Data')->currency($price,true,false);
                    $productID = $child->getId();
                <div class="configurable-name"><?php echo $child->getAttributeText('subscription_terms'); ?></div>
            <div class="configurable-details--right">

                <?php if ( strpos($productName, '-Q-') !== false || strpos($productName, '-A-') !== false ) : ?>
                <a class="btn" href="LINK TO CUSTOM SITE">Buy Now</a>
                <img class="configurable__direct-debit" src="<?php echo $this->getViewFileUrl('images/logos/logo_direct-debit.png'); ?>" />

                <?php else : ?>

                <form class="btn--form" data-role="tocart-form" action="<?php echo $cartHelper->getAddUrl($child);?>" method="post">
                    <?php echo $block->getBlockHtml("formkey");?>
                    <button type="submit" title="Add to Cart" class="action tocart primary"><span> Add to cart</span></button>

                <ul class="configurable__payments">
                    <li><img alt="Maestro" src="<?php echo $this->getViewFileUrl('images/logos/logo_maestro.png'); ?>" /></li>
                    <li><img alt="Mastercard" src="<?php echo $this->getViewFileUrl('images/logos/logo_mastercard.png'); ?>" /></li>
                    <li><img alt="Verified by Visa" src="<?php echo $this->getViewFileUrl('images/logos/logo_verified-by-visa.png'); ?>" /></li>
                    <li><img alt="PayPal" src="<?php echo $this->getViewFileUrl('images/logos/logo_paypal.png'); ?>" /></li>

                <?php endif; ?>

        <?php endif;

I'm doing a FOREACH on each simple assigned to the configurable, doing an IF to make sure the SKU is of a certain type and then outputting a Add to cart button for each one.

enter image description here

To get around another problem with the first item not actually going in the basket, I had to add an empty form -

  <form type="hidden" data-role="tocart-form" action=""  method="post"> <?php echo $block->getBlockHtml("formkey");?>
            <input type="hidden" name="product" value="">
            <input type="hidden" name="selected_configurable_option" value="">

Could this be the cause of it?

  • Did you tried after executed setup and static-content:deploy commands?
    – Bojjaiah
    Commented Feb 13, 2018 at 17:32
  • Is there any error in console? Commented Feb 14, 2018 at 5:46
  • @magento two - It's been deployed onto the Magento Cloud which runs this command as far as i'm aware. But i've also run it locally to no avail.
    – BigDaddyL
    Commented Feb 14, 2018 at 9:06
  • @Sameer No errors relating to this in the console
    – BigDaddyL
    Commented Feb 14, 2018 at 9:06

1 Answer 1


From what I can gather, Magento will iterate the simple child products of the configurable and crate options.

For what you want to do, it would have to create a form for each simple product instead. It can be done, but I would suggest you look at the options template and change that to create the form/button that you want with the data that it passes to the front end.

I hope this can point you in the right direction but I can't give you a concrete solution.

  • Thanks, i'll take a look at this. Where is the options template located so I can overwrite it?
    – BigDaddyL
    Commented Feb 14, 2018 at 9:38
  • Magento_ConfigurableProduct::product/view/type/options/configurable.phtml
    – drew7721
    Commented Feb 14, 2018 at 13:54
  • yeah.. then they get updated with the options-updater.js. Is it just me or is working with the frontend of Magento 2 a very counterintuitive action?
    – drew7721
    Commented Feb 14, 2018 at 13:55
  • Very. I'm currently overriding the above file - Magento_ConfigurableProduct::product/view/type/options/configurable.phtml with the code in the question. It does seem to be getting wrapped in a form already from "/vendor/magento/module-catalog/view/frontend/templates/product/view/form.phtml" I'm wary to edit this too much though, as i'm unsure where else this is called in.
    – BigDaddyL
    Commented Feb 14, 2018 at 15:00

Your Answer

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

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