Return to previous page

Shop page adjustments. - by Roobinda - on WordPress WooCommerce support

This topic has 10 replies, 2 voices, and was last updated 6 years, 10 months ago ago by Rose Tyler

Roobinda

Participant

January 23, 2018 at 22:36

Me again! A couple of questions regarding the SHOP page – see Private Content.

1. Why is the SHOP BY PRODUCT TYPE styled differently to SEARCH PRODUCTS, etc. It’s in a black box with white font. The others are black font with a grey underline. I’d like it to be the same as the others if possible.

2. The BRANDS widget – it it possible for this to be a drop down, as it’s rather a long list! Also, it doesn’t seem to be picking up on parent/child brands and indicating that relationship. Also, how would I make this use the same font as the Product Categories widget?

Thank you so much for ALL your help!

Reuben

Please, contact administrator
for this information.

#182765 Copied

9 Answers
Rose Tyler

Support staff

January 24, 2018 at 10:01
Hello,

1. You may use this code in Custom css:
```
.sidebar .widget_product_categories .widget-title {
    font-size: 1.1428em;
    color: #000;
    background-color: transparent;
    padding-left: 0px;
    text-align: left;
    padding-bottom: .7142em;
    margin-bottom: 1.0714em;
    border-bottom: 1px solid #e6e6e6;
}
```
2. I’ve added tasks about “drop down” and “hierarchy” options to our list, so I hope this will be added in one on next theme update.
For now, you may use this css code:
```
.sidebar .sidebar-widget.etheme_widget_brands > ul{
  max-height: 300px;
  overflow-y: auto;
}
.sidebar .sidebar-widget.etheme_widget_brands > ul li a{
  font-size: 1em;
  line-height: 1.2857em;
  font-weight: 500;
  padding: .5714em 0;
  text-transform: capitalize;
}
```
Regards
#182802 Copied
Roobinda

Participant

January 24, 2018 at 11:38

Hi Rose.

1. Worked perfectly. Although, how can i reduce the space between each category? Line-height?

2. I decided to use a Navigation Menu widget instead – see Private Content. It’s behaving slightly oddly though – All the parent brands, apart from INFINITI (which has children) have the arrow next to them. Surely only child brands should have the arrow!?
Also, the space between each brand is crazy, how can i reduce this line hight?

Thank you Rose.

Please, contact administrator
for this information.

#182817 Copied
Rose Tyler

Support staff

January 24, 2018 at 13:09
Hello,
```
.sidebar .product-categories>li>a,.sidebar-widget.widget_nav_menu li:first-child a, .sidebar-widget.widget_nav_menu li a {
    padding: .3em 0;
}
.sidebar-widget.widget_nav_menu li .sub-menu li a:before {
    display: none !important;
}
```
Regards
#182840 Copied
Roobinda

Participant

January 24, 2018 at 15:31

Okay thanks Rose. You’ll see I’ve altered the code slightly and it’s almost right!

Now I just need to sort the spacing out between the children in the Shop by Product Time. Tried a few things, but no joy.

Any ideas?

#182872 Copied
Rose Tyler

Support staff

January 24, 2018 at 15:45
```
.sidebar .product-categories>li>ul.children li>a {
    padding: .3em 0.7em;
}
```
Regards
#182873 Copied
Roobinda

Participant

January 24, 2018 at 16:35

Looking good!

Although now i’ve noticed a selected/clicked brand turns red, which is great as the user knows the resulting products are under this brand. However, the product categories don’t. Can we add this functionality, as it is even more helpful in this case?

I know, I’m pain!

#182886 Copied
Rose Tyler

Support staff

January 25, 2018 at 09:13
Hello,
```
.sidebar .product-categories>li>ul.children li.current-cat>a {
    color: #dc4348;
}
```
Regards
#182932 Copied
Roobinda

Participant

January 25, 2018 at 11:01

Bingo bango!

#182957 Copied

Rose Tyler

Support staff

January 25, 2018 at 11:02

You’re welcome!
Have a nice day.

Regards

#182959 Copied
Viewing 10 results - 1 through 10 (of 10 total)