How to change Swatch Dimensions on the Product Page?

PawelP · February 7, 2020, 2:43pm

Hi Craig, hi guys,

I wonder if you can help.
At first my environment for testing: fresh M2.3.4 installation no 3rd party modules, Ubuntu18.04, PHP7.2, Oracle VM.

I’m trying and straggling to change M default size of swatches.

I created, registered a theme under my VendorName

app/design/frontend/VendorName/theme/ (composer.json, registration.php, theme.xml)

and applied it in M admin panel Content > Design > Configuration > Action and selected my new default theme

Next, I created a new etc directory within my newly created theme and finally, I created a view.xml file in the etc directory.

Cleared and flushed my cache with:
bin/magento c:c and bin/magento c:f

Removed processed files with:

rm -rf pub/static/frontend/ var/view_preprocessed/

Cleared my browser cache and it didn’t work.
Having said this I have already done it on one of my websites and it worked.
I’m stuck here. I even tried to modify the original M view.xml file under
vendor/magento/module_swatches/etc but with no results.

Could you guys please give me a tip on what am I doing wrong?
Thank you.

Pawel

Source of info:

digitalstartup · February 7, 2020, 6:34pm

The solution you originally referred to is only applicable in 2.0.x. A lot of the theme stuff has been reworked since 2.1.x.

If you inspect element the swatch, you can simply override the CSS.

swatch

Solution

Therefore my solution would not avoid xml layouts and instead it would to simply extend your CSS:

Step 1: Delete the existing etc/directory you created (no need to override xml for this change)

Step 2: Create directory for the Magento Catalog directory (inc directories required for CSS changes)

Test_Vendor/test_vendor_theme/Magento_Catalog/web/css/source

Step 3: Create _extend.css file to put your custom CSS inside

Test_Vendor/test_vendor_theme/Magento_Catalog/web/css/source/_extend.css

Step 4: Inside _extend.css, add the CSS to change the size of the swatch

/* Custom Swatch Size */
.swatch-option {
	height: 60px;
	min-width: 60px;
}

You may want to tweak these CSS values and references to your liking. Chrome Inspect Element is your friend here.

Step 5: Manually delete any static generated files (I find I have to do this sometimes for changes to shows)

rm -rf pub/static/frontend/Test_Vendor

Step 6: Deploy static content (replace en_US with applicable locale)

bin/magento setup:static-content:deploy en_US -f

Step 7: Clear cache

bin/magento clear:cache

Finished File Structure

Test_Vendor
└── test_vendor_theme
    ├── composer.json
    ├── Magento_Catalog
    │   └── web
    │       └── css
    │           └── source
    │               └── _extend.less
    ├── registration.php
    └── theme.xml

Useful References

Simple ways to customize a theme’s styles (Official Magento Documentation)

Note sure if this is the “perfect” solution, but it worked when I tested it and it does follow CSS extension conventions.

PawelP · February 10, 2020, 11:31am

Hi Craig,

Thank you for your replay.

It took me a while to figure out how all it works.
So to change sizes of swatches I modified the _extend.less files as you advised but to change sizes of swatch images I had to modify the view.xml.

To change sizes of swatch images
Test_Vendor
└── test_vendor_theme
├── etc
│ └── view.xml

To change sizes of swatches
Test_Vendor
└── test_vendor_theme
├── Magento_Catalog
│ └── web
│ └── css
│ └── source
│ └── _extend.less

I didn’t know that these 2 differ.

Once again thank you for your help.

Pawel

PawelP · February 10, 2020, 12:22pm

Hi,

Swatches follow up post.

Please find a good piece of code.
It is for swatches custom validation.

As a default Magento displays “This is a required field.” message after a customer clicks on “Add to Cart” button on a configurable product without selecting an option.

With this module a custom message will be shown i.e. “Please select a size” or “Please select a colour”

Source: https://www.youtube.com/watch?v=0fguDL5iEd0

It is worth to watch the video to understand what Max actually did.code.zip (3.2 KB)

Paste the code under app/
Run the following command: bin/magento setup:upgrade

Do it on your test environment at first and see if it works for you and if it is for you.

I would highly recommend to watch the Max’s video.

PP