1

I have created Custom Button using following Code at addtocart.phtml

<?php if($_product->getCustom_button()){ //yes or no button?>
        <button type="button"
                            title="<?php echo $_product->getCustom_button_name() ;?>"
                            class="action primary tocart"
                            onclick="window.open('<?php echo $_product->getCustom_button_url() ;?>')"><span><span><i class="icon-desktop"></i><?php echo $_product->getCustom_button_name() ;?></span></span></button>
        <?php } ?>

my custom button is below of add to cart button. I can't move custom button right side of custom button.enter image description here

  • pass the site url , can be fixed via css – Manoj Deswal Jul 24 '17 at 7:05
  • try below css and make the text as icon , space is very less to adjust in same line – Manoj Deswal Jul 24 '17 at 7:18
2

Use following CSS to adjust the button at required place , however text is long for button and space is less so you should use icon instead

.product-add-form .product-options-bottom{
   float:left;
}
.product-info-main .product-options-bottom .box-tocart{
  float:left;
  width: 292px;
}
.product-info-main .live-preview{
   float:left;
   width:55px;
   margin:20px 0px;
}

Here you need this live-preview class or any class name in your button code.

enter image description here

Add custom CSS in _extend.less if not overriding original CSS ( original can be changed in specific extended module )

app/design/frontend/vendorname/themename/Magento_Theme/web/css/source/_extend.less

Less takes effect after upgrade/deploy commands

Keep cache disabled

let me know if any issue.

Thanks

  • please tell me file location of CSS for place your code – Faraz Bashir Jul 24 '17 at 7:54
  • added in answer, check updated ans – Manoj Deswal Jul 24 '17 at 7:59
  • i have past your code at app/design/frontend/Smartwave/porto/Magento_Theme/web/css/source/_module.less . but button is still below side of add to cart button – Faraz Bashir Jul 24 '17 at 8:17
  • Place in extend.less and run the commands – Manoj Deswal Jul 24 '17 at 8:55
  • does it worked for you ? – Manoj Deswal Jul 24 '17 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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