Woocommerce CSS snippety

Domovská stránka » Woocommerce CSS snippety

Tieto CSS snippety sú vhodné na použitie pri e-shopoch, ktoré sú založené na Woocommerce + Elementor PRO. Téma Hello Elementor. Pri ostatných témach môžu nefungovať.

Všeobecné

Ceny pred a po zľave

Odstráni defaultné html vlastnosti tagov del a ins (predčiarknuté a podčiarknuté), zmenší a „zosiví“ starú cenu, zvýrazní novú.

				
					selector del {
    font-size: 85%;
    color: #999;
}

selector ins {
    text-decoration: none;
}

Product archives

Obsahuje všetky zoznamy produktov, ak sú tak nastavené, čiže stránka obchodu, kategorie, tagy, vlastnosti, vlastné taxonómie…

Obrázok

Zabezpečí, aby produktové obrázky mali vždy rovnakú výšku, tým pádom to v zozname produktov nebude skákať jak retardované. Funguje na elemente ARCHIVE PRODUCTS a PRODUCTS

				
					selector img {
    height: 300px!important;
    object-fit: cover;
    object-position: center center;
}

Single product

Add to cart button

Vyhodí otravný a nevkusný delete link, ktorý sa zjaví po výbere varianty

				
					selector a.reset_variations {
    display: none!important;
}

Vlastnosti produktu

Zobrazí odpornú default tabuľku vlastností v product taboch ako sa patrí.

				
					selector table.shop_attributes th {
    text-align: left;
    border: 0;
}

selector table.shop_attributes td {
    border: 0;
    font-style: normal;
}

My account

Zrobí stránku Môj účet tak, aby sa na to dalo pozerať. Aspoň relatívne.

				
					.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 25%;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 73%;
}

selector .woocommerce-MyAccount-navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

selector .woocommerce-MyAccount-navigation ul li {
    background: var(--e-global-color-primary);
    border-bottom: 1px solid #fff;
    transition: all 350ms ease;
}

selector .woocommerce-MyAccount-navigation ul li a {
    color: #fff;
    display: block;
    padding: 10px 20px;
}

selector .woocommerce-MyAccount-navigation ul li:hover {
    background: var(--e-global-color-secondary);
}

@media screen and (max-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100%;
    }
    
    .woocommerce-account .woocommerce-MyAccount-navigation ul  {
        margin-bottom: 30px!important;
    }
    
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        padding: 10px;
    }
}