Contact

Upcoming

How to make a Book Store Using Elementor Free

  • 02h 51m tutorial
  • Updated Oct 19, 2026
  • By Jim Fahad

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 
/* ======================================================
   PRIMARY NAVIGATION & HEADER
====================================================== */
.primary-navigation li.current-menu-item > a,
.primary-navigation .menu-item-has-children:hover > a,
.primary-navigation a:hover,
.primary-navigation > li.current-menu-ancestor > a , .primary-navigation > li.current_page_parent > a,.primary-navigation li.menu-item-has-children:hover  .woostify-svg-icon svg{
    color: #FF6414;
}

.site-header-inner {
    border-bottom: none;
}


.topbar-slider .slider .text-scroll {   
    text-transform: capitalize;
    font-size: 14px;
}

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

.icon-close svg{
	color: #FF6414;
}
/* ======================================================
   PAGE HEADER
====================================================== */
.elementor-page .page-header {
    display: none;
}

.page-header {
    position: relative !important;
}

.page-header:before {
    content: "";
    position: absolute;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    background: #131313;
    opacity: 0.71;
}

.page-header .woostify-container * {
    z-index: 99 !important;
}

.page-header .entry-title {
    margin-bottom: 10px;
    font-size: 48px !important;
    line-height: 1.2em !important;
    text-align: center;
    text-transform: capitalize;
    font-weight: 600;
}

.woostify-breadcrumb {
    text-align: center;
}

@media (max-width: 1024px){
	.page-header{
		padding-top: 120px;
		padding-bottom: 120px;
	}
}


@media (max-width: 767px){
	.page-header{
		padding-top: 100px;
		padding-bottom: 100px;
	}
}


/* ======================================================
   PAGE HEADER – RESPONSIVE
====================================================== */
@media (max-width: 767px) {
    .page-header .entry-title {
        font-size: 46px !important;
    }

    .woostify-breadcrumb {
        font-size: 16px;
        line-height: 1.4em;
    }
}


/* ======================================================
   PRODUCT CARD DESIGN
====================================================== */


.product .product-loop-wrapper {
    display: flex;
    flex-direction: column-reverse;
    border-radius: 12px;
}

.product *{
    transition: all 0.3s ease;
}

.products .product:hover .product-loop-wrapper{
    background-color: #FF6414!important;
}

.products .product:hover .product-loop-wrapper 
.woocommerce-loop-product__title a,
.products .product:hover .product-loop-wrapper .price .woocommerce-Price-amount {
    color: white !important;
}

.products .product:hover 
.wlfmc-loop-btn:not(.is-elementor) 
.wlfmc-add-button > a i {
    color: white !important;
}

.products .product .add_to_cart_button{
	border: 1px solid #131313;
}

.product .product-loop-content .woocommerce-loop-product__title {
    margin: 0 0 8px !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    letter-spacing: 0 !important;
}

.product .add_to_cart_button:hover .woostify-svg-icon {
    background-color: transparent !important;
}

.product img {
    padding: 20px;
    object-fit: contain;
}

.product .product-loop-content {
    padding: 32px;
}


/* ======================================================
   ARCHIVE PRODUCT GRID
====================================================== */
.archive .products.columns-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.archive .products li {
    width: 100% !important;
    margin: 0 !important;
}


@media (max-width: 768px){
	.archive .products.columns-3 {    
    grid-template-columns: repeat(1, 1fr);
}
}





/* ======================================================
   PRODUCT CONTENT
====================================================== */


/* ======================================================
   BLOG LISTING & Home Blog
====================================================== */
.blog .post-loop {
    margin-bottom: 30px !important;
}

.blog .post-loop .loop-post-inner{
    border: 1px solid #FFE9D3;
    border-radius: 12px;
    padding: 0 32px 32px;
    box-shadow: 0px 25px 15px rgba(38, 29, 22, 0.05);
}

.blog .post-loop .post-cover-image {
    margin: 0 -32px;
}

