Get Ready Elementor Templates

How to make Men Clothing Brand Shop Using Elementor Free

Subscribe To My YouTube Channel For More Upcoming Videos

Website Default Style CSS

body, html{
	overflow-x: hidden;
}
.elementor-heading-title {
    word-break: normal;
}
/*== Header ==*/
.main-navigation .primary-navigation > .menu-item .sub-menu a {
    font-size: 14px;
}


.elementor-page .page-header {
    display: none;
}
.page-header .entry-title {
    font-size: 60px;
		font-weight: 600;
}

.page-header .entry-title {
    text-align: center;
}
@media (max-width: 1023.98px){
	.page-header .entry-title {
    font-size: 40px;
    line-height: 1.3em;
    margin-bottom: 12px;
}

}

.woostify-breadcrumb .item-bread {
    color: #1d2025;
}

.woostify-breadcrumb .item-bread a {
    color: #1d2025;
}


/*== Peoduct Grid ==*/
.product-loop-wrapper {
    background: #F3F5F7;
    padding: 72px 28px 40px;
}

.product-loop-image-wrapper .product-loop-image {
    border-radius: 200px;
}

.product-loop-content {
    padding: 0;
    margin-top: 25px;
}

.woocommerce-loop-product__title {
    letter-spacing: -0.03em;
}

.woocommerce-loop-product__title {
    line-height: 1.2em !important;
}

a.woocommerce-LoopProduct-link img {
    margin: auto;
}

figure.image-item {
    background: #fff;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.easyzoom-flyout {
    display: none;
}

a.added_to_cart.wc-forward {
    color: #fff;
}

a.loop-add-to-cart-on-image.add_to_cart_button.ajax_add_to_cart {
    padding: 14px 37px;
    font-size: 16px;
    font-weight: 600;
}

.woocommerce-loop-product__title {
    font-weight: 500;
    line-height: 1.2em !important;
}
.woocommerce-pagination {
    margin-top: 25px;
}

/*=== Blog Post ===*/
.blog .post-loop .summary-text {
    display: none;
}

.blog .post-loop aside.entry-header-item.entry-meta {
    background: #F3F5F7;
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
}

.entry-header-item.alpha.entry-title {
    text-align: left;
    margin: 0;
}

.post-loop .post-cover-image {
    margin-bottom: 6px !important;
    display: flex;
}

/*=== Blog  Single ===*/

.entry-header-item.post-cover-image img {
    width: 100% !important;
    max-height: 600px;
}
#commentform input[type=submit] {
    border-radius: 0;
}

.related-box .related-title {
    font-size: 28px;
}

.related-box .entry-title {
    margin-top: 12px;
    margin-bottom: 10px;
}

/* Cart, Checkout etc. */
.woocommerce-account #content {
    min-height: auto;
}


/*=== Footer ===*/
.widget-title {
    margin-top: 0;
}
.footer-widget ul li a:hover {
    color: #FF7512;
}

 

Product Shortcode For Banner


[featured_products limit="1" class="banner-featured-product"  columns="1"]

 

Style CSS for Banner Product



.banner-featured-product .product-loop-wrapper {
    display: flex;
    padding: 0;
    background: transparent;
    align-items: center;
    gap: 20px;
}

.banner-featured-product .loop-add-to-cart-on-image.add_to_cart_button.ajax_add_to_cart.added {
    display: none;
}

.banner-featured-product a.added_to_cart.wc-forward {
    padding: 14px 37px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    background-color: #1D2025;
    color: #FFFFFF;
    border-radius: 0px;
    display: inline-flex;
}

@media (max-width: 767.98px){
    .banner-featured-product .product-loop-wrapper {
    flex-direction: column;
}
.banner-featured-product .loop-add-to-cart-on-image {
    padding: 7.6px 22px;
    font-size: 14px;
}
}

@media (max-width: 1024px){
    .banner-featured-product .product-loop-wrapper {
    flex-direction: column;
}
.banner-featured-product .products .product {
    width: 100% !important;
}
}

.banner-featured-product .product-loop-content {
    text-align: left;
    margin: 0;
}

.banner-featured-product .woocommerce-loop-product__title {
    line-height: 1.3em !important;
}

.banner-featured-product .wlfmc-add-to-wishlist {
    display: none;
}

.banner-featured-product li.product {
    margin: 0 !important;
}

.banner-featured-product .product-loop-image-wrapper {
    width: 38%;
}


.banner-featured-product .loop-add-to-cart-on-image {
    display: inline-flex;
    margin-top: 10px;
    padding: 8px 24px !important;
    font-size: 16px;
    font-weight: 500;
    background: transparent;
    border: 1px solid #B6B6B6;
    border-radius: 100px;
    color: #102B2A;
    text-transform: uppercase;
}

.banner-featured-product .loop-add-to-cart-on-image:hover {
    padding: 8px 24px !important;
    background: #102B2A;
    border: 1px solid #102B2A;
    color: #fff;
}

 

JS for Banner Product




 

Product Shortcode For Tab Products


[products limit="8" columns="4" category="shirts"]
[products limit="8" columns="4" category="jeans"]
[products limit="8" columns="4" category="suits"]

 

Tab Products Style CSS


.category-clothing-product .e-n-tab-title[aria-selected="true"] {
    transform: translateY(-10px);
}

.category-clothing-product .e-n-tab-title {
    position: relative;
}

.category-clothing-product .e-n-tab-title::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: 8px;
    height: 8px;
    background: #FF7512;
    border-radius: 50px;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
}

.category-clothing-product .e-n-tab-title[aria-selected="true"]::before {
    opacity: 1;
    visibility: visible;
}


 

Tab Products Style CSS Class


category-clothing-product

 

Product Shortcode For Popular Product


[products  limit="3" columns="3" class="popular-products"]

 

Popular Products Style CSS


.popular-products .product-loop-image-wrapper .product-loop-image {
    border-radius: 0;
}

.popular-products .product-loop-wrapper {
    background: #fff;
    padding: 0px 28px 40px;
}

.popular-products .woocommerce-loop-product__title {
    line-height: 1.3em !important;
}


.popular-products .wlfmc-add-to-wishlist
{
    display: none;
}


@media (max-width: 1024.98px){
    .popular-products .products .product:last-child{
        display: none;
    }
}

 

Blog Style CSS For Home Page


.myBlogs .wpr-grid-item-date span.wpr-grid-extra-icon-left {
    font-size: 20px !important;
}

.myBlogs .wpr-grid-item-date div > span {
    display: flex !important;
    align-items: center !important;
}

 

Blog Style CSS Class For Home Page


myBlogs