[Resolved] Problems with Woo attributes-hook

[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;
}

[David]

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.

[Paul]

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

[David]

Glad to hear that!

[Author]

Posts