[Support request] Add to cart button too low

Home Forums Support [Support request] Add to cart button too low

Home Forums Support Add to cart button too low

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1763606
    Amber

    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?

    #1763941
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to the site so i can see the issue.

    #1763974
    Amber
    #1764061
    David
    Staff
    Customer Support

    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%;
        }
    }
    #1764593
    Amber

    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/)

    #1765199
    David
    Staff
    Customer Support

    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 ?

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.