How To Design Awesome Product Pages With Gutenberg In WooCommerce

[@TheSuesmitsa]

Thank you Adam and Thank you John... .you guys just made my day... AGAIN !! THANKS

[@supedium]

Great tutorial! Really useful for anyone selling with woocommerce!

[@iamjohnwhite]

Thank you! I always prefer Gutenberg and other page builders for their ease of use for myself and mainly my clients when it comes to making those pages come to life. I was excited to share this little bit of code to help everyone out!

[@supedium]

@@iamjohnwhite Yeah, Glutenberg could become the next most recommended page builder for wordpress!

[@ferozarshad3703]

I needed this for my current project Thanks. Need more videos to customize the things that got limited videos on internet.

[@Bert-lw7pi]

What blocks would you recommend for essential blocks or kadence for woocomerce?

[@jimjuris]

Thank you Adam and John for this very interesting way to improve WooCommerce product listings. Keep making these videos please.

[@michaelfoerster3364]

Awesome..how about the product category pages? I think that is one part which needs most improvement. Is it possible to make this also work?

[@iamjohnwhite]

If you are using Beaver Themer or Elementor you can customize the look of the category pages by creating custom archive layouts. This option in the video unfortunately won't control that for you as those layouts currently rely heavily on the theme.

[@michaelfoerster3364]

@@iamjohnwhite hi, thanks. But since i need individual category pages i would need for each product category a new template.

[@medbkl1746]

it doesn't work anymore, any update

[@prokassim]

Awesome, thank you for your tips and tutorials very useful.

[@iamjohnwhite]

I’m glad you enjoyed the video!

[@rasheedbgee]

Excellent video from my favorite channel. Please Will the added code be broken when there's a new update to the theme?

[@iamjohnwhite]

If you are using a child theme it should not be an issue, which is what i would recommend.

[@DavePerth]

I'm really surprised there is no mention of adding this code to the function.php file of a child theme - If someone did this to the default/non-child theme, next time the theme is updated the products will be broken. Also this approach maybe fine for a few products, but if you have many it is best to go with a solution that has templates that can be assigned to all products or categories of products, and that way the end user (This channel is for Non-Techies) just fills in fields and doesn't have to do any front end editing with blocks. m2c Cheers, Dave

[@ChrisNixon13]

It won't break the existing products on the front end. It is all about editing the products on the back end.

[@Wake2oUK]

This is great! but can you switch back to the classic editor for one or 2 products if needed? I cant find a way to do so.

[@VladimirKurian]

nice! Can we achieve the same with kadence elements?

[@teoboev]

This functionality should be part of WP and Woo by default, but its nice to see finally a great way to overcome this detail

[@iamjohnwhite]

I completely agree! I'm sure it will happen though in due time considering Automatic is owned by the same team that runs WordpressCom.

[@teoboev]

@@iamjohnwhite they had it implemented at some point in their repository on github, however it was removed for unknown reasons

[@Hastibet]

Why isn't this already a built-in option?

[@Wake2oUK]

@@teoboev they probably want to sell it as an extension

[@nrohit9899]

Thank you very much for the code snippit

[@victorrenevaldiviasoto9728]

Great! Would love to see further content about this!

[@wpglob-wordpresstutorials]

Thanks for the precious tutorial. I learned a lot of stuff.

[@MarjorieRay]

This is great, thank you! Is there a way to make the purchase section appear at the bottom of the page, under the description area?

[@iamjohnwhite]

If you are using beaver themer or elementor you could essentially assign the add to cart button under that no problem. With woocommerce you can also embed via shortcode an add to cart button on any product. Keep in mind with the shortcode it would not be dynamic, you would need to manually enter this in to your description section but it is very doable!

[@cathywood3684]

