Zmiana ikony koszyka WooCommerce DIVI

Przykład: Zmień ikonę koszyka na dymek (kontur)

/* Change cart icon to speech bubble (outline) */ 
.et-cart-info span:before {
    content: '\76';
    font-family: 'ETmodules' !important;
}

Przykład: Zmień ikonę koszyka na dymek (wypełniony)

/* Change cart icon to speech bubble (filled) */
.et-cart-info span:before {
    content: '\e065';
    font-family: 'ETmodules' !important;
}

Zmiana ikony koszyka na obraz

Jeśli masz obraz, którego chcesz użyć zamiast ikony koszyka, możesz wstawić go za pomocą następującego kodu CSS:

.et-cart-info span:before {
    /* icon made by stephen-hutchings from www.flaticon.com */
    background: url('https://image.flaticon.com/icons/svg/2/2772.svg') !important;
    content: '';
    display: inline-block; 
    height: 1em !important;
    width: 1em !important;
    vertical-align: -1px;
}

Zmień adres URL na adres pliku obrazu. Możesz także pobawić się szerokością i wysokością, aby uzyskać rozmiar ikony, którą lubisz, oraz wartość wyrównania w pionie, aby przesunąć ją w górę lub w dół.

Oto przykład efektu. W tym przypadku różnica nie jest ogromna, ponieważ właśnie zastąpiłem ikonę solidnego koszyka ikoną szkieletową, ale powinna dać ci pomysł. Zauważ, że zastosowałem również „filter: invert (100%);” zmienić moją czarną ikonę na białą.