How can I change padding between two rows in shop page of woocommerce? and padding on sidebar? is there setting feature or CSS? sensibleedibles.com/shop
Hi again, So, the top and left margins work! cool! but I can't seem to change the padding of the rows between products. I've turned off minify. Thanks in advance.
GO to Customizing → Shop(WooCommerce) settings → Products list → Brick margin. This is where it is set, unless there is some Custom CSS as well this time :-)
Thanks! Turns out the top-margin padding was not only padding the top of the page but each product. I removed it and the setting worked with a brick margin. However, i lost my padding on top of the shop page. Do you have CSS to add padding only to the top of the shop page?
Hey, Actually, i used block editor. It did the trick for the top. But that's as far as I got. I don't know how to add padding to the left and the right of the page. I'd like to add a global padding on all woocommerce pages. The normal settings in "customize" provide a padding option but it's not large enough. How can I add padding?
1.customizing>shop(woocommerce)>product list> conent layout. Options are full width, center width, left fixed, right fixed, with our without padding etc... 2. yes, see attached screen shot. Notice how it seems aligned to the right. I'd like some padding to the right end. So the entire page looks centered. Does that make sense?
You have probably chosen to use Full width + padding option. By default, it adds 40px padding on each side, and lowering this value to 20px and later to 0 for smaller screen sizes.
Hey Air, I tried as you said with removing the CSS and changing to Fullwidth + fixed content. However, still 0px in narrow screen. I attached an image here of our old shop page (right side) and our current (left side). i'd like to have a similar padding when in narrow screen for shop page. Thanks!
cool! this worked. Your killing Air! My add to cart button on each product image in shop page looks funny. The text "cart" created a new line below it. Can we widen the size of the button? See Screenshot.
Hi there, Im trying to add padding to the top of my woocommerce pages. I was able to it to my main shop page using block editor, but for my main page only. i'd like the same padding on my category pages. When a customer clicks on a category, the page does not have padding. Can you help provide a css? or woo setting?
Comments
Somewhere in your system you have added such CSS: Looks like some custom CSS, however, because it is minified it is hard to know the source.
With kind regards
So, the top and left margins work! cool! but I can't seem to change the padding of the rows between products. I've turned off minify. Thanks in advance.
GO to Customizing → Shop(WooCommerce) settings → Products list → Brick margin.
This is where it is set, unless there is some Custom CSS as well this time :-)
With kind regards.
It seems your link is no longer working. Have you moved your website?
I would need it to prepare solution for you.
With kind regards.
Sorry, please check again.
www.Sensibleedibles.com/shop
It seems that on top of your shop page there is a header with class with
woocommerce-products-header
and it has 150px of height.Do you wish to replace it with padding, or you want to increase its height? Seems like the height of this is set somewhere else.
Did you use some custom template to create your shop page, as it doesn't look like a standard theme shop page?
With kind regards.
Actually, i used block editor. It did the trick for the top. But that's as far as I got. I don't know how to add padding to the left and the right of the page. I'd like to add a global padding on all woocommerce pages. The normal settings in "customize" provide a padding option but it's not large enough. How can I add padding?
2. Could you mark on a screenshot where exactly you want to add padding?
With kind regards.
2. yes, see attached screen shot. Notice how it seems aligned to the right. I'd like some padding to the right end. So the entire page looks centered. Does that make sense?
You have probably chosen to use Full width + padding option. By default, it adds 40px padding on each side, and lowering this value to 20px and later to 0 for smaller screen sizes.
You have also added such custom CSS: This CSS pushes your sidebar content to the right more.
On your screenshot, you have narrowed the window enough that 0px padding kicks in.
At your place, I would remove above-mentioned custom CSS, and use instead Full width + fixed content option.
If you need later some tuning for narrower screen widths we can work on it.
With kind regards.
I tried as you said with removing the CSS and changing to Fullwidth + fixed content. However, still 0px in narrow screen. I attached an image here of our old shop page (right side) and our current (left side). i'd like to have a similar padding when in narrow screen for shop page. Thanks!
It seems that by adding 38px margin between bricks, it is getting a bit asymmetric.
Lets try such custom CSS: With kind regards.
My add to cart button on each product image in shop page looks funny.
The text "cart" created a new line below it.
Can we widen the size of the button?
See Screenshot.
Please add such custom CSS: With kind regards.
Im trying to add padding to the top of my woocommerce pages. I was able to it to my main shop page using block editor, but for my main page only. i'd like the same padding on my category pages. When a customer clicks on a category, the page does not have padding. Can you help provide a css? or woo setting?
Sorry for a late reply.
Please add such custom CSS: This should do it :-)
With kind regards.