Realigning quantity and plus/minus buttons

  • Resolved JohnM13

    (@johnm13)


    4 years, 6 months ago

    Hi. I have been trying to get product variations to come up on the shop page (so customers don’t have to leave the page), and I found this snippet: 

    add_action( 'woocommerce_before_shop_loop', 'handsome_bearded_guy_select_variations' );

function handsome_bearded_guy_select_variations() {
	remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
	add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 30 );
}

    and it works perfectly in that the variations come up right there on the shop page. EXCEPT, now my plus, minus and quantity info are misaligned. I’ve tried everything I can think of via Inspect to fix this, to no avail. Would someone be able to point me in the right direction on this?

    • This topic was modified 4 years, 6 months ago by bcworkz. Reason: code fixed

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • .woocommerce ul.products li.product .quantity {
    display: inline-block;
}
.woocommerce ul.products li.product .button {
	display: block;
	margin: 5px auto 15px;
}

    You can try the above. It’s probably not going to be perfect but it’s a good start.

    Thread Starter JohnM13

    (@johnm13)

    You were right! It’s not perfect, but it is very very close. Thank you so much for this. It will also help me learn more about using Inspect to tweak CSS when I get time to play with the code to see HOW it works. So you’ve helped me twice. Thank you again.

    Thread Starter JohnM13

    (@johnm13)

    Sorry for starting this again: after messing around with the code I thought of a question that may or may not be easy to answer.
    Why is it that sometimes you need to have quite a few “elements called e.g.
    .woocommerce ul.products li.product .button {
    display: block;
    margin: 5px auto 15px;}
    and sometimes very few (or just one) e.g.
    .quantity .minus{ display: none}
    I hope this question makes sense.

    That’s the “Cascading” part of CSS.

    .button { color: red; }
li.product .button { color: blue; }
ul.products li.product .button { color: green; }
.woocommerce ul.products li.product .button { color: orange; }
    
<div class="woocommerce">
<ul class="products">
<li class="product">
<div class='button'>
Button!
</div>
</li>
</ul>
</div>

    with that the .button text will be orange. It’s specificity. The more chained classes/ids the more specific your selector is and harder for some other CSS to overwrite/interfere with.

    Thread Starter JohnM13

    (@johnm13)

    Oh, of course. Thanks for the explanation. I’m off to some more experimentation with my new found knowledge. Cheers.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Realigning quantity and plus/minus buttons’ is closed to new replies.