Product title above product image on mobile

Hi there,

I wonder if something like this would do it:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to before_content
3. Check the "Execute PHP" checkbox
4. Add this as your hook content:

<div class="mobile-product-title hide-on-desktop hide-on-tablet">
    <h1><?php the_title(); ?></h1>
</div>

5. Set your Display Rules to your single products.

Then add this CSS:

@media (max-width: 768px) {
    .product_title {
        display: none;
    }
}

Let me know if that does the trick or not :)

Yes it works but if I do that I don't have h1 tag on single products pages anymore. On my google webmaster tools page "mobile indexing first" setting is on, so it's important to have h1 tag on mobile version of my web site.

If I change your code to this:

<div class="mobile-product-title hide-on-desktop hide-on-tablet">
    <h1><?php the_title(); ?></h1>
</div>

Is it bad for SEO? Will google bots see double h1 tags on my site?

Ah sorry, forgot the H1.

No, I don't believe it will be bad for SEO, as the titles are the same and one is hidden. However, you may want to do some research on that, as I'm not 100% sure.

Thank you!

No problem :)