How to Build a REAL eCommerce Website

19SHARES

Website Default Style CSS

.product-archive li.entry {
    padding: 10px;
}

.product-archive li.entry img {
    border-radius: 20px;

}

a.added_to_cart.wc-forward {
    color: #01050c;
    display: flex;
    justify-content: center;
    align-items: center;
}

/===========================/
/* Single Product Page */
/===========================/
.related.products li.entry.content-bg.loop-entry.product.type-product.status-publish.instock.has-post-thumbnail {
	background: var(--global-palette3);
}

ul.flex-direction-nav {
    display: none;
}

.woocommerce-product-gallery__image {
    border-radius: 20px;
}

ol.flex-control-nav.flex-control-thumbs {
    gap: 4px;
}

ol.flex-control-nav.flex-control-thumbs li {
    background: #F5F9FF;
    border: 1px solid #5D5D5D;
    border-radius: 8px !important;
}

ol.flex-control-nav.flex-control-thumbs li img{
    border-radius: inherit
}

button.single_add_to_cart_button {
    background: var(--global-palette-btn) !important;
    color: #fff !important;
    border: 1px solid var(--global-palette-btn) !important;
}

button.single_add_to_cart_button:hover {
    background: initial !important;
    color: var(--global-palette-btn) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: 1px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: transparent;
    border-bottom: 1px solid var(--global-palette-btn);
}

ul.tabs.wc-tabs {
    padding: 0 !important;
}

nav#kadence-breadcrumbs {
    margin-bottom: 46px;
}

.woocommerce-Tabs-panel h2, .woocommerce-Reviews .woocommerce-Reviews-title {
    font-size: 36px !important;
    line-height: 40px !important;
	font-weight: 400 !important;
}

table.woocommerce-product-attributes.shop_attributes {
    margin-top: 16px;
    background: #fff;
}

.woocommerce .products ul, .woocommerce ul.products {
    padding-bottom: 60px;
}

@media (max-width: 767.98px){
	h1.product_title.entry-title {
    font-size: 14vw !important;
    line-height: 100% !important;
}
}


@media (max-width: 1023.98px){
	h1.product_title.entry-title {
    font-size: 8vw !important;
}

}


button.woocommerce-button.button.woocommerce-form-login__submit {
    background: #fff;
}

button.woocommerce-button.button.woocommerce-form-login__submit:hover {
    background: #0048ff;
}

.woocommerce-info a {
    background: #0048FF;
    color: #fff;
    font-size: 14px;
    padding-left: 10px !important;
    padding-right: 10px;
}