Hello,
What you are showing from the demo site (with price + “Add to Cart” button in a fixed bottom bar) is actually a custom sticky bar layout, not the default WoodMart sticky add-to-cart style.
In WoodMart, the built-in option can be enabled here:
Theme Settings > Single Product > Add to Cart > Sticky Add to Cart
However, please note that the default WoodMart sticky bar is designed differently:
It shows product image, title, price, and add-to-cart in a compact horizontal layout and on mobile, some elements are intentionally hidden to keep it minimal.
You are using a mobile bottom navbar, which is why it is showing above this, you can disable it from Theme Settings > general > Mobile bottom navbar then the sticky add to cart will show in bottom.
If you want to change the style like the demo site, try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for mobile. Change the code as per your requirements.
.wd-sticky-btn {
height: auto;
padding: 12px 16px;
box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
/* Price styling */
.wd-sticky-btn .price {
display: block !important;
font-size: 16px;
font-weight: 700;
margin: 0;
}
/* Cart form takes full remaining space */
.wd-sticky-btn form.cart {
flex: 1;
margin-left: 12px;
}
.wd-sticky-btn .single_add_to_cart_button,
.wd-sticky-btn .wd-sticky-add-to-cart {
width: 100%;
height: 44px;
border-radius: 10px;
font-weight: 700;
}
.wd-sticky-btn {
background: #fff;
border-top: 1px solid #e5e7eb;
}
.wd-sticky-btn {
transform: none !important;
}
Best Regards
.
