How to make a Book Store Using Elementor Free

Build a modern and professional Online Book Store eCommerce website designed to sell books easily and attract more customers online. A well-designed bookstore website helps readers discover new books, explore different categories, and purchase their favorite titles from anywhere at any time. Whether you sell academic books, novels, comics, magazines, children’s books, or digital eBooks, a responsive and user-friendly website can help grow your business and increase sales.

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