There's no doubt in my mind that we are not only going bull,but BTC is going nuclear. A lot of people are wondering if now is a good time to buy because of where the price is at right now. I'd say it's outrightly wrong to just sit back hodl and wait maybe incur some losses along the line, that's a wrong mindset for an investor because as an investor finding ways to increase and stack up more coins thereby making profits should be the way of life,that being said,the market is still all about BTC at the moment and I'll advise current investors and newbies to take advantage of Prof Michael Smith program,a pro trader who runs a training program for investors/newbies who lack understanding on how trading Bitcoin works,to help them recover loss from the crash and also accumulate more Bitcoin with his program I went from having 1.7btc to 7.3btc in just 4 weeks.

[@TFGourmet]

I dont have the appereance/theme editor snippet :( what do I do?... could it be an option of the theme? wich theme are you using? Im using Astra

[@cathywood3684]

There's no doubt in my mind that we are not only going bull,but BTC is going nuclear. A lot of people are wondering if now is a good time to buy because of where the price is at right now. I'd say it's outrightly wrong to just sit back hodl and wait maybe incur some losses along the line, that's a wrong mindset for an investor because as an investor finding ways to increase and stack up more coins thereby making profits should be the way of life,that being said,the market is still all about BTC at the moment and I'll advise current investors and newbies to take advantage of Prof Michael Smith program,a pro trader who runs a training program for investors/newbies who lack understanding on how trading Bitcoin works,to help them recover loss from the crash and also accumulate more Bitcoin with his program I went from having 1.7btc to 7.3btc in just 4 weeks.

[@thomhsvenningsen9419]

Great work! Thanks for always giving us high quality tutorials

[@PilatesinSacramento]

Fantastic! I’m definitely going to give this a shot. Question...since it’s relatively simple code, why do you suppose WooCommerce doesn’t just include this functionality?

[@iamjohnwhite]

If I had to guess it would be to avoid conflicts with breaking websites in mass. I'm sure we will see this as a default in the future, but Gutenberg itself is still in a pretty heavy development phase in recent years and has a lot to be finalized prior to expanding into other aspects of wordpress.

[@Hastibet]

They could at least add it as an option to enable, at this point!

[@lisaerez]

Does the code need to be added to a child theme?

[@iamjohnwhite]

I personally prefer to always utilize a child theme and add it there to protect it from being removed from a theme update at core.

[@jelle191]

This is exactly what I needed! Thank you so much :) Is there a way to support full width background/Gutenberg editing in that container?? I can only seem to work within a 1200px wide container. So any background colors set to 'cover' all get restricted to 1200px.

[@BestMLMDXN]

Dear Sir, Your explanation is so well. It makes our work so easy. Everyone I watch your videos, I learn something new. Sir, I want to know that, 1. If we enable custom field option in Wordpress, do we not require Advance Custom Field / Pods / Toolset etc to create custom fields ? 2. Can we create any types of custom fields as other plugins provide. For Example - Text , Wisywig , Gallery etc. 3. If we can create any types of custom fields from Wordpress Custom Field hidden option , how we can create them ? Please make detailed videos on these topics. Learning always from you. With warm regards, Vivek Kumar.

[@bettegarui9335]

But when I add this code, I can't preview any changes in the product page, do you know what's going on?

[@cd38plus]

Great tutorial! And is it possible to enable gutenberg for description on taxonomy and category pages?

[@yi3608]

Can a similar thing be done with Kadence? I tried with GB but it says it is broken and not advised for production site? Not sure what is gong on here

[@wahidaghestani]

its worked like a champ thank u

[@Positivesignals]

Wow , what i exactly need. 😍 just I have a question , I wanna sell my course and people play the video on website and not just send them link of my course for downloding. thanx

[@sharlawailes7149]

Does this also work with Thrive Themes?

[@iamjohnwhite]

It will enable woocommerce to have Gutenberg as your description section, though I’m not positive how thrive handles their theme layout. I don’t see it being an issue though

[@sharlawailes7149]

@@iamjohnwhite Thanks... I will check into it.

[@Dotflix]

