Make product short descrption into H1 title above price

[lobsterass]

Hi awesome developers!

I have removed my product titles, as I don’t like their placement in top left. I would like to make the product short description into a h1 title (= h1 class + bigger + bold) instead and I want it to switch place with the price. Please see attached image.

If you have any other solution to the issue of moving the product title to the product text box on the right, I’m open for it.

Also, I have a stupid question: I’ve searched the forum and I’ve read that I should turn on page builder in WooCommerce>settings. I don’t see where that is! My page builder space is empty and I do all product editing in fields further down on each product page. Please see image. How do I turn it on?

Cheers and thanx for helping me so much.

[Kyle – SUPPORT]

Hi

No need to do it this way, follow these steps:

1) Add this to your custom css:

.woocommerce div.product .entry-title {
  display: none;
}

2) Open up content-single-product.php in the woocommerce folder and replace:

<div itemscope itemtype="http://schema.org/Product" id="product-<?php the_ID(); ?>" <?php post_class(); ?>>
	
	<div class="entry-title" itemprop="name"><?php the_title(); ?></div>

	<?php
		/**
		 * woocommerce_show_product_images hook
		 *
		 * @hooked woocommerce_show_product_sale_flash - 10
		 * @hooked woocommerce_show_product_images - 20
		 */
		do_action( 'woocommerce_before_single_product_summary' );
	?>

	<div class="summary entry-summary">
		
		<div class="summary-top clearfix">
			
			<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
			
				<p itemprop="price" class="price"><?php echo $product->get_price_html(); ?></p>
				
				<meta itemprop="priceCurrency" content="<?php echo get_woocommerce_currency(); ?>" />
				
				<?php if (!$catalog_mode) { ?><link itemprop="availability" href="http://schema.org/<?php echo $product->is_in_stock() ? 'InStock' : 'OutOfStock'; ?>" /><?php } ?>
			
			</div>

with

<div itemscope itemtype="http://schema.org/Product" id="product-<?php the_ID(); ?>" <?php post_class(); ?>>
	
	

	<?php
		/**
		 * woocommerce_show_product_images hook
		 *
		 * @hooked woocommerce_show_product_sale_flash - 10
		 * @hooked woocommerce_show_product_images - 20
		 */
		do_action( 'woocommerce_before_single_product_summary' );
	?>

	<div class="summary entry-summary">
		
		<div class="summary-top clearfix">

			<div class="entry-title" itemprop="name"><h1><?php the_title(); ?></h1></div>
			
			<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
			
				<p itemprop="price" class="price"><?php echo $product->get_price_html(); ?></p>
				
				<meta itemprop="priceCurrency" content="<?php echo get_woocommerce_currency(); ?>" />
				
				<?php if (!$catalog_mode) { ?><link itemprop="availability" href="http://schema.org/<?php echo $product->is_in_stock() ? 'InStock' : 'OutOfStock'; ?>" /><?php } ?>
			
			</div>

Let me know if this works

– Kyle

[kastyles]

Lobster in the themes woo settings section turn on- ‘Page Builder on Product Pages’

Its not under the standard woo settings its the themes woo. 🙂

[Kyle – SUPPORT]

Your page builder is already turned on, I can see in your screenshot 🙂

– Kyle

[lobsterass]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

I’ve sorted this for you, all you need to do is add the css that I gave you 🙂

– Kyle

[lobsterass]

Hi Kyle!

The CSS is still added. I don’t see any changes and I need information to how I edit my new(?) H1 and H2. There price is still in the top.

You told me there was a better solution but I think you forgot to tell me what it was and what I’m supposed to do with it. It might also be me being a retard. 🙂

Please see:
http://monroedesign.se/produkt/testprodukt-1/

[Kyle – SUPPORT]

Sorry my fault, the css should be:

.woocommerce div.product .entry-title {
  display: block;
}

It will use the product title

– Kyle

[lobsterass]

Yes! It works! http://monroedesign.se/produkt/testprodukt-1/

Now, can I just bother you, master, for some 40 px padding below the title too? It’s too close to the price.

🙂

<3

And thanx @Kastyles for input. I guess me, the humble pupil, already had it on. Still don’t get the purpose but whatever! My problem is halfway fixed. 🙂

[Kyle – SUPPORT]

.woocommerce div.product .entry-title {
  display: block;
  margin-bottom: 10px;
}

🙂

– Kyle

[lobsterass]

Hurray! Your the man! Woho! Perfect.

I’ll post a screengrab here of how it turned out for other people who might need the same info.

Now…I’m gonna continue causing trouble for ya in my other threads. Be aware of the retard.

🙂

[Kyle – SUPPORT]

Great! glad I could help

– Kyle

[natking]

Thank you mine worked too. However it comes up twice, also above the image but not as a h1? See screenshoot. Any ideas on why that would happen?

I added the CSS.
.woocommerce div.product .entry-title {
display: block;
margin-bottom: 10px;
}

& added this below the summary clear fix class in content-single-product.php file.

<div class=”entry-title” itemprop=”name”><h1><?php the_title(); ?></h1></div>

If I only add the CSS only the one above the image appears.
If I only add the code in the php nothing appears.
If I add the CSS & code in php file – The title appears correctly above the price but also the title appears above image…..

Can’t seem to figure this one out?

Attachments:

You must be logged in to view attached files.

[natking]

Sorry I figured it out. All you need to do is add this to below the summary clear fix class in content-single-product.php file. (no css) and it works fine:)

<h1><?php the_title(); ?></h1>

[Mohammad – SUPPORT]

@natking – I am glad that you managed to resolve the issue.
Thanks