Learn how to create WooCommerce Product Page Design with Gutenberg & WordPress. If you’re fed up with having boring WooCommerce Product Page Design’s and want to have a little more creative freedom, then this guide will show you how. Learn how to enable the Gutenberg editor in WooCommerce and start taking advantage of all the great tools you have at your disposal. In this video, I’ll show you how to enable the Gutenberg block editor in WooCommerce and how to build more feature-rich product pages with Stackable Blocks – a free block bundle that has tons of great features as well as some excellent free blocks to help you get started. The tools covered in this video: – Stackable (Free) – https://wpstackable.com/ – Stackable Pro – https://jo.my/stackable – Blocks Navigation – https://woo.wpprowebsite.com/wp-admin/plugins.php – Blocksy Theme – https://creativethemes.com/blocksy/ – Blocksy Pro – https://jo.my/y67ten New to WooCommerce? Watch my in-depth tutorial on building an entire eCommerce website with WooCommerce, Blocksy and Gutenberg for free. https://www.youtube.com/watch?v=gNnPX2AEk6U ENABLE GUTENBERG // enable gutenberg for woocommerce function activate_gutenberg_product( $can_edit, $post_type ) if ( $post_type == ‘product’ ) $can_edit = true; return $can_edit; add_filter( ‘use_block_editor_for_post_type’, ‘activate_gutenberg_product’, 10, 2 ); // enable taxonomy fields for woocommerce with gutenberg on function enable_taxonomy_rest( $args ) $args[‘show_in_rest’] = true; return $args; add_filter( ‘woocommerce_taxonomy_args_product_cat’, ‘enable_taxonomy_rest’ ); add_filter( ‘woocommerce_taxonomy_args_product_tag’, ‘enable_taxonomy_rest’ ); REMOVE DESCRIPTION HEADING // Remove the product description Title add_filter( ‘woocommerce_product_description_heading’, ‘__return_null’ ); Take your WordPress website and skills to the next level! ► THE TOOLS I LOVE ◄ If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support. ► EXCLUSIVE WPTUTS DISCOUNTS ◄ ✅ WPVivid Backup Pro: https://jo.my/vividpro (use WPTUTS30 for 30% off) ✅ Project Huddle: https://jo.my/etafyp (WPTUTS for 20% off – Exclusive) ► MY PREFERRED HOSTING PROVIDERS ◄ ✅ CloudWays: https://jo.my/1feeng8 ✅ SiteGround: https://jo.my/sgwptuts ► WORDPRESS VISUAL PAGE BUILDERS ◄ ✅ ELEMENTOR PRO: https://jo.my/1s0t2s2 ✅ Brizy Pro: https://bit.ly/2Ji97r8 ✅ DIVI 3 Page Builder: http://bit.ly/2HiiDcE ► WORDPRESS THEMES ◄ ✅ GeneratePress Premium: http://bit.ly/2Ydn1SE ✅ OCEANWP: http://bit.ly/2fRHBr0 ✅ DIVI Theme: http://bit.ly/2G8JMiA ✅ Astra Pro: http://bit.ly/2zruoKn ► WORDPRESS TOOLS ◄ ✅ SMART SLIDER 3: http://bit.ly/2G0G1vB ✅ CSSHERO: http://bit.ly/2qbrRl6 ► WORDPRESS PLUGINS ◄ ✅ SEOPress Pro: https://jo.my/seopress ► SUBSCRIBE ◄ http://bit.ly/2rX7rhu ► LETS CONNECT: ◄ 👉 Twitter: https://twitter.com/WPTutz 👉 Facebook Group: https://wptuts.co.uk/facebook SUPPORT: Our website offers additional information and perks. Please check it out! http://wptuts.co.uk
WooCommerce - How to Show Categories on Shop Page?
Produce A Service Product In WooCommerce
Find out just how t...
Exactly how to Customize the WooCommerce Shop Page by means ...
How to add products to WooCommerce shop page | WooCommerce 2021 Tutorial
How to Create Custom Product Layouts in Woocommerce With Gutenberg?
WooCommerce Product Page Customization | ShopEngine & Elementor
Include Extra WooCommerce Product Options for [COMPLIMENTARY...
How to customize shop page in WooCommerce | Shop Page Settings | Astra
Produce an Affiliate Product In WooCommerce
Discover just ho...
Elementor Pro Shop Page Tutorial & Ele Custom Skin | Custom Woocommerce Shop #1
How to design Woocommerce Shop Page | Woocommerce Divi
Custom-made WooCommerce Shop Page (Elementor Free Version).
...
Great, thank you so much!!!
very handy. Thank you.
What if you want that block to be above the product data?
The code could have a problem because the short description only appears in html mode, any thoughs?
Is there a way to do this with other woocommerce templates, like checkout or Pay order page?
With the last update (WP and WC too) not working anymore this snippet. 🙁
I see in gutenberg editor in long description. Its good. I save the product, view it, but nothing. If i go back to the editor, gone all of description, like has not saved it. 🙁
How do you remove the basic product template and sidebar from woocoomerce so you can just have the basic canvas page to build from blocks?
this video really helped me to improve my website
Something is very strange and frustrating . All the images or videos blocks are 300px wide. Heading and paragraphs are fine. I am using Oxygen with Oxyninja, but my other sites with same setup are fine. Anyone could help?😁
Hi Paul, The code brought up the following error for my site (I’ve removed site particulars): Don’t Panic
The code snippet you are trying to save produced a fatal error on line 111:
Uncaught Error: Object of class WP_Error could not be converted to string in /home/customer/xxxxxxxxxxxx/public_html/wp-content/plugins/sg-security/templates/error.php:111 Stack trace: #0 etc….
The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.
Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.
heay……… thank you! :DI was looking for this……
I wanted to edit the area without elemetor…. because of pagespeed optinmierung……..
Thank you so much
Great video. Thank you!
Awesome tutorial. But by the time I am watching, I just can not switch between Classic Editor and Gutenberg Editor inside the product editing page on the backend. Is it affected by different themes? Or any reasons? Thank you.
Doesn’t work with WordPress 6.x
You are a scholar my good sir thank you!!!!