Live demo link ?

[@ExposureNinja]

Excellent tips!

[@FernandoArbex]

Very interesting. Thanks a lot for the tutorial

[@johnlewis2148]

does kit work with thrive architect

[@stephenzhao9773]

Just wait for WP 5.9 the complete Full Site Editing template feature.

[@davidalexander9895]

Great solution but unfortunately, there's a bug with this implementation. Once Gutenberg is activated on product pages, you can no longer toggle the "enable reviews" on a product under Advanced > Enable Reviews. You can check and uncheck it, but if you save and refresh it won't have saved the change you made. Does anyone know of a fix? So far I am coming up short.

[@mrdaveii]

I ran into the same problem - I have no idea how to fix it. It also throws an error in my page builder if I try and add the "reviews block"...

[@lifechangingwords7466]

Is this supposed to work with all themes? Because I inserted the code into the functions.php of the Child Theme of my Hello Theme and nothing happened.

[@kevinschmidt2210]

Using the current versions of Wordpress, Woocommerce and Kadence theme, I got the following error when I tried to update the functions.php file. nonce_failure

[@scottasahina]

Can this also be used to add style / content to the default woo shop page too?

[@iamjohnwhite]

You will need to rely on your theme to do that. If you have elementor or beaver themer you can create a custom archive layout to have general style control.

[@scottasahina]

@@iamjohnwhite I use Kadence Theme and Kadence Blocks. Is it possible with these?

[@Sergeant_Camacho]

Excellent pro tip! Thank you! Also, is always a good thing to have a child theme and adding the custom code in the functions.php from the child theme not from the main theme.

[@DanAnzalone0510]

This is only to allow you to edit the description area with Gutenburg, not the entire page. You will still need to build a page around each product and use shortcodes to inject the product description dynamically.

[@youssefelkadri2848]

I love this, thank you very much bro

[@cathywood3684]

There's no doubt in my mind that we are not only going bull,but BTC is going nuclear. A lot of people are wondering if now is a good time to buy because of where the price is at right now. I'd say it's outrightly wrong to just sit back hodl and wait maybe incur some losses along the line, that's a wrong mindset for an investor because as an investor finding ways to increase and stack up more coins thereby making profits should be the way of life,that being said,the market is still all about BTC at the moment and I'll advise current investors and newbies to take advantage of Prof Michael Smith program,a pro trader who runs a training program for investors/newbies who lack understanding on how trading Bitcoin works,to help them recover loss from the crash and also accumulate more Bitcoin with his program I went from having 1.7btc to 7.3btc in just 4 weeks.

[@kevinroberts3789]

Very slick. Thanks.

[@cathywood3684]

There's no doubt in my mind that we are not only going bull,but BTC is going nuclear. A lot of people are wondering if now is a good time to buy because of where the price is at right now. I'd say it's outrightly wrong to just sit back hodl and wait maybe incur some losses along the line, that's a wrong mindset for an investor because as an investor finding ways to increase and stack up more coins thereby making profits should be the way of life,that being said,the market is still all about BTC at the moment and I'll advise current investors and newbies to take advantage of Prof Michael Smith program,a pro trader who runs a training program for investors/newbies who lack understanding on how trading Bitcoin works,to help them recover loss from the crash and also accumulate more Bitcoin with his program I went from having 1.7btc to 7.3btc in just 4 weeks.

[@fxtttfx]

5:26 for a safety reason it's strongly not recommended to edit any .php files right in WP dashboard

[@doubler287]

Good Point. If you do, like he said back up the entire site. OR, just copy all the .php file you are editing in Notepad, Notepad ++, PSDeditor or your favorite code editing software. That way you have an original of what the code was BEFORE you started editing.

[@ChrisNixon13]

Why Felix? What is the risk vs editing it on the backend?

[@fxtttfx]

