How to change the image of swatches for disabled options.

By default, Magento put a vertical red line if the option is not available for all options.

I want to change the image to my custom image.

1 Answer 1


To change the image of swatches for disabled options in Magento, you'll need to override the default template and CSS styles. Here's a step-by-step guide to help you achieve this:

1.Create a new theme:

In your Magento installation directory, navigate to app/design/frontend.

Create a new folder with the name of your theme, for example, yourtheme.

Inside the yourtheme folder, create two more folders: Magento_Theme and web.

2.Override the template:

In the Magento_Theme folder, create another folder called templates.

Copy the template file you want to modify from the Magento core files to the templates folder.

For example, to modify the swatch template, you would copy swatch-renderer.phtml.

Open the copied template file (swatch-renderer.phtml) in a text editor.

3.Replace the default image:

Look for the line of code that generates the image for disabled options. It might look like <img ...>.

Replace the existing image code with your custom image code.

For example, if your custom image is located in the web folder and its filename is custom-image.png, the code might look like: getViewFileUrl('images/custom-image.png') ?>" alt="Custom Image">.

4.Save the changes to the template file.

5.Override the CSS:

In the web folder of your theme, create another folder called css. Inside the css folder, create a file called _extend.less Open _extend.less in a text editor.

6.Customize the CSS:

Write CSS rules to modify the appearance of the swatch images for disabled options.

For example, you can target the specific swatch element and change its background image using the background-image property.

.swatch-attribute-option[aria-disabled="true"] {
    background-image: url('../images/custom-image.png');
    /* Add any additional styles as needed */

7.Save the changes to the _extend.less file.

8.Deploy the static conten

Run the following command from your Magento root directory to deploy the static content:

 bin/magento setup:static-content:deploy --theme="YourVendor/yourtheme"

9.Clear the Magento cache:

  bin/magento cache:flush

10.Configure your store to use the new theme:

Log in to your Magento Admin Panel.

Go to Content > Design > Configuration.

Select the store view where you want to apply the theme.

In the Applied Theme column, select your custom theme (YourVendor/yourtheme).

Save the configuration.


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.