Before you ask please READ THIS

woocommerce padding shop page

in FatMoon Posts: 124
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

Comments

  • AirAir
    Posts: 10,970
    Hello :-)

    Somewhere in your system you have added such CSS:
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        margin-top: 15% !important;
    }
    Looks like some custom CSS, however, because it is minified it is hard to know the source.

    With kind regards
  • Posts: 124
    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.
  • AirAir
    Posts: 10,970
    Hey :-)

    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.
  • Posts: 124
    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?

  • AirAir
    Posts: 10,970
    Hey :-)

    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.
  • Posts: 124
    Hi Air,
    Sorry, please check again.
    www.Sensibleedibles.com/shop
  • AirAir
    Posts: 10,970
    Hey :-)

    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.
  • Posts: 124
    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?
  • AirAir
    Posts: 10,970
    wmoarsi said: The normal settings in "customize" provide a padding option but it's not large enough.
    1. Which setting do you mean exactly? You should be able to enter your desired value.

    2. Could you mark on a screenshot where exactly you want to add padding?

    With kind regards.
  • Posts: 124
    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?
    screen.png
    1728 x 1080 - 900K
  • AirAir
    Posts: 10,970
    Hey :-)

    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:
    .widget {
     padding-left:5em;
     padding-right:0;
     padding-top:6em;
    ....
    
    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.
  • Posts: 124
    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!
    image (4).png
    3600 x 1080 - 1M
  • AirAir
    Posts: 10,970
    OK. I know what you are looking for.
    It seems that by adding 38px margin between bricks, it is getting a bit asymmetric.

    Lets try such custom CSS:
    @media only screen and (max-width: 1024px) and (min-width: 769px) {
    	.products-list .layout-full_fixed.with-sidebar .content-box{
    		width: calc(70% - 76px);
    		padding-right: 38px;
    	}
    }
    
    With kind regards.
  • Posts: 124
    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.
    Inkedimage (5)_LI.jpg
    1084 x 1038 - 602K
  • AirAir
    Posts: 10,970
    Sure, let's make it wider :-)

    Please add such custom CSS:
    @media only screen and (max-width: 1024px) and (min-width: 769px) {
    	.woocommerce ul.products.products_variant_under li.product .button {
    		width: 90%;
    		box-sizing: border-box;
    	}
    }
    
    With kind regards.
  • Posts: 124
    Thanks, Air. Worked like charm!
  • Posts: 124
    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?
    image (9).png
    3600 x 1080 - 3M
  • AirAir
    Posts: 10,970
    Hello :-)

    Sorry for a late reply.

    Please add such custom CSS:
    body.tax-product_cat .content-box {
        padding-top: 150px;
    }
    This should do it :-)

    With kind regards.
  • Posts: 124
    Yes ! that worked. Thank you fine sir!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion