Why is sticky cart panel not the same as the demo when all coding is identical?

Hi there,

I'm actually not able to get the sticky add to cart panel to show at all in the link you've provided in the private URL.

Am I missing something?

Here is the latest CSS for Niche using the Flexbox version in GP 3.0 for your reference:

			/*-- Navigation --*/

.main-navigation {
	box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .2);
}

/*--- Off Canvas Panel ---*/
/* Off Canvas Panel Widget styling */
.slideout-widget.woocommerce ul li {
	line-height: 2em;
	display: grid;
	grid-template-columns: 0 90% 10%;
}

.slideout-navigation .slideout-widget ul.product-categories li {
	grid-template-columns: 90% 10%;
}

.slideout-widget:not(:first-of-type) {
	border-top: 1px solid #ccc;
	padding-top: 2em;
}

/*=== WOOCOMMERCE ===*/
/*--- SINGLE PRODUCT ---*/

/* Stacked Gallery for desktop and sticky summary */

@media (min-width: 768px) {
	.woocommerce-product-gallery {
		display: none;
	}

	.woo-summary-wrap {
		display: grid;
		grid-template-columns: 60% 40%;
		grid-template-rows: auto;
		margin-bottom: 80px;
	}

	.woo-gallery-stack {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.woo-gallery-stack img {
		margin-bottom: 20px;
	}

	.woocommerce-tabs {
		grid-column: 1;
	}

	.woocommerce div.product div.summary {
		grid-column: 2;
		grid-row: 1;
		margin-left: 80px;
		position: -webkit-sticky;
		position: sticky;
		top: 105px;
		bottom: 100px;
		padding-right: 80px;
	}

	.single-product span.onsale {
		position: absolute;
		top: 0;
	}
}

/* Add some space above price tag */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price ins {
	margin-top: 10px;
}

/* Breadcrumn and post meta styling */
.product_meta>span,
.woocommerce-breadcrumb {
	text-transform: uppercase;
	font-size: 12px !important;
	font-weight: 500;
}

.woocommerce div.product div.summary .woocommerce-breadcrumb {
	margin-bottom: 40px;
}

/*--- SHOP AND ARCHIVE ---*/

.woocommerce ul.products li.product.sales-flash-overlay .onsale {
	left: 0;
	right: auto;
}

.woocommerce-ordering:after {
	right: 25px;
	top: 8px;
}

/* Position Filter breadcrumb results and ordering */
.woo-filter-toggle,
.woocommerce.archive .wc-columns-container .woocommerce-breadcrumb {
	padding: 10px 0;
	margin-right: 20px;
	float: left;
	font-size: 14px !important;
	font-weight: 500;
	line-height: 20px;
}

.woo-filter-toggle a {
	color: #000;
}

.main-navigation ul li.slideout-toggle {
	display: none !important;
}

.woocommerce .woocommerce-result-count {
	float: right;
	margin-right: 20px;
}

.woocommerce-ordering select {
	text-transform: uppercase;
	max-width: 200px;
	border: 0;
}

.woo-filter-toggle a:before {
	padding-right: 2px;
	position: relative;
	top: 1px;
}

/* Woo category nav */

.woo-cat-nav {
	list-style-type: none;
	margin-left: 0;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 80px;
}

.woo-cat-nav li {
	padding: 5px 0;
	margin: 0 10px;
	border-bottom: 1px solid #ccc;
	font-size: 0.95em;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.woocommerce .woocommerce-result-count {
		display: none;
	}

	#wc-column-container .product {
		margin-bottom: 2em;
	}

	.woo-cat-nav {
		margin-bottom: 40px;
	}

	h1.woocommerce-products-header__title,
	.term-description {
		text-align: center;
	}

	.woo-cat-nav {
		justify-content: center;
	}
	
	.woocommerce ul.products li.product a.button {
		margin-right: unset !important;
		padding: 10px 0;
	}
}

/* Shop Product Styling */

/* Reduce Grid Gap */
.wc-columns-container .products,
.woocommerce .related ul.products,
.woocommerce .up-sells ul.products {
	grid-gap: 20px;
}

/* Remove add to cart styling */
.woocommerce ul.products li.product a.button {
	padding: 5px 0;
	color: inherit;
	background-color: #ffffff;
	text-transform: uppercase;
}

/* Transform add to cart and pricing on hover */
@media (min-width: 768px) {
	.woocommerce ul.products li.product a.button {
		transform: translateY(0);
		width: 100%;
		opacity: 0;
		transition: all 0.4s;
	}

	.woocommerce ul.products li.product:hover a.button,
	.woocommerce ul.products li.product:hover .price {
		transform: translateY(calc(-100% - 10px));
		opacity: 1;
	}

	.woocommerce ul.products li.product .price {
		opacity: 1;
		transition: all 0.4s;
	}

	.woocommerce ul.products li.product:hover .price {
		opacity: 0;
		transform: translateY(calc(-100% - 10px));
	}
}

/* Woocommerce Tabs */

.woocommerce-tabs h2 {
	display: none;
}

@media (min-width: 768px) {
	.slideout-navigation .main-nav {
		display: none;
	}
}

/* Category Shortcode Hover effect */
.product-category .wc-product-image .inside-wc-product-image {
	overflow: hidden;
}

.product-category .wc-product-image img {

	transition: all 0.3s;
}

.product-category .wc-product-image:hover img {
	transform: scale(1.1);
	transition: all 0.3s;
}

Hello Leo, it's very strange that at your end you can not view the sticky add-to-cart panel.
I've checked on multiple browsers without cache and I see it very well.

Hence, I made this video to show you my issue: https://www.awesomescreenshot.com/video/1416250?key=0acf5718c8fa0c14eee80a798f010a9e

I'm unable to save my problem. I've tried everything.

Thank you for your assistance and time. Best, Adrien

P.S: the CSS code you sent me is the same as the one I have.

Hi there,

try adding this CSS:

#wc-sticky-cart-panel button {
    font-size: 15px;
    padding: 10px;
    flex: 0 0 100px;
}

Dear David! Amazing it did the trick perfectly. Do you have any idea as to what could be causing this issue?
Best, adrien

Font type / font-size / line-height etc all have an impact on the spacing for the button.
We'll see if the CSS i provided is a better solution for managing those differences. Thanks for pointing it out!

I understand. Thank you so much for your great support always.

You're welcome