Can Anyone Provide CSS to Increase Space Below “Add to Cart” Button

  • Resolved Frank B.

    (@frankbiganski)


    7 years, 5 months ago

    The Add to Cart button is very close to the image under it, so I’d like to create some spacing between the Add to Cart button and the next row’s images. It would be really great if I could add a horizontal bar instead.

    I’m not a coder but in searching online, I created this CSS which pushes the Add to Cart button closer towards the price, thus creating more space under the button. But this isn’t what I’m trying to do. Again, not a coder but I have decent luck in Backwards Engineering 101.

    .woocommerce ul.products li.product .button {
    bottom: 10px;
    }

    Thanks in advance!

    Frank

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • melinda a11n

    (@melindahelt)

    Automattic Happiness Engineer

    7 years, 5 months ago

    Hi there

    I’m unable to inspect your page to provide some custom CSS since you have disabled the option to right click on the page. If you can disable that, we can take a look.

    Thread Starter Frank B.

    (@frankbiganski)

    7 years, 5 months ago

    Hey there. Just disabled. 🙂

    Plugin Support Ryan Ray

    (@ryanr14)

    7 years, 5 months ago

    Hi @ frankbiganski,

    Thanks for disabling that for the time being. I would open up the Customizer and head into the Additional CSS section and add this. Adjust the amount of pixels or change it to percent as needed.

    
.woocommerce .products .product {
    margin-bottom: 30px;
}

    For example using 5% instead of 30px looks like this and would remain more flexible on different screen sizes.


    Link to image: http://cld.wthms.co/LQ0KzF

    • This reply was modified 7 years, 5 months ago by Ryan Ray.
    Thread Starter Frank B.

    (@frankbiganski)

    7 years, 5 months ago

    Thank you Ryan but that only seems to work on Chrome and not with IE or Firefox. Although not as important, I don’t think it works on an iPad or iPhone 6s either. I tried both percent and px (not that I know if that would matter) but no affect – just works on Chrome.

    3 Sons Development

    (@3sonsdevelopment)

    7 years, 2 months ago

    Hello @frankbiganski,

    My apologies for us not getting back to you again on this. I see that the “Add to cart” buttons have been removed from that page. Do you still want to change the spacing there?

    Let us know,

    Plugin Support John Coy a11n

    (@johndcoy)

    Automattic Happiness Engineer

    7 years, 2 months ago

    Hi there,

    We haven’t heard back from you in a while now so we’ll mark this thread as resolved. Please open a new thread should you have any further questions.

    Thanks,

    Thread Starter Frank B.

    (@frankbiganski)

    7 years, 2 months ago

    Hi,

    Sorry for my delay but yes, my issues were resolved by the author of the theme I use called Total. He rolled out a major update that specifically included updates and features to the WC plugin, including being able to add some spacing.

    The upgrade also included an option for the Add to Cart button to appear on mouse over thumbnail.

    Then to prevent visitors from being able to access the larger original hi-res images, the author (or someone) suggested I add the following CSS, which prevents the larger images from opening on the product page

    .woocommerce div.product .images, .woocommerce-page div.product .images {
    pointer-events: none !important;
    }
    .woocommerce-Tabs-panel > h2 {
    display: none;
    }

    It’s been a while since I’ve had the time to work on my personal photography site, but I do appreciate everyone’s replies. Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Can Anyone Provide CSS to Increase Space Below “Add to Cart” Button’ is closed to new replies.