Spacing and Button Colour

Hello,

you can select predefined button styles in plugin settings:

https://i.imgur.com/iewb4Rq.png

Hovering over the “?” icon will show a tooltop about what elements exactly are colored by the plugin.

You change colors to completely custom values by repeating the CSS selector in a child theme and applying your own style.

Unfortunately, from a screenshot alone I’m not able to tell why there is such a gap. It is very theme dependent, things as padding, margin, and alignment are involved. I would need a page link.

Best regards,

Ryszard

Hi Ryszard!

Thanks for the reply. Noted on the following for the buttons style. I will check that one out.

As for themes. My Site is running on Astra Theme.

Here is a link for your reference on my use case.

Appreciate your help on this ?? Thanks.

Regards,
Wen Jun.

Hi,

setting padding-left to some value in em or px for td element will handle the spacing:

https://i.imgur.com/JgynoFt.png

Also, the elements can be closer to each other by giving the table element width: auto;:

https://i.imgur.com/IP4qdWU.png

Keep in mind that the CSS applied is from a selector table, meaning it applies to all tables on the website. It would be good to use this instead to target this specific table by its both classes:
table.woocommerce-grouped-product-list.group_table

Best regards,

Ryszard

Hi Ryszard,

Thanks ! That did the trick. However I need one more final adjustment, due to the button size being too big horizontally and vertically I had to adjust it accordingly in order to recieve inputs from the user. Any idea how i can make adjustment to make the quantity field match the quantity + & – buttons in this scenario ? As illustrated in this screenshot.Would like for it to match the red lines as shown in the screenshot.

Here is the updated link to my page which I am working on.

As always. Thanks again in advance ! ??

Regards,
Wen Jun.

Hello,

as far as I understand, the problem will be resolved with:

.qib-container .quantity input.qty:not(#qib_id):not(#qib_id) {
    vertical-align: top;
}

Hopefully it doesn’t break CSS on other pages.

Cheers,

Ryszard

Hi Ryszard,

Thanks for the custom css code, however when i applied this to the buttons, there was no changes made. The layout is still the same. Any other idea for a workaround for this ? ??

Here is the link and screenshot for my site for your reference once more.

Regards,
Wen Jun.

Hello,

sorry for the late answer, here is a fix, I will have it added in the next plugin version to handle such a case:

.qib-container div.quantity:not(#qib_id):not(#qib_id) {
    line-height: 1;
}

Best regards,

Ryszard

Hi @taisho ,

Thanks for the reply ! I pretty much had to realigned the buttons pixels to adjust in such a way that the top of the buttons are aligned. Anyways thanks again for the provided CSS Code, i will give it a try on it too.

Regards,
Wen Jun.

Hi @taisho ,

Sorry i want to reopen back this thread for one more question, just want to ask you one more question. Is it possible to disable your plugin for the 1 or 2 products based on product id ? while maintaining the buttons for other products.

Regards,
Wen Jun.

Hello,

unfortunately, it is not possible. I will note this idea because it’s at least a second time I see it mentioned.

Best regards,

Ryszard