Css selector to style Add to Cart button block

  • Resolved hebhansen

    (@hebhansen)


    2 months ago

    Hey Woo

    How can I css style the Add to cart button. I cannot figure out what the selector is. I am adding my own class for light buttons on dark background. This is a rarity though, so I also need the dafault.

    .my-light-button :root :where(.wp-element-button, .wp-block-button__link)

    will not work….

    Thx

Viewing 1 replies (of 1 total)

  • Hi @hebhansen ,

    You can use this formate in your custom CSS place –

    /* Default WooCommerce Add to Cart buttons */
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce a.add_to_cart_button {
    background-color: #f5f5f5;
    color: #333;
    }

    /* Apply your custom light button styles */
    .my-light-button.woocommerce a.button,
    .my-light-button.woocommerce button.button,
    .my-light-button.woocommerce input.button,
    .my-light-button.woocommerce a.add_to_cart_button {
    background-color: #fff;
    color: #000;
    border: 1px solid #ddd;
    }

    /* Hover effect for light buttons */
    .my-light-button.woocommerce a.button:hover,
    .my-light-button.woocommerce button.button:hover,
    .my-light-button.woocommerce input.button:hover,
    .my-light-button.woocommerce a.add_to_cart_button:hover {
    background-color: #eaeaea;
    color: #111;
    }

    Thank you.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.