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

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1495499
    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

    #1495996
    Leo
    Staff
    Customer Support

    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;
    }
    #1496748
    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.

    #1496813
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

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

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

    #1496999
    David
    Staff
    Customer Support

    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!

    #1497195
    adriendemonta

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

    #1497364
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.