3

For learning purpose I just added following css in my Module:

enter image description here

.newcolor
{
   background: #ffff00 !important;
   box-shadow: 1px 5px 5px 1px rgba(66, 103, 178, 0.51);
   font-size: 23px !important;
   font-weight: bold !important;
   border-radius: 10px;
   height: 60px;
   font-family: cursive !important;
}

Class newcolor implementation in addtocart.phtml

enter image description here

<div class="actions">
        <button type="submit"
                title="<?= /* @escapeNotVerified */ $buttonTitle ?>"
                class="action primary tocart newcolor"
                id="product-addtocart-button">
            <span><?= /* @escapeNotVerified */ $buttonTitle ?></span>
        </button>
        <?= $block->getChildHtml('', true) ?>
    </div>

Here is my Layout

enter image description here

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
        <css src="Senheng_Mycart::css/colorcart.css"/>
   </head>

   <body>
       <referenceBlock name="product.info.addtocart">
           <action method="setTemplate">
               <argument name="template" xsi:type="string">Senheng_Mycart::catalog/product/view/addtocart.phtml</argument>
           </action>
       </referenceBlock>
   </body>
</page>

Result:

Its working well for this product (button become yellow).

enter image description here

But does not work for "short pant" product.

enter image description here

My Question is why class 'newcolor' does not shown in the product with category "short pant" ?

  • 1
    I would be way easier to read and answer if instead of screenshots of code you added the actual code. – Marius May 28 at 9:05
  • okay wait a moment – Yusuf Ibrahim May 28 at 9:06
  • @Marius its updated – Yusuf Ibrahim May 28 at 9:09
  • @YusufIbrahim please check the answer – Rutvee Sojitra May 28 at 10:31
1

Here is the reason why you have not see the diffrent product with your custom css:

check in

vendor/magento/module-catalog/view/frontend/templates/product/view/form.phtml

                    <?php if (!$block->hasOptions()):?>
                                <?= $block->getChildHtml('product_info_form_content') ?>
                            <?php else:?>
                                <?php if ($_product->isSaleable() && $block->getOptionsContainer() == 'container1'):?>
                                    <?= $block->getChildChildHtml('options_container') ?>
                                <?php endif;?>
                            <?php endif; ?>

                            <?php if ($_product->isSaleable() && $block->hasOptions() && $block->getOptionsContainer() == 'container2'):?>
                                <?= $block->getChildChildHtml('options_container') ?>
                            <?php endif;?>
                            <?= $block->getChildHtml('form_bottom') ?>

Now go to catalog_product_view.xml

                            <container name="product.info.form.content" as="product_info_form_content">
                                                    <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart" as="addtocart" template="Magento_Catalog::product/view/addtocart.phtml"/>
                                                </container>
                                                <block class="Magento\Framework\View\Element\Template" name="product.info.form.options" as="options_container">
                                                    <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper" as="product_options_wrapper" template="Magento_Catalog::product/view/options/wrapper.phtml">
                                                        <block class="Magento\Catalog\Block\Product\View\Options" name="product.info.options" as="product_options" template="Magento_Catalog::product/view/options.phtml">
                                                            <block class="Magento\Catalog\Block\Product\View\Options\Type\DefaultType" name="product.info.options.default" as="default" template="Magento_Catalog::product/view/options/type/default.phtml"/>
                                                            <block class="Magento\Catalog\Block\Product\View\Options\Type\Text" name="product.info.options.text" as="text" template="Magento_Catalog::product/view/options/type/text.phtml"/>
                                                            <block class="Magento\Catalog\Block\Product\View\Options\Type\File" name="product.info.options.file" as="file" template="Magento_Catalog::product/view/options/type/file.phtml"/>
                                                            <block class="Magento\Catalog\Block\Product\View\Options\Type\Select" name="product.info.options.select" as="select" template="Magento_Catalog::product/view/options/type/select.phtml"/>
                                                            <block class="Magento\Catalog\Block\Product\View\Options\Type\Date" name="product.info.options.date" as="date" template="Magento_Catalog::product/view/options/type/date.phtml"/>
                                                        </block>
                                                        <block class="Magento\Framework\View\Element\Html\Calendar" name="html_calendar" as="html_calendar" template="Magento_Theme::js/calendar.phtml"/>
                                                    </block>

check if product has option first container will load and if product hasn't option another block will call where addtocart.phtml call differently

your catalog_product_view.xml should be

               <body>
                <referenceContainer name="product.info.form.content" as="product_info_form_content">
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart" as="addtocart" template="Senheng_Mycart::catalog/product/view/addtocart.phtml"/>
                  </referenceContainer>
                   <referenceBlock name="product.info.addtocart">
                       <action method="setTemplate">
                           <argument name="template" xsi:type="string">Senheng_Mycart::catalog/product/view/addtocart.phtml</argument>
                       </action>
                   </referenceBlock>
               </body>
            </page>
  • hi, I will check it tomorrow mate, thank you – Yusuf Ibrahim May 28 at 13:55
  • I am sorry I still don't understand how to fix it based on your information – Yusuf Ibrahim May 29 at 2:22
  • You have to change product.info.form.content container 's template too @YusufIbrahim – Rutvee Sojitra May 29 at 4:16
  • please check i have updated it in my answer just replace your catalog_product_view.xml with mine @YusufIbrahim – Rutvee Sojitra May 29 at 4:19
  • I got following error "Exception #0 (Magento\Framework\Config\Dom\ValidationException): Element 'referenceContainer', attribute 'as': The attribute 'as' is not allowed." – Yusuf Ibrahim May 29 at 4:23

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.