@@ChrisNixon13If in bad scenario backend admin rights intercepted, than the hacker has possibility to edit any .php and infect them. To do that, open your wp-config.php file and add the following code to it: define( 'DISALLOW_FILE_EDIT', true ); define( 'DISALLOW_FILE_MODS', true );

[@ChrisNixon13]

@@fxtttfx good tip, thank you. 😁

[@vevodigital]

Anyone know how to make the short description Gutenberg too?

[@SabbirSEO1]

How to active Gutenberg for a Woo short description?

[@obelixrecargado]

Adam: I am a fan of elementor but this type of presentation suggests that the best of both worlds could be implemented

[@DevynBrugge]

It can!

No working in WP 5.9 :(

[@maxyasa]

i dont see design library

[@HariRamOfficial]

Awesome trick. Thank you Adom, Please make a video about how to use Gutenberg with elementor

[@plunkett1209]

How to remove attributes additional information tab in product page

[@kellybakri8187]

Hello, this is what i get with astra or astra-child: Unable to communicate back with site to check for fatal errors, so the PHP change was reverted. You will need to upload your PHP file change by some other means, such as by using SFTP.

[@alexunder649]

Thank a lot

[@3dpartner]

won't work with WC 5.2.2 and WP 5.7.2 anymore

[@WPCrafter]

Umm no! I am using WP 5.7.2 and its working just like it did when I was running 5.7.1 last week. It works fine and an update to a new version of WordPress is not going to break that.

[@3dpartner]

​@@WPCrafter i just found that video, placed the script in the function.php but it had no effect at all on my stage side.

[@WPCrafter]

@@3dpartner Are you using the "Classic Editor" plugin on your website? If so that may be causing that. Or perhaps you are not placing the function in the right spot or right theme functions file?

[@3dpartner]

@@WPCrafter my bad, was on the wrong stage site :D works just fine

[@KaiBuskirk]

Cool!

[@jasonstetsonofficial]

why not use Code Snippets ?

[@WPCrafter]

Yup, I use code snippets and even say that at the end of the video. You can add the function any way that works best for you. I think John is coming from a developer background vs a user, that is why he did it the way he did.

[@orangeenergymedia]

@@WPCrafter So how about telling us how to do it in Elementor Adam?

[@iamjohnwhite]

@@orangeenergymedia just follow the video for enabling Gutenberg. Then, you’ll need to create a woocommerce product layout for your custom theme and the dynamic description content section will be updated with your Gutenberg layout. I show it off with beaver builder themer but the concept is essentially the same where you just assign your description to a specific row and column and it will fill in from there

[@orangeenergymedia]

@@iamjohnwhite Huh? Can't I use the shortcode widget ?

[@davidalexander9895]

@@orangeenergymedia It's basically exactly the same, the only difference being using Elementor's tag for getting the content into a template. Probably not enough to justify another video.

[@worldbookscollect6058]

thanks

[@unorthodoxmedia451]

You should probably do this in a child theme.

[@RoryMichaelchuck]

dont think this is working anymore king

[@cameronlee2370]

Im a KZbinr

[@cathywood3684]

There's no doubt in my mind that we are not only going bull,but BTC is going nuclear. A lot of people are wondering if now is a good time to buy because of where the price is at right now. I'd say it's outrightly wrong to just sit back hodl and wait maybe incur some losses along the line, that's a wrong mindset for an investor because as an investor finding ways to increase and stack up more coins thereby making profits should be the way of life,that being said,the market is still all about BTC at the moment and I'll advise current investors and newbies to take advantage of Prof Michael Smith program,a pro trader who runs a training program for investors/newbies who lack understanding on how trading Bitcoin works,to help them recover loss from the crash and also accumulate more Bitcoin with his program I went from having 1.7btc to 7.3btc in just 4 weeks.

[@bertwesler1181]

Why do all of you freaks say "Let's go ahead and. If I hear it one more time I'm going postal~! And what the hell is up with "Inside" instead of "In"~!~!~!