Add to Cart button overlaps text

Support
#1

Hi there wondering how I can get the add to cart button to all line up. Seems the products with more text on it the button overlaps is there a way to have them all the same level without overlapping? Thanks
www.honestlynatural.com/shop

#2

Also the products stop when there is still room for 3 more before clicking to the next page… any way to have them continue to the end of the page like the ones above? You can see with the screen shot after the ‘just for new mums’ there is still room for 3 more products.

#3

Hi,

I checked and can see that you have added some custom css that alters the layout of your shop.

For example your shop page was set to display 3 columns but you added this code to make it 4

.woocommerce li.product {
    float: none;
    margin: 0 5px 60px !important;
    padding: 0;
    max-width: 100%;
    display: inline-block;
    width: 22% !important;
}

Please remove any custom css and check your shop page layout.
As much as possible please use the theme’s native settings/features instead of modfying it through custom css

Thanks

#4

Ive removed that code and changed it to 4 through the theme settings but it still has space for 3 more on the bottom row like in the picture.
Also the Add to cart button is still overlapping some of the text…

#5

Hi There,

Please find this custom CSS:

.woocommerce li.product .entry-header .button {
    position: absolute;
    top: auto;
    bottom: 0;
    opacity: 1;
}

And change to this:

.woocommerce li.product .entry-header .button {
    position: absolute;
    top: auto;
    bottom: 0;
    opacity: 1;
    width: 100%;
    left: 0;
}
.woocommerce li.product .entry-header h3 {
    font-size: 130%
}

Hope it helps :slight_smile:

#6

Thank you Thai, As always you and your team are amazing at explaining how to get things fixed!!

Now how do I get the products to go to the very end instead of stop at one on the last line? I’d like it to have 4 along the bottom aswell so it doesnt mislead customers to think that is the last product even though there are many pages more.

Thanks

#7

Hello There,

Thanks for updating in! To change the number of product items to display in the shop page and make sure that it fill the bottom of the page right before the pagination, please go to X > Theme Options > WooCommerce > Shop and insert 13 in the posts per page option.

We would loved to know if this has work for you. Thank you.

#8

Thank you, Yes it has worked perfectly… You are all such amazing support :grinning:

#9

Glad we were able to help :slight_smile:

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.