[Resolved] What are these css selectors applied to?

Home Forums Support What are these css selectors applied to?

This topic contains 4 replies, has 2 voices, and was last updated by  tractor-1 1 month, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1244925


    What are these WooCommerce CSS selectors on single product applied to?

    .do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden)::after, 
    .do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden)::before 



    David Customer Support

    Hi there,

    they’re used to style the GP + / – quantity buttons.



    What part of +/- buttons exactly?

    This is the whole chunk, similar to what Tom posted here:
    .do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden)::after,
    .do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden)::before,

    .woocommerce form .quantity.buttons-added .minus,
    .woocommerce form .quantity.buttons-added .plus,
    .woocommerce form .quantity.buttons-added .qty

    Minus, plus and qty are doing their thing fine, it’s the first two selectors that I’ve no clue what they’re applied to.


    David Customer Support

    They are for the fallback buttons in case the users browser is blocking Javascript.
    If enabled the GP Quantity Buttons rely on Javascript to replace the default browser +/- input.
    Part of that script adds the button-added class.
    However, if the user browser is blocking JS then the button-added class is not added. And then those classes kick in to add the + and – symbols as CSS pseudo elements.



    Thank you, that helped.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.