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

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

  • This topic has 10 replies, 3 voices, and was last updated 12 months ago by David.
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
    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
    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
    Staff
    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
    Staff
    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.