eCommerceElementor

How to make a Perfumes 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
html,body{
    overflow-x: hidden;
}
.elementor-page .page-header {
    display: none;
}

.elementor-icon, .elementor-icon-wrapper  {
    line-height: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

.main-navigation ul.sub-menu a {
    font-size: 14px;
}
/*== Shop Page ==*/
.product-loop-wrapper {
    background: #F8F1EA;
    padding: 24px 28px 40px;
}

.woocommerce-loop-product__title {
    font-family: inherit !important;
	  letter-spacing: -0.03em;
}

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

:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
    border-color: #f8f1ea;
}

.wp-block-search__button {
    border-color: #f8f1ea;
}

label.wp-block-search__label {
    font-family: inherit;
    font-weight: 700;
    color: #2b2b2b;
}

.woostify-tag-on-sale {
    background: #4B4036;
}

a.loop-add-to-cart-on-image.ajax_add_to_cart {
    transform: translate(-50%, 200%);
}

/*== header ==*/

.main-navigation .primary-navigation {
    text-align: center;
}

/*== Product list ==*/


ul.products {
    display: flex;
	flex-wrap:wrap;
}

.product-loop-wrapper {
    height: 100%;
}

/*== Shop Single ==*/
.product-images {
    background: #fff;
}

/*== blog Page ==*/

.blog .post-loop .entry-header-item img {
    max-height: 248px;
    object-fit: cover;
}

span.post-read-more a {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
}

.post-loop .entry-header {
    text-align: left;
}

.blog .entry-summary {
    text-align: left;
    padding: 0 !important;
}

/*== Single Blog ==*/
.post-loop .post-cover-image img {
    max-height: 460px;
}

.related-box .related-post img {
    width: 100%;
}


/*== Footer ==*/
ul.wp-block-social-links {
    padding: 0;
	
}

.wp-block-social-links a.wp-block-social-link-anchor{
	display: flex;
	align-items: center;
	gap: 8px;
}

.wp-block-social-links a.wp-block-social-link-anchor svg {
    fill: #B2A69B;
}

.footer-widget .wp-block-heading.has-text-color.has-link-color {
    font-weight: 400;
}
Product Shortcode For All Products
[products limit="8" order="DESC" columns="4" class="quick-sale" orderby="date"]
Product Shortcode For New Arrival Products
[featured_products limit="2" columns="2"  class="featured-product"]
Banner Text Style CSS
<style>
.noWrap .elementor-heading-title{
    text-wrap-mode: nowrap;
}

</style>
Banner Text Style CSS Class
noWrap
Product Category Style CSS
.product-categories .jkit-category-thumbnail {
    margin: auto;
}
.product-categories  .jkit-product-category-content {
    margin-top: 20px;
}

.product-categories .jkit-product-categories {
    display: flex !important;
}

.product-categories .jkit-product-category-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.product-categories span.jkit-product-category-count::after {
    content: ' ITEMS';
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
Product Category Style CSS Class
product-categories
Product Grid Style CSS
.quick-sale .star-rating {
    display: none;
}

.featured-product .product-loop-wrapper {
    background: #fff;
}

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