Przycisk „Dodaj do koszyka” w formie ikony

Na pewno nie raz widzieliście sklep internetowy, w którym za dodawanie produktu do koszyka odpowiadała tylko ikona z wózkiem/koszykiem. WooCommerce domyślnie umieszcza duży button tuż pod ceną produktu:

Zatem w jaki sposób zamienić „Dodaj do koszyka” na ikonę?

Wystarczy odrobina kodu. Na początek potrzebujemy ikony. Osobiście korzystam z biblioteki Font Awesome 6 i w tym przypadku wykorzystam „fa-cart-circle-plus”, ale równie dobrze można skorzystać z grafiki lub ikony, którą należy wcześniej wrzucić na serwer.

Przycisk w pojedynczym boksie z produktem już jest, ale musimy go odpowiednio ostylować, zatem ukrywamy tekst, obramowanie, tło, dodatkowo ustawiamy pozycję absolutną.

ul.products li.product .button {
    position: absolute;
    height: 50px;
    bottom: -0.5rem;
    right: 0rem;
    background: none;
    margin: 0;
    padding: 0;
    border: 0;
    text-indent: -9999px;
}

Teraz dodajemy ikonę za pomocą pseudo-elementu:

ul.products li.product .button::before {
    position: absolute;
    left: -3rem;
    top: -1rem;
    content: "\e3f3";
    font: var(--fa-font-solid);
    padding: 1rem 0.9rem;
    background: transparent;
    border-radius: 100%;
    border: 1px solid #d8d8d8;
    color: #bf1e2e;
    text-indent: 0;
    font-size: 1rem;
    transition: .25s ease-in-out;
}

Na liście produktów powinno to wyglądać w ten sposób:

Dodajmy efekt hover, za pomocą którego przycisk nabierze trochę życia:

ul.products li.product .button:hover::after {
    background: #bf1e2e;
    border: 1px solid #bf1e2e;
    color: #fff
}

Jeśli macie w panelu WooCommerce > Ustawienia > Produkty włączone dodawanie produktów do koszyka w technologii AJAX:

To należy jeszcze ostylować link „zobacz koszyk”, który pojawi się po przeładowaniu (w tle) gdy klikniecie w ikonę:

ul.products li.product .added_to_cart {
    position: absolute;
    bottom: 1.25rem;
    right: 3.75rem;
    text-transform: lowercase;
    font-size: .85rem;
    color: #888;
}

oraz efekt hover:

ul.products li.product .added_to_cart:hover {
    text-decoration: underline
}

Oczywiście powyższy kod można dowolnie modyfikować wedle uznania czy pod motyw, na którym pracujecie – ogranicza was wyłącznie wyobraźnia. A wy jakie macie sposoby na personalizację przycisku Dodaj do koszyka? Chętnie poznam wasze sposoby na modyfikację „Dodaj do koszyka”.

W razie problemów z przyciskiem pisz śmiało na hello@wp-lab.pl.