![](https://demo.e-addons.com/wp-content/uploads/2021/02/pennant-1.jpg)
WordPress Pennant
![](https://demo.e-addons.com/wp-content/uploads/2021/02/logo-1.jpg)
Logo Collection
![](https://demo.e-addons.com/wp-content/uploads/2021/02/beanie-with-logo-1.jpg)
Beanie with Logo
![](https://demo.e-addons.com/wp-content/uploads/2021/02/t-shirt-with-logo-1.jpg)
T-Shirt with Logo
![](https://demo.e-addons.com/wp-content/uploads/2021/02/single-1.jpg)
Single
![](https://demo.e-addons.com/wp-content/uploads/2021/02/album-1.jpg)
Album
![](https://demo.e-addons.com/wp-content/uploads/2021/02/polo-2.jpg)
Polo
![](https://demo.e-addons.com/wp-content/uploads/2021/02/long-sleeve-tee-2.jpg)
Long Sleeve Tee
![](https://demo.e-addons.com/wp-content/uploads/2021/02/hoodie-with-zipper-2.jpg)
Hoodie with Zipper
![](https://demo.e-addons.com/wp-content/uploads/2021/02/hoodie-with-pocket-2.jpg)
Hoodie with Pocket
![](https://demo.e-addons.com/wp-content/uploads/2021/02/sunglasses-2.jpg)
Sunglasses
![](https://demo.e-addons.com/wp-content/uploads/2021/02/cap-2.jpg)
Cap
![](https://demo.e-addons.com/wp-content/uploads/2021/11/elementor-column-width-switcher.png)
1. add Form field Acceptance type with “cview” as Custom ID (you can change it with anyother name)
Optionally enable the Switcher mode for acceptance field and style it.
Remove all actions and hide submit button.
2. add a Query Posts widget with a custom CSS ID, something like “products”
3. Add this simple Javascript into an HTML Widget changing selector IDs if you used different names:
window.addEventListener('load', (event) => {
jQuery('#form-field-cview').on('change', function() {
let articles = jQuery('#products .e-add-item-grid');
if (jQuery(this).prop('checked')) {
articles.css('width', 'calc(100% / 4)');
articles.css('flex', '0 1 calc( 100% / 4 )');
} else {
articles.css('width', 'calc(100% / 6)');
articles.css('flex', '0 1 calc( 100% / 6 )');
}
});
});