8THEME8
8THEME
May 11

Display all advanced grid columns options at once

hello i have a problem what to show this product 1.2 . 3. 4. Post 5. 6. and in a separate option, I want them all to be seen. https://prnt.sc/wVDIYNw1KTes https://prnt.sc/O3HGAewrdno1
CompletedCompleted

May 11, 2026

Hello @vasak If your request will be more popular we will consider make it as a separate option. For this time you can follow next steps to reach the result: 1/ You need to copy 'etheme_grid_list_switcher' function from xstore/woo.php to your child-theme and make some changes. (check the link with example of child-theme/functions.php -> https://dropmefiles.net/ua/6RzNwmG43. Example of functions.php -> https://prnt.sc/qIoPYbvELw0l ) 2/ Add custom CSS (to child-theme/style.css or Theme Options -> Custom CSS -> Global CSS) for showing the result of new grid options (we provide 2 examples). 2.1/ https://prnt.sc/k18GTHHFW_NX => ``` .view-switcher .switch-grid a[data-row-count="5"]:before { font-family: inherit; content: '5'; } .view-switcher .switch-grid a[data-row-count="6"]:before { font-family: inherit; content: '6' } ``` 2.2/ https://prnt.sc/M1-tE3qceOvB = ``` .view-switcher .switch-grid a[data-row-count="5"], .view-switcher .switch-grid a[data-row-count="6"] { width: 1.2rem; height: 1.2rem; display: inline-block; } .view-switcher .switch-grid a[data-row-count="5"]:before { --switch-dot-color: #888; font-family: inherit; content: ''; height: 2px; width: 2px; transform: translate(-⁠2px, 0px); background-color: var(--switch-dot-color); box-shadow: -⁠3px -⁠3px 0 0 var(--switch-dot-color), 0px -⁠3px 0 0 var(--switch-dot-color), 3px -⁠3px 0 0 var(--switch-dot-color), 6px -⁠3px 0 0 var(--switch-dot-color), 9px -⁠3px 0 0 var(--switch-dot-color), -⁠3px 0px 0 0 var(--switch-dot-color), 3px 0px 0 0 var(--switch-dot-color), 6px 0px 0 0 var(--switch-dot-color), 9px 0px 0 0 var(--switch-dot-color), -⁠3px 3px 0 0 var(--switch-dot-color), 0px 3px 0 0 var(--switch-dot-color), 3px 3px 0 0 var(--switch-dot-color), 6px 3px 0 0 var(--switch-dot-color), 9px 3px 0 0 var(--switch-dot-color), -⁠3px 6px 0 0 var(--switch-dot-color), 0px 6px 0 0 var(--switch-dot-color), 3px 6px 0 0 var(--switch-dot-color), 6px 6px 0 0 var(--switch-dot-color), 9px 6px 0 0 var(--switch-dot-color), -⁠3px 9px 0 0 var(--switch-dot-color), 0px 9px 0 0 var(--switch-dot-color), 3px 9px 0 0 var(--switch-dot-color), 6px 9px 0 0 var(--switch-dot-color), 9px 9px 0 0 var(--switch-dot-color); } .view-switcher .switch-grid a[data-row-count="6"]:before { --switch-dot-color: #888; font-family: inherit; content: ''; height: 2px; width: 2px; transform: translate(-⁠4px, -⁠2px); background-color: var(--switch-dot-color); box-shadow: -⁠3px -⁠3px 0 0 var(--switch-dot-color), 0px -⁠3px 0 0 var(--switch-dot-color), 3px -⁠3px 0 0 var(--switch-dot-color), 6px -⁠3px 0 0 var(--switch-dot-color), 9px -⁠3px 0 0 var(--switch-dot-color), 12px -⁠3px 0 0 var(--switch-dot-color), -⁠3px 0px 0 0 var(--switch-dot-color), 3px 0px 0 0 var(--switch-dot-color), 6px 0px 0 0 var(--switch-dot-color), 9px 0px 0 0 var(--switch-dot-color), 12px 0px 0 0 var(--switch-dot-color), -⁠3px 3px 0 0 var(--switch-dot-color), 0px 3px 0 0 var(--switch-dot-color), 3px 3px 0 0 var(--switch-dot-color), 6px 3px 0 0 var(--switch-dot-color), 9px 3px 0 0 var(--switch-dot-color), 12px 3px 0 0 var(--switch-dot-color), -⁠3px 6px 0 0 var(--switch-dot-color), 0px 6px 0 0 var(--switch-dot-color), 3px 6px 0 0 var(--switch-dot-color), 6px 6px 0 0 var(--switch-dot-color), 9px 6px 0 0 var(--switch-dot-color), 12px 6px 0 0 var(--switch-dot-color), -⁠3px 9px 0 0 var(--switch-dot-color), 0px 9px 0 0 var(--switch-dot-color), 3px 9px 0 0 var(--switch-dot-color), 6px 9px 0 0 var(--switch-dot-color), 9px 9px 0 0 var(--switch-dot-color), 12px 9px 0 0 var(--switch-dot-color), -⁠3px 12px 0 0 var(--switch-dot-color), 0px 12px 0 0 var(--switch-dot-color), 3px 12px 0 0 var(--switch-dot-color), 6px 12px 0 0 var(--switch-dot-color), 9px 12px 0 0 var(--switch-dot-color), 12px 12px 0 0 var(--switch-dot-color) } .view-switcher .switch-grid.switcher-active a[data-row-count="5"]:before, .view-switcher .switch-grid.switcher-active a[data-row-count="6"]:before { --switch-dot-color: var(--et_active-color); } ``` For now it is as an additional customization but we tried to help you even now ! Hope you will be satisfied by the solution we made special for you :) Kind regards, Jack Richardson