I'm adding increment buttons on product page around quantity div, which contains quantity input field. I hook my button-generating functions create_button_before and create_button_after:

add_action( 'woocommerce_before_add_to_cart_quantity', 'create_button_before' );        
add_action( 'woocommerce_after_add_to_cart_quantity', 'create_button_after' );

This works great apart from one thing. I would like the buttons to be adjacent without space to quantity div as inline-block elements. Unfortunately inline-block in CSS separates elements with line breaks styled as white spaces.

On product page there is no way I can apply regular CSS hack to make parent element's font-size 0 (space would have 0 width) and explicitly state font-size of all children. It's because there is no constant element structure of ancestors - it changes based on whether product is single, variable, grouped etc. Maybe I would somehow be able to handle all cases, but maintenance-wise it would be worse than overriding templates.

Is there any way I could eliminate line breaks after my first button and before second button with PHP, while not overriding template?

EDIT: I found out that as CSS solution, display: block and float: left will work properly, assuming that I add left margin to Add to cart button which is next to my buttons. I still would like to know if I can achieve this through PHP.

1 Answers

chatnoir On

How about in your 'create button' functions, when creating the button html, include inline styling in your button?

style="display:block; float:left"

If this style is meant to be applied to a parent container, then include <style></style> on your page to override that container with this style?