"Add to basket" button keeps getting unaligned


#1

Hey,

I have a problem with the “Add to basket” button on this page: http://www.smokeshop.se/produkter/
I keep adding products and the buttons keep getting unaligned. I can’t even change it even if I edit the text.

Thx in advance!


#2

Hi,

Did you mean that you want the button to be displayed in one line? http://prntscr.com/gjf4yn
like this http://prntscr.com/gjf5c9?

If yes, please add these CSS code into: Customize > additional CSS.

.woocommerce ul.products li.product .price {
    height: 50px;
}

Regards,
Awan


#3

Hey Awan,

Thx for your reply!

It actually worked a little bit but as you can se here: http://www.smokeshop.se/produkter/page/2/ it is still not fixed. Some of the products are still the same

Thx!


#4

Hi,

Try to add this please:

.woocommerce ul.products li.product a img, .woocommerce div.product div.images img {
    height: 200px;
    width: auto;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    height: 50px;
}

Regards,
Awan


#5

Hey Awan,

Thx a lot man it worked. But how come in the last row, there is only one product? I would like it to be 3 per row all the time. Also, can you add an option for the page to show 25, 50 or 100 products without switching page?

Thx!


#6

Hey again,

when visiting http://www.smokeshop.se/produkter/ on mobile version all the pics are aligned to the left now. How can I make the align to the center?

Thx!


#7

Hi,

Please create new thread for this question: “there is only one product? I would like it to be 3 per row all the time. Also, can you add an option for the page to show 25, 50 or 100 products without switching page?”.

And to centering the image, use CSS code below:

.woocommerce ul.products li.product a img, .woocommerce div.product div.images img {
    margin: 0 auto;
}

#8

Okay i have created a new topic about that.

The problem now is that the pictures are very stretched and small when you visit the products page here it looks terrible

Thx


#9

Hello?


#10

Hi,

I am sorry for late reply. Please try this CSS code below to resize the images in thumbnail list http://prntscr.com/glrhfw:

.yith_magnifier_gallery li img {
    height: 100px !important;
    width: auto !important;
}

If you have another question which is not related to the topic of this thread, please post it in new thread.

Regards,
Awan