Hiding product title and adding headline below title

Hi @chris15326

Thanks for reaching out!

We could help with some CSS coding for this. Can you please share with us the URL or the link to your site so we can check this further?

Hey @xue28 ! ??

I came a bit further already with what I want to achive.

I simply used the ACF Plugin to add a field above the Headline and I can style it with CSS in terms of its size etc.
(Specific tutorial for this can be found here: https://www.commercegurus.com/woocommerce-acf/)

So I assume this part is already done! At least I hope so.

Now I only need to hide the product title on the product page.
(Here is the URL of the staging site you requested: https://wordpress-858200-2974429.cloudwaysapps.com/index.php/product/t-shirt-regular-fit/?preview_id=661&preview_nonce=5d65545504&preview=true&_thumbnail_id=7003)

• This reply was modified 2 years, 1 month ago by chris15326.

Also! I assume the most elegant solution would be, to add a “if” statement to the following php code:

add_action( 'woocommerce_single_product_summary', 'shoptimizer_custom_author_field', 3 );
  
function shoptimizer_custom_author_field() { ?>
 
<?php if(get_field('author')) { ?>
	<div class="cg-author"><?php the_field('author'); ?></div>
<?php }
}

That says something like “if custom field is not empty, hide product title”

The class for the product page product title seems to be “product_title”.

• This reply was modified 2 years, 1 month ago by chris15326.

Hi @chris15326

I simply used the ACF Plugin to add a field above the Headline and I can style it with CSS in terms of its size etc.

I’m glad we were able to find a solution to your inquiry here and thanks for sharing it with the community too! ??

Now I only need to hide the product title on the product page.
(Here is the URL of the staging site you requested: https://wordpress-858200-2974429.cloudwaysapps.com/index.php/product/t-shirt-regular-fit/?preview_id=661&preview_nonce=5d65545504&preview=true&_thumbnail_id=7003)

Can you please reshare the URL or link to your staging site since I am not allowed to access the link above?

Ah I see! this link should work: https://wordpress-858200-2974429.cloudwaysapps.com/

Yes we are 50% done ?? Adding the custom text is no issue but I struggle with the line of code that will hide the product title when the custom text is not empty.

Hi @chris15326 ,

I can understand you want to hide the product title when the custom text is not empty.

1. We can hide the default product title with CSS code and add the product title in the custom code, so we can easily hide it when custom text is not empty.

Replace your custom field code with this new Code:

add_action( 'woocommerce_single_product_summary', 'shoptimizer_custom_author_field', 3 );
  
function shoptimizer_custom_author_field() { ?>

<?php if(get_field('author')) { ?>
	
	<div class="cg-author"><?php the_field('author'); ?></div>
<?php }
else {?>
<div class="cg-title"><?php woocommerce_template_single_title(); ?> </div> 
<?php	
	}
}

Finally, add this CSS code:

h1.product_title.entry-title {
    display: none;
}

.cg-title h1.product_title.entry-title {
    display: block !important;
}

This CSS code will remove the duplicate product title on the product page when the field is empty.

Hey @amiralifarooq

Thank you for your time and help! Really appreciate this A LOT.

Just added the PHP code to the functions.php and the CSS I added under Additional CSS under appearance > customize but the result is that only the product title shows up.

So I do wonder if I need to place the CSS somewhere else?

Hello @chris15326,

Just to verify, did you create the Custom field for your products by using the ACF plugin, as they mentioned in this article: https://www.commercegurus.com/woocommerce-acf/

If yes, what is the Custom field name you created for your products? See this screenshot: https://screencast-o-matic.com/i/c36TYGVuosi

You must replace the field name with the text author in the code. See this screenshot:
https://screencast-o-matic.com/i/c36TYKVuoMn

Also, If you did anything wrong in the code function.php the site may get down, so I suggest remove the code from the function.php file and add the code in the Code Snippets plugin

See this screenshot: https://screencast-o-matic.com/i/c36TYPVuoLo

Let me know how that goes!

Just to verify, did you create the Custom field for your products by using the ACF plugin, as they mentioned in this article:

Yes! ?? Of course: https://i.postimg.cc/nrnrnkLs/fvdfvdsfvsdgvds.png

If yes, what is the Custom field name you created for your products? See this screenshot: https://screencast-o-matic.com/i/c36TYGVuosi

Its the same field-name as it is in your code: https://i.postimg.cc/vmvCpLC2/dfhbgfhnfgjnhftgj.png

Also, If you did anything wrong in the code function.php the site may get down, so I suggest remove the code from the function.php file and add the code in the Code Snippets plugin

Strange I copy pasted the exact same code out of my functions.php into the snippet pugin without changing anything and now it works!

Awesome, glad to know it’s working fine now. @chris15326. If you have any other questions, please open a new ticket.

Sure! And thank you again ??

Aha @amiralifarooq ! I noticed one thing. Could it be, that the title shows up twice on homepages / collection overviews?

This only appears on the homepage, product pages are fine and it works as intended!

https://i.postimg.cc/Y9t2Zqv7/nngngfn.png

I guess this needs to be prevented with another rule?

UPDATE:
This only seems to appear in edit mode! does this makes sense?

• This reply was modified 2 years ago by chris15326.

Hello @chris15326,

I wasn’t able to find these duplicates on your Homepage, not sure why they would render when editing. ??

Perhaps it’s just a browser bug, can you please try clearing your browser’s cache?

Here’s a guide that can help: https://wordpress.com/support/browser-issues/#clearing-your-browser-cache

Let us know how it goes.