Change Image Size of Swatches in Magento 2

color-swatchesmagento2swatchesxml

I found the file to change the image size of Swatches here and it works when I change it in that place:

vendor/magento/module-swatches/etc/view.xml

However, if I move it to my theme it doesn't overwrite the file and doesn't work. My path to override is:

app/design/frontend/name/themename/Magento_Swatches/etc/view.xml

Is this path wrong? Do etc files have a different path to be placed than phtml files?

Best Answer

You have to apply changes under app/design/frontend/{Package}/{themename}/etc/view.xml file.

For changes value of swatches you have to add your tag inside view.xml files

<media>
        <images module="Magento_Catalog">
             <image id="swatch_image" type="swatch_image">
                 <width>50</width>
                 <height>30</height>
             </image>
        </images>
</media>

You can keep your specific field inside images tag.

Now applying changes you have to clear cache and var folder.

Related Solutions

Configurable Dynamic Images – Using Multiple Attributes

I can recommend you and alternative for the default color swatches. This free extension.
it allows you to do what the color swatches do and more but without the headache of naming conventions.
You can change the dropdowns to labels, colors or even simple product images.
and the main image can be changed to the simple product image for all attributes not just colors.
Full description of the extension can be found here

Magento – How to extend backend template files in Magento 2

I'm given example here of how to extend the sales order view page. Like this, you can extend any module which one you want. Follow the Below Steps

Step 1) Enable the extension to specify the config.php file from the app/etc folder

<?php
return array (
  'modules' => 
  array (
        'Learning_RewriteSales' => 1,
  ),
);

Step 2) Create Custom.php Class in Block

<?php
namespace Learning\RewriteSales\Block\Adminhtml\Order\View;

class Custom extends \Magento\Backend\Block\Template
{

}

Step 3) Create Info.php file to extend core Info.php

<?php
namespace Learning\RewriteSales\Block\Adminhtml\Order\View;

class Info extends \Magento\Sales\Block\Adminhtml\Order\View\Info
{

}

Step 4) Create di.xml file to specify which class you were extended ( Dependency Injection )

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <preference for="Magento\Sales\Block\Adminhtml\Order\View\Info" type="Learning\RewriteSales\Block\Adminhtml\Order\View\Info"/>
</config>

Step 5) Create module.xml file to specify the setup version

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Learning_RewriteSales" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Sales"/>
        </sequence>
    </module>
</config>

Step 6) Create sales_order_view.xml file from Learning/RewriteSales/view/layout folder and write the below code

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="order_info">
            <action method="setTemplate">
                <argument name="template" translate="true" xsi:type="string">order/view/info.phtml</argument>
            </action>
        </referenceBlock>
        <referenceBlock name="order_info">
            <block class="Learning\RewriteSales\Block\Adminhtml\Order\View\Custom" name="sales_order_view_custom" template="order/view/custom.phtml" />
        </referenceBlock>
    </body>
</page>

Step 7) Create the Custom.phtml and Info.phtml file from Learning/RewriteSales/view/layout and insert below code.

Custom.phtml

<h1>Hi, I am here!</h1>

Info.phtml

First Copy the code from Magento\Sales\view\adminhtml\templates\order\view\info.phtml file and past here after that add one more line

<?php echo $block->getChildHtml('sales_order_view_custom');?>

Step 8) Finally clean the cache and see your custom code Sales Order View Page.

It's working for me. If you have any queries let me know?

Best Answer

Related Solutions

Configurable Dynamic Images – Using Multiple Attributes

Magento – How to extend backend template files in Magento 2

Related Topic