Before you ask please READ THIS

woocommerce padding shop page

in FatMoon Posts: 47
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,606
    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: 47
    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,606
    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: 47
    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,606
    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: 47
    Hi Air,
    Sorry, please check again.
    www.Sensibleedibles.com/shop
  • AirAir
    Posts: 10,606
    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: 47
    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,606
    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: 47
    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,606
    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: 47
    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,606
    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: 47
    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,606
    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: 47
    Thanks, Air. Worked like charm!
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