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

[adriendemonta]

Dear GP Team!

Here is what the sticky cart panel on the niche demo site I’m using for testing looks like (https://app-5f26e3f3c1ac191bfcc4f3d1.closte.com/):

https://tinyurl.com/y2jua5oe

Here is how it looks like in my store:

https://tinyurl.com/y33pq654

Both sites use the same CSS. How is this possible? Could you please help me match the demo and not have a doubled line Call to action
button?

Have you updated some things in the site theme recently?

Thank you very for your help. Best, Adrien

[Leo]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[adriendemonta]

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.

[David]

Hi there,

try adding this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[adriendemonta]

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

[David]

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!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[adriendemonta]

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

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts