Voters 2
2
Display all advanced grid columns options at once
- Done
 |
Taha |
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. prnt.sc/wVDIYNw1KTes
prnt.sc/O3HGAewrdno1
Activity Newest / Oldest
Jack Richardson
Status changed to: Done
Taha
thank you so much it was amazing thank you
Jack Richardson
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 -> dropmefiles.net/ua/6RzNwmG43. Example of functions.php -> 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/ 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/ 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