Return to previous page

Have been trying to change some colors but no luck

This topic has 7 replies, 2 voices, and was last updated 2 years, 6 months ago ago by Olga Barlow

nixatsnow

Participant

May 5, 2022 at 08:20

Hi, i’ve been trying to change some colors on the shop page. unlike creating the single product page from scratch in elementor which has quite a bit flexibility with selectors and every other settings within each container, could not get it to work applying these colors and paddings into the global css settings of the theme.
below are the items i could not get it to work even with yellowpencil. something i’m doing is not working
it’s working when i did inspect page source and edited ( https://prnt.sc/Z8IrihEgPsdl ) but not when applied to the theme css

trying to:
1- widgets on the shop side bar and products on the loop with white background and 10px padding all the way around
2-products on the loop with 10px margins between each other

Also, what is the selector name for the product title, brand, categories, reg. and sale price on the product loop?

Please, contact administrator
for this information.

#323187 Copied Theme version: 8.1.5 WooCommerce version: 6.4.1

6 Answers
Olga Barlow

Support staff

May 5, 2022 at 18:19
Hello,

1) Use the below code to apply border around widgets in the sidebar
```
.sidebar .sidebar-widget {
    border: 1px solid #e1e1e1;
    padding: 10px;
    background-color: #fff;
    margin-bottom: 15px;
}
```
Use below code to add border around the products
```
.content-product {
    border: 1px solid #e1e1e1;
    padding: 10px;
    background-color: #fff;
margin-bottom: 0; 
    padding-bottom: 0;
}
```
Or a combination of them if you want to apply that for both:
```
.sidebar .sidebar-widget, .content-product {
    border: 1px solid #e1e1e1;
    padding: 10px;
    background-color: #fff;
}
.sidebar .sidebar-widget {
    margin-bottom: 15px;
}
.content-product {
    margin-bottom: 0; 
    padding-bottom: 0;
}
```
Also, you can enable Theme Options > WooCommerce > Shop > Product styles > Products Bordered Layout option and you’ll get the following bordered layout https://prnt.sc/dDSTUKefptRG

2) Use the below code
.products .product {padding: 5px;}

Regards
#323219 Copied
nixatsnow

Participant

May 5, 2022 at 20:28

Thanks Olga! – i placed the combo CSS above but the sidebar widget boxes toggles have dissapeared https://prnt.sc/VzBvOLJk8PXk

And also, i thought the padding all they way around would actually put the padding all the way around but it is not. https://prnt.sc/KnpYzWdLEQAR

i also commented out the above combo CSS you provided and tried to do it your 3rd option with bordered product option turned on in the settings with the .products .product {padding: 5px;} CSS but that also didnt fix the spacing between the rows. weird thing is that the customizer shows the padding properly between products – https://screenrec.com/share/5vCO6gVG3K

but when exited out and on to the actual shop page after publish, and clear cache even on a private browser mode, it doesnt – https://screenrec.com/share/ade0KQOGIi

—–

https://screenrec.com/share/vr7bUemInL

#323226 Copied
Olga Barlow

Support staff

May 5, 2022 at 23:32
Hello,

Add the below code to fix the toggle
```
.s_widgets-open-close .sidebar .sidebar-widget:not(.sidebar-slider)>.widget-title>span:after {
    z-index: 0;
}
```
Below code to fix the bottom space below the product
```
.products .product {
    margin-bottom: 15px;
}
```
Regards
#323242 Copied
nixatsnow

Participant

May 5, 2022 at 23:33

Thank you!

#323243 Copied

nixatsnow

Participant

May 5, 2022 at 23:33

I will plug the above now and let you know if any further issues.

#323244 Copied

Olga Barlow

Support staff

May 5, 2022 at 23:40

Hello,

Yes, sure.

Regards

#323247 Copied
Tagged: best selling, change, colors, customize, luck, themes, woocommerce
Viewing 7 results - 1 through 7 (of 7 total)