Upcoming

How to make Men Clothing Brand Shop Using Elementor Free

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.
Get Hosting
Elementor The free page builder this tutorial is built with.
Get Elementor
Elementor Pro The Pro upgrade used throughout this tutorial.
Get Elementor Pro
Project Files Download the resources used in this tutorial.
Download Files
Kitninja eCommerce Elementor template kits.
Get Templates
Kitpapa Ready made Elementor template kits.
Get Templates

Prompt Used in This Tutorial

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
</style>
.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;
}
</style>
JS for Banner Product
<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.banner-featured-product .product-loop-wrapper').forEach(function (product) {
    const button = product.querySelector('.loop-add-to-cart-on-image');
    const content = product.querySelector('.product-loop-content');

    if (button && content) {
      content.appendChild(button);
    }
  });
});
</script>
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

Get Your FREE Freelancing Roadmap

Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.

Free eBook Download

Related Tutorials

From learning the right skills to building a stronger digital presence, we help you turn ideas into practical, professional results.

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

21.8K views

View Tutorial

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

3.3K views

View Tutorial

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel

3.4K views

View Tutorial

Browse All Tutorials