[Resolved] GP Premium / Woocommerce: Single Product page on Safari

Home Forums Support GP Premium / Woocommerce: Single Product page on Safari

This topic contains 10 replies, has 3 voices, and was last updated by  David 1 month ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1256111

    Sebastian

    Hi,

    I found a strange behavior on single product pages. On safari is a gap before the product meta-data (description). See the screenshot where Chrome is on the left and Safari on the right.

    Chrome vs Safari

    I did a new installation on a different domain and face the same problem. The Test Page is on Chrome okay and Safari not. The new installation has no additional plugins activated.

    I hope you can help me.

    #1256117

    Sebastian

    Oh yes … I forgot to mention that this effect only happens if the product is out of stock.

    Out of stock vs available

    #1256142

    Sebastian

    Another comment: when the GP Premium module is deactivated it looks okay.

    #1256689

    Tom Lead Developer

    Hi there,

    What version of Safari are you using? I’m not able to see the issue on my end.

    Let me know 🙂

    #1256697

    Sebastian

    Hi Tom

    Safari 13.1 on Catalina 10.15.4

    First loading seems fine. Please try a reload. Then it starts becoming weird. I tested on 3 different Macs.

    iPad OS 13.4.1 same behavior.

    Thanks

    #1256966

    Tom Lead Developer

    Tough one to debug – it snaps back whenever something in dev tools is changed.

    Was trying to replicate on one of our Woo sites with no luck: https://gpsites.co/seller/product/happy-ninja/

    Is it happening there for you?

    #1257035

    Sebastian

    Okay, now it gets really weird.

    What I did:

    1. I checked your page and your page looked fine for me.
    2. I deactivated my child theme and switched to basic GP. Looked fine.
    3. Back to child theme > broken.
    4. Deactivated my functions.php modifications > broken
    5. Fresh child theme style.css > broken
    6. Checked and turned on every custom css line by line. Then I saw that I had some css left from the product page sidebar I once used. Removed it > broken
    7. Turned in GP customizer “Layout – Woocommerce – Single Product” content/right sidebar on > not broken
    8. Switched back in GP customizer “Layout – Woocommerce – Single Product” to content/no sidebar > works

    Since the last step it works. I had “Layout – Woocommerce – Single Product” to content/no sidebar all the time, but somehow turning it off and on again fixed my issue.

    Okay, so I went back to the test page and tried to replicate it.

    Seems it has something to do with the customizer setting combined with the template’s css code (template Merch). Again, only Safari. I guess David is the template author.

    /*-- Right Sidebar --*/
    @media (min-width: 768px) {
        #right-sidebar {
            border-left: 1px solid rgba(0,0,0,0.1);
        }
    
        #right-sidebar .widget {
            margin-bottom: 0;
        }
    
        #right-sidebar aside:first-child {
            padding-top: 0;
        }
    
        #right-sidebar aside:not(:first-child) {
            border-top: 1px solid rgba(0,0,0,0.1);
        }
    }
    
    /* Single Product Sidebar position */
    @media (min-width: 768px) {
        .single-product #right-sidebar {
            float: right;
        }
    
        .single-product div.product .woocommerce-tabs,
        .single-product div.product .related.products,
        .single-product div.product .upsells.products {
            width: 66%;
            display: inline-block;
        }
    }
    
    @media (max-width: 768px) {
    
        .wc-columns-container .products,
        .woocommerce .related ul.products,
        .woocommerce .up-sells ul.products {
            grid-gap: 20px;
        }
    	
    		.slideout-navigation.do-overlay .slideout-exit {
        	position: static;
        	text-align: center;
    		}
    }
    

    Sorry for the long posting. But your test page helped me on my search to replicate it. Removing above CSS code and going for no sidebar on the single product page (which I wanted) fixed it.

    #1257454

    David Customer Support

    Hi there,

    Merch used a GP Hook Element to add the Sidebar inside of the Woo Single Product template and that CSS is required to create the Merch single product layout.

    Where do you want to add the Sidebar : In the default layout or the Merch layout ? Let me know.

    #1257819

    Sebastian

    Hi David

    I use the Merch template as basis and wanted to get rid of the sidebar on the single product page. So I deactivated it in the customizer settings, but didn’t delete the CSS for it. This caused this weird rendering on Safari.

    For me it’s good now and we can close this ticket.

    Thanks

    #1257822

    Sebastian

    Oh, I can mark this topic as resolved by myself.

    #1257837

    David Customer Support

    Glad to hear that 🙂

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.