.blog .post-loop img{
    height: 250px !important;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

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

.blog .post-loop .entry-header-item {
    margin-bottom: 10px;
}

.blog .post-loop .entry-title {
    margin-top: 40px;
}

.blog .post-read-more a {
    color: #ff6414 !important;
}

.blog .post-loop .entry-summary {
    text-align: left;
    padding: 0;
}

.related-post img{
	border-radius: 12px!important;
}
.related-post .entry-title{
	margin: 5px 0 10px;
		color: #131313;
}

.related-post .post-read-more{
	color: #131313;
	
}

/* ======================================================
   SINGLE POST
====================================================== */
.single-post .post-cover-image img {
    height: 420px;
    margin-bottom: 20px;
    border-radius: 12px;
}

.single-post .wp-post-image {
    width: 100%;
}

.single-post .related-title {
    font-size: 26px;
}

.single-post 
.site-main 
.post-loop 
.entry-title {
    font-size: 32px;
    font-weight: 400;
    color: #131313;
}

@media (max-width: 767px) {
    .wp-singular 
    .page-header 
    .entry-title {
        font-size: 32px !important;
    }
}


/* ======================================================
   WIDGETS & FOOTER
====================================================== */
.widget li {
    line-height: 1.8em;
    margin-bottom: 15px;
}

.widget li a {
    color: #131313!important;
}

.widget li time {
    margin-top: 5px;
}

.widget .wp-block-latest-posts__featured-image  img{
	border-radius: 8px;
}

.site-footer .widget-title {
    font-size: 26px;
}

.site-footer .widget li {
    font-size: 16px;
    line-height: 1.2em !important;
    margin-bottom: 10px;
}

.site-footer .widget li a{
	color: #fff !important;
}

.site-footer .wp-block-social-links svg{
	fill: #fff;
}
/* ======================================================
   SINGLE PRODUCT
====================================================== */
.single-product .woostify-breadcrumb,
.single-product .woostify-breadcrumb .item-bread a {
    color: black;
}

.single-product .product-images img{
	height: 420px;
}

.single-product .variable-item-contents *{
	font-weight: 500;
	
}
.single-product .variable-item{
	margin: 10px 0!important;
}

.woostify-breadcrumb 
.item-bread:hover a {
    color: var(--primary-color);
}

.woostify-container 
.product-images-container img {
    padding: 20px;
    border-radius: 12px;
    width: 100%;
    background-color: white;
}

.related.products > h2 {
    font-size: 34px !important;
}

.wp-block-search__label {
    color: #1e1e1e;
    font-size: 22px;
}

.wp-block-search__inside-wrapper {
    margin-top: 10px;
}


.theme-woostify.woocommerce-account .site-content{
	  min-height: 100%!important;
}
Product Shortcode For Tabs 
[products limit="5" columns="3" category="art-photography"]
[products limit="5" columns="3"  category=”food-drink”]
[products limit="5" columns="3"  category=”health”]
[products limit="5" columns="3"  category=”biography”]
Product Shortcode 
[products  limit="3" columns="3"  orderby="date" order=”DESC”]
Product Tabs Style CSS 
<style>
.products_tabs .product .product-loop-wrapper {
    background-color: #EEF2F3 !important;
    border: none !important;
}

.products_tabs .e-n-tabs-heading {
    background: #FFD000;
    padding: 8px;
    width: 760px;
    margin: auto;
    border-radius: 50px;
}

.products_tabs .e-n-tab-title {
    width: 180px !important;
    flex-basis: initial !important;
}

@media only screen and (max-width: 1024px) {

    .products_tabs .e-n-tab-title {
        width: 165px !important;
    }

    .products_tabs .e-n-tabs-heading {
        max-width: 100% !important;
        justify-content: space-between !important;
    }
}


@media only screen and (max-width: 767px) {

    .products_tabs .e-n-tabs-heading {
        display: flex !important;
        background: none;
        justify-content: center !important;
    }

    .products_tabs .e-n-tab-title {
        flex-basis: content !important;
    }

    .products_tabs .e-n-tab-title,
    .products_tabs .e-n-tab-title[aria-selected="true"] {
        margin-bottom: 8px !important;
        margin-right: 8px !important;
    }
}

.products_tabs .products.columns-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.products_tabs .products.columns-3 li.product:nth-of-type(4) {
    grid-column: span 2;
}

.products_tabs .products li {
    width: 100% !important;
    margin: 0 !important;
}

@media (max-width: 768px){
	.products_tabs .products.columns-3 {   
    grid-template-columns: repeat(1, 1fr)!important;    
}
	
	.products_tabs .products.columns-3 li.product:nth-of-type(4) {
    grid-column: span 1!important;
}
}
</style>
Product Tabs Style CSS Class 
products_tabs
Blog Post Style CSS For Home Page 
.blog-post img {
    height: 250px !important;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}
Blog Post Style CSS Class For Home Page 
blog-post

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