[Resolved] Sticky Section Under Product Image

[Melvin]

Hi,

How do I add the “Important Booking Instructions” (the instructions with a grey background) under the product images and at the same time, make it stick (only on desktop) when scrolled?

I want the users to see the instructions at all times when they are making the booking.

Here’s the link to the product.

[David]

Hi there,

how are the Important booking instructions added to the site ? And are they the same for All products?

The issue here is that Woo got rid of the Hook that comes immediately after the Product Images, so add stuff directly below it is not easy. Let us know the info above and ill have a think of what can be done.

[Melvin]

Hi, David

They are actually part of the short description in WooCommerce.

[David]

And is the information the same for every product ? Or does it differ ?

[Melvin]

It differs.

However, there are only two product types, and the Important Booking Instructions under each product type is the same.

[David]

Ok… now to get the head around how to hook something into somewhere there is no hook lol

I just noticed that the gallery you have is not the default woo gallery. How is that added to the site ?

[Melvin]

I use Kadence Shop Kit for the WooCommerce page.

[David]

So is it possible to add something below the carousel using that ?

[Melvin]

Not that I know of. But if using the default Woo gallery can do the job, I don’t mind using it.

[David]

Woo makes it really difficult to add anything in the space below the carousel whether that be the one built in or one that gets swapped in place of it.

And to make the element sticky would require the template to be 2 x Full height columns.
Which results in the entire template to be changed as there a full width tabs and other products below that.

And to do that, unfortunately, would require custom development.

[Melvin]

Oh, what a bummer.

Thanks for the help, nonetheless, David. 🙂

[David]

If you want to experiment the this is as close as i can get… but i am unsure how other plugins hook there code in, so it could conflict. And you would need to get a developer to assist.

1. Add this PHP Snippet to your site:

add_action( 'woocommerce_before_single_product_summary', function(){
	?>
	<div class="woo-single-gallery-wrapper">
	<?php
},19);

add_action( 'woocommerce_before_single_product_summary', function(){
	do_action('custom_after_gallery');
	?>	
	</div>
	<?php
},21);

This will add a div.woo-single-gallery-wrapper wrapper around the gallery, and a custom hook titled: custom_after_gallery

2. Add this CSS to handle the layout:

@media(min-width: 769px) {
	/* remove the theme set widths */
	.woocommerce.single-product #content div.product > div.summary,
	.woocommerce.single-product #content div.product  div.images {
		width: auto;
		float: none;
	}
	/* apply a flex container to the product */
	.woocommerce.single-product #content div.product {
		display: flex;
		flex-wrap: wrap;
	}
	/* make all sections of the product 100% wide */
	/* this will ensure tabs and related products stack */
	.woocommerce.single-product #content div.product > div {
		flex: 1 1 100%;
	}
	/* Make the custom wrapper and summary 50 / 50 columns */
	.woocommerce.single-product #content div.product > div.woo-single-gallery-wrapper,
	.woocommerce.single-product #content div.product > div.summary {
		flex: 1 1 50%;
	}
}

3. In Appearance > Elements create a Block Element, set its Hook to Custom and in the field provided add: custom_after_gallery

3.1 build something in the element.

3.2 Set the display rules the single product you want it to apply to.

Fingers crossed it may just appear where you want it 🙂

[Author]

Posts