[Support request] Generate Press Hooks + Elementor Shortcodes Styling

Hello there,

Starting with the styling, here’s some CSS code you may try adding in Appearance > Customize > Additional CSS:

.single-product .woocommerce-product-gallery__image.flex-active-slide {
    border: 5px solid #4f4f4f;
}

.single-product .woocommerce-product-gallery .flex-viewport {
    height: fit-content !important;
}

.single-product ol.flex-control-nav.flex-control-thumbs > li >img {
    border: 5px solid #4f4f4f;
}

.single-product .summary.entry-summary.single-product .summary.entry-summary h1.product_title.entry-title {
    margin-bottom: 20px;
}

.single-product .summary.entry-summary p.price {
    text-align: center;
}

table.variations .value {
    border-radius: 5px;
}

For the sale label, may you provide a link to a single product which is on sale?

Moreover, with regards to the CLS, part of the issue seems to stem from the Header, and how it’s loaded: [removed as requested by customer]

As shown, it’s loaded late, and it’s pushing down the elements. Are you using a caching/optimization plugin? Can you try adding a Header through a Block Element to see the difference?

Side note, WooCommerce has these hooks available for the single product page: https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

Hope to hear from you soon.

For the CSS code with regards to the sale notice, here’s something you may try:

.single-product span.onsale {
    position:absolute;
    top: 0;
    left:0;
    border-radius: 10px;
    padding: 15px 20px 15px 20px;
    margin: -10px 0px 0px -5px;
}

With regards to the CLS, it’s odd. The Shipping information also shows up opened when the page is loaded, when hooked. Are you using different elements for this? The Elementor page seems to use something called Toggle and the other page is using an Accordion. If they are different, can you try using a toggle block as well to see the difference?

Can you also try temporarily disabling caching/optimization plugins like Jetpack?

Kindly let us know how it goes.

I see.

It’s not apparent why the header is loading the way it is right now when hooked.

We’ve had customers before have similar issues, and the cause was an optimization/caching plugin.

You could try temporarily disabling it, and the test in https://pagespeed.web.dev/ if the CLS goes away.

If not, kindly let us know.

The hook you are using in GP to enter the shortcode is generate_after_header?

If that’s the case, this section has been added to a different location in terms of HTML structure.

It’s within the content area on the elementor page, but before the content area on the GP page, the structure difference seems the cause of CLS.

Try using generate_inside_container hook.