How to add the sticky navigation of product informaiton

Hi there,

that would require custom development. I can give you some pointers on how to create it but its not going to be simple:

Step 1 - You need to add some IDs to the content headings you want to scroll link to. The HTML of your headings would be like so:

<h2 id="section-1">Heading for section one</h2>
<h2 id="section-2">Heading for section two</h2>
....

Step 2. Then you would need to add a list of menu items or buttons to the top of your page, and each of those buttons would require a URL of #section-1 , #section-2 etc.

Adding those buttons - the simplest method would be:

1. Install the GeneateBlocks plugin
https://generateblocks.com

2. Create a new Block Element:
https://docs.generatepress.com/article/block-element-overview/

2.1 Add a GB Container Block - in the Advanced > Additional CSS Class(es) field add: product-nav

2.2 Inside the Container add a Buttons Block - create your row of Buttons with the URLs to each section.

2.3 For each Button - Advanced > Additional CSS Class(es) field add: smooth-scroll

2.4 In the Block Element Hook select: woocommerce_before_single_product_summary

2.5 Set the Display Rules to Products > All Products.

If you can handle that then i can take a look at the CSS to make it sticky.
Note what we can't do is make the Button Navigation change to an accordion on mobile.

Hi David,

Thanks for your help and support.

Really really very best steps for the guide and it's pity that I am not good at editing the HTML code and really not professional.

1) The sticky navigation of my example website on the product page is on the top,
but, my sticky navigation will not be on the top of the page, it will be below the product images and pls check the screenshot (https://prnt.sc/118m919)

so the code is different from the above one??

If you can do that for us, how much i need to pay you?

2) As you know I installed WooCommerce, so I edit the product information on the product page by using Woocommerce, just now I checked Step 2 from the above, Can I use GeneateBlocks to edit product information for each product model.

3) Yes, already installed many plugins from Generatepress such as Generateblock, GP Premium, Lightweight Social Icons, Simple CSS WP show posts.

i really want to use Generateblock to edit the product page just like editing post page, can I do that?

if so, pls guide me how to do that?

Looking forward to hearing from you
best regards
Paul

We don't unfortunately provide a paid development service. You may find some users offering that service in our Facebook group.

1. Positioning the button bar below the summary/image simply requires you to change the hook in 2.4 to:

woocommerce_after_single_product_summary

2 & 3. Woo doesn't support Block editing by default. It can be enabled though - this article explains how:

https://wplook.com/how-to-enable-gutenberg-for-woocommerce-products/

you would add just the second code.
Adding this code: https://docs.generatepress.com/article/adding-php/

Note there are some parts of the product editor that are not supported by the Block Editor... so make sure you're not missing anything in the editor or the Quick Edit option that your site requires.

hello，david

thanks for your helps
pls let me know the name of Generatepress Facebook group?
paul

Hi Paul,

Here's the link to the GeneratePress community on Facebook.
https://www.facebook.com/groups/generatepress

hi Elvin
I have applied to join the group AND PLS accept my invitation, thanks

We'll have to wait for Tom, David, Leo, or Stacey to be up to approve your application.

It'll be approved once anyone of them is online to check. :)