Archived topic
Add to cart button too low
5 replies · Started by Amber on May 4, 2021
Hi, I am using woocommerce and one of the themes in the GP site libary. On the product page, the add to cart button is below the quantity selector and variation options. What happens is that you will need to scroll past all the photos on the left before the right side of the screen scrolls.
When this happens, the add to cart is sometimes missing or too low, causing an issue when my customer wants to add to cart. The paypal option is also missing from the screen as it is below the add to cart button.
Is there a way to change this?
Hi there,
can you share a link to the site so i can see the issue.
Hi David, please see https://byhoopi.com/product/christmas-teaser-wand/
Go to Customizer > Additional CSS and remove the CSS that looks like this:
/*--- SINGLE PRODUCT ---*/
/* Stacked Gallery for desktop and sticky summary */
@media (min-width: 769px) {
.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;
}
}and add this instead:
/*--- SINGLE PRODUCT ---*/
/* Stacked Gallery for desktop and sticky summary */
@media (min-width: 769px) {
.woocommerce-product-gallery {
display: none;
}
.woo-summary-wrap {
display: grid;
grid-template-columns: 50% 50%;
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: 20px;
position: -webkit-sticky;
position: sticky;
top: 105px;
bottom: 100px;
padding-right: 0;
}
.single-product span.onsale {
position: absolute;
top: 0;
}
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
width: 100%;
}
}Thanks! It's fine now, but any idea why is there a OR after the quantity selector?
It happens for every product with a variation (eg, https://byhoopi.com/product/teepee-tent-bed/)
You have a stripe plugin that is adding alternative payment methods - which is where the OR comes from - but i cannot see the other methods apart from Paypal. Are they being added ?
