[Resolved] Problems with Woo attributes-hook

Home Forums Support [Resolved] Problems with Woo attributes-hook

Home Forums Support Problems with Woo attributes-hook

Viewing 4 posts - 31 through 34 (of 34 total)
  • Author
    Posts
  • #2044987
    Paul

    Yeah! 🙂

    I’m sorry to annoy you, but before I’ll mark this as resolved, one more question:
    I added an icon of a staple of books before the add-to cart button. When you click on the button now, the loading-wheel is a bit off. I’ve been playing around with the CSS but I can’t get it right. Do you maybe know how to fix this?

    This is the CSS I’ve used:

    /* Woo Commerce Add to Cart button Icon before */
    
    .woocommerce ul.products li.product .button:before{
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url('https://neu.klingenbergverlag.at/wp-content/uploads/2021/11/icon-buecher-3.svg');
        margin-right: 1.25ch;
    	position: relative !important;
    	top: 5px;
    }
    
    /* Woo Commerce Add to Cart button Styling */
    .woocommerce #respond input#submit, .woocommerce .product .add_to_cart_button.button {
        color: #657E21 !important;
        background-color: #fcfcfa !important;
        font-weight: bold;
        text-transform: none;
        font-size: 14px !important;
    }
    
    .woocommerce ul.products li.product .button {
        margin-top: 0em;
    }
    #2045040
    David
    Staff
    Customer Support

    You can make the button a flex box and use the align items property:

    .woocommerce ul.products li.product .button {
        display: flex;
        align-items: center;
    }

    This should auto center any element inside it including those :before/:after pseudo elements.
    Then you can get rid of the position: relative; and top: 5px properties.

    #2045128
    Paul

    Thank you, once more, this has been great! 🙂
    Now it looks all very neat!

    #2045626
    David
    Staff
    Customer Support
Viewing 4 posts - 31 through 34 (of 34 total)
  • You must be logged in to reply to this topic.