eCommerceElementor

How to make a Bakery & Confectionery 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
.elementor-page .page-header {
    display: none;
}

.elementor-icon {
    line-height: 0;
}
.elementor-button-icon svg {
    width: 28px;
    height: 28px;
}
a.add_to_cart_button {
    opacity: 1 !important;
    visibility: visible !important;
    border: 1px solid #341612;
    bottom: -70px !important;
    top: auto !important;
    width: 100%;
}

.product-loop-wrapper {
    display: flex;
    flex-direction: column;
	background: #fff;
}

.product-loop-content {
    order: 1;
}

.product-loop-image-wrapper {
    order: 2;
	overflow: visible;
}

.product .product-loop-wrapper {
    padding-bottom: 100px;
    padding: 24px 31px 100px;
	border-radius: 20px
}


a.woocommerce-LoopProduct-link {
    padding: 20px;
		
}

.product-loop-image-wrapper .product-loop-image {
    /*max-height: 113px;*/
    object-fit: contain;
}

.product-loop-content {
    padding: 0;
}

.woocommerce-loop-product__title > a.woocommerce-LoopProduct-link {
    padding: 0;
}

.woocommerce-loop-product__title {
    margin-top: 0;
}

button#toggle-sidebar-mobile-button {
    background: #432A27;
}

.add_to_cart_button:hover {
    border-color: #FF6E2F;
}

.product-loop-wrapper .button:hover .woostify-svg-icon {
    background: transparent !important;
}

.woostify-svg-icon {
    transition: all .3s ease;
}

.woocommerce-account #content {
        min-height: max-content;
    }

/* page banner */
.page-header {
    position: relative;
    z-index: 0;
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgb(52 22 18 / 74%);
    z-index: -1;
}

.page-header .entry-title {
    font-size: 5rem !important;
}


/* Sidebar— Shop */

.wp-block-search__inside-wrapper {
    border-radius: 60px;
    border-color: rgba(52, 22, 18, 0.1);
    padding-left: 14px;
}

.wp-block-search__inside-wrapper input {
    border-radius: 60px;
}

label.wp-block-search__label {
    font-family: "Big Shoulders Display", Sans-serif;
    font-size: 2rem;
    text-transform: capitalize;
    color: #2b2b2b;
    margin-bottom: 27px !important;
    display: flex;
}


/* Single product */
.product-images figure.image-item {
    border: 1px solid #3416121A;
    border-radius: 21px;
    padding: 75px 25px;
}

.product-images figure.image-item a {
    text-align: center;
}

.easyzoom-flyout {
    display: none;
}

.attachment-woocommerce_single.size-woocommerce_single {
    margin: auto;
}
/* Blog */

.blog .post-loop .summary-text  p{
    display: none;
}

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

.post-read-more a {
    text-decoration: none !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 32px;
    display: flex;
    width: 100%;
    text-transform: uppercase;
    padding: 8px;
    border: 1px solid #341612;
    border-radius: 46px;
    justify-content: center;
    align-items: center;
    color: #341612 !important;
}

.loop-post-inner .entry-summary.summary-text {
    padding: 0;
}

.post-loop .loop-post-inner {
    background: #fff;
    border: 1px solid rgba(52, 22, 18, 0.1);
    border-radius: 20px;
    padding: 24px 31px !important;
}

.post-cover-image img {
    height: 320px;
    object-fit: cover !important;
	border-radius: 12px;
}

.blog-layout-grid .site-main .post-loop {
    margin-bottom: 35px;
}

.widget-title {
    color: inherit !important;
}

.post-read-more a:hover {
    background: #FF6E2F;
    color: #ffffff !important;
    border-color: #FF6E2F;
}

.blog .post-loop .entry-title {
    font-weight: 700;
}

.single-post .site-main .post-loop .entry-title {
    font-weight: 700;
}
/* cart, checkout */
a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button {
    background: #FF6E2F;
    color: #fff;
    border-radius: 50px;
}

.wc-block-components-checkout-place-order-button {
    background: #FF6E2F;
    color: #fff;
    border-radius: 50px;
    border: none;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-size: 20px;
    margin-bottom: 10px;
}

.show-password-input {
    top: 50%;
    transform: translateY(-50%);
}

button.show-password-input {
    line-height: 20px;
    padding: 0 3px;
    border-radius: 5px;
}

/* footer */
.site-footer-widget .footer-widget figure.wp-block-image {
    width: 192px;
}
.site-footer-widget .footer-widget:first-child p {
    max-width: 220px;
    margin-top: 8px;
}

.footer-widget .widget-title {
    margin-top: 0;
}
Product Category Section Style CSS
.product-categories .jkit-category-thumbnail {
    margin: auto;
}
.product-categories  .jkit-product-category-content {
    margin-top: 20px;
}

@media (min-width:1025px){
    .product-categories  .jkit-product-categories > *:nth-last-child(2):nth-child(4n + 1) {
  grid-column: 2;
}

.product-categories  .jkit-product-categories > *:last-child:nth-child(4n + 2) {
  grid-column: 3;
}

.product-categories  .jkit-product-categories > *:last-child:nth-child(4n + 1) {
  grid-column: 2 / span 2;
}

}
Product Category Section Style CSS Class
product-categories
Product Shortcode
[products class="myProducts" limit="6" columns="3"  limite="6"]
Feature Product Shortcode
[featured_products class="myProducts" limit="2" columns="2"  limite="2"]
Blog Post Style CSS For Home Page
.blogPost .elementskit-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}
Blog Post Style CSS Class For Home Page
blogPost

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