
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.
/* ====
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;
}[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”]
[products limit="3" columns="3" orderby="date" order=”DESC”]
<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>products_tabs
.blog-post img {
height: 250px !important;
object-fit: cover;
border-radius: 12px 12px 0 0;
}blog-post
Every project is crafted with performance, responsiveness, and search engine optimization in mind to help your business stand out online.
Copyright 2026 @ Muhammad Abu Bakkar | All Rights Reserved