Custom fixed container inside Single Product template disappears at the footer a

Subject: Custom fixed container inside Single Product template disappears at the footer area on mobile

Message:
Hello,

I have created a custom container using Elementor (with a custom class: .custom-sticky-cart-mobile) inside my Single Product Template. I want this container to act as a sticky “Add to Cart” bar at the very bottom of the mobile viewport.

I have applied position: fixed !important; bottom: 0; z-index: 99999; via CSS, and all Elementor native sticky options are turned off.

However, as I scroll down to the product page and reach the footer area, the container gets hidden or cut off completely. It seems like one of the theme’s core structural wrappers (like .main-page-wrapper or a parent container) uses overflow: hidden or a CSS property that breaks the fixed positioning context on mobile layout.

Could you please guide me on how to properly override the theme’s layout constraints so this specific container stays strictly fixed over the footer?

code css mobile custom css

/* ==========================================================================
ΕΞΥΠΝΟ MOBILE STICKY (ELEMENTOR CONTAINER) – ΠΑΝΤΟΥ & ΠΑΝΤΑ ΟΡΑΤΟ
========================================================================== */

@media (max-width: 767px) {

/* Αναγκάζουμε το container να γίνει fixed, αγνοώντας overflows του WoodMart */
html body .custom-sticky-cart-mobile {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100vw !important;
background-color: #ffffff !important;
box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.15) !important;
padding: 10px 15px !important;

/* Απόλυτη στοίβαξη πάνω από Footer, Widgets, Chatbots */
z-index: 99999999 !important;

/* Διασφάλιση Flexbox διάταξης */
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;

/* Παράκαμψη γονικών transforms που προκαλούν το κρύψιμο στο footer */
transform: none !important;
backface-visibility: visible !important;
}

/* Εξασφάλιση ότι το “με ΦΠΑ” (Suffix) που έβαλες στον Elementor θα φαίνεται σωστά */
.custom-sticky-cart-mobile .elementor-widget-wc-product-price .price {
display: block !important;
overflow: visible !important;

}
.custom-sticky-cart-mobile .elementor-widget-wc-product-price .price * {
display: inline-block !important;
}

/* Προσθήκη χώρου στο τέλος του site για να μην κρύβεται το κανονικό περιεχόμενο */
body.single-product {
padding-bottom: 90px !important;
}
}

I would have used yours, but I wanted it this way.

Thank you in advance!

Attachments:

You must be logged in to view attached files.

Hello,

I have checked your site, and I don’t see any custom sticky container active on mobile.

It looks like you are currently using the WoodMart Sticky Add to Cart (desktop version only) from the theme, but it is not properly enabled/used for mobile layout.

I suggest using the theme’s built-in sticky system for mobile as well, instead of mixing custom Elementor sticky elements with the theme’s sticky functionality.

Please enable: from Theme Settings > Single Product > Sticky Add to Cart > Enable for Mobile

Best Regards

[Author]

Posts