Home › Forums › Support › Why is sticky cart panel not the same as the demo when all coding is identical?
- This topic has 7 replies, 3 voices, and was last updated 1 year, 8 months ago by
David.
-
AuthorPosts
-
October 19, 2020 at 7:18 am #1495499
Adrien
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/):
Here is how it looks like in my store:
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
October 19, 2020 at 11:10 am #1495996Leo
StaffCustomer SupportHi 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/October 20, 2020 at 3:58 am #1496748Adrien
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.
October 20, 2020 at 4:57 am #1496813David
StaffCustomer SupportHi 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/October 20, 2020 at 6:30 am #1496928Adrien
Dear David! Amazing it did the trick perfectly. Do you have any idea as to what could be causing this issue?
Best, adrienOctober 20, 2020 at 7:19 am #1496999David
StaffCustomer SupportFont 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/October 20, 2020 at 8:02 am #1497195Adrien
I understand. Thank you so much for your great support always.
October 20, 2020 at 9:40 am #1497364David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.