WooCommerce Product Page Design with Gutenberg

Поделиться
HTML-код
  • Опубликовано: 22 янв 2025

Комментарии • 93

  • @royahmariechannel
    @royahmariechannel Год назад +1

    I literally spent DAYS trying to find this answer. Thank you SO much for this.

  • @nirajsuryawanshi9113
    @nirajsuryawanshi9113 2 года назад +2

    Thank you so much. It worked. This is the first time I am making a website for my small business. Your tutorials are helping a lot. You are great.

  • @ancientimmie
    @ancientimmie Год назад

    Paul, thank you so much for making all these tutorials. They have gotten my little e-Commerce site a more uniform look. I've learned quite a bit and I'll probably learn a lot more.

  • @JulianSong
    @JulianSong 3 года назад +1

    Wonder is that possible for Product Short Description.

  • @odintech3692
    @odintech3692 3 года назад +1

    Thanks for this tutorial !!!

  • @ufo069
    @ufo069 3 года назад +1

    Paul, this is what I was looking for! Thank you.

    • @WPTuts
      @WPTuts  3 года назад +1

      My pleasure :)

  • @Innovationwork
    @Innovationwork 2 года назад

    this video really helped me to improve my website

  • @zannakristal3754
    @zannakristal3754 3 года назад +1

    Paul Thankyou so very much your videos are amazingly ..awesome..👏✨✨✨🔥🔥

    • @WPTuts
      @WPTuts  3 года назад

      My pleasure 😁

  • @SharonShaked
    @SharonShaked 3 года назад

    this is a good starting point, but templating and dynamic content is a must.

  • @oompaAIDS
    @oompaAIDS 3 года назад +1

    The code could have a problem because the short description only appears in html mode, any thoughs?

  • @hopepastures6424
    @hopepastures6424 Год назад

    Thanks for another great video. I seem to be having a problem with the code, it works ok but when editing a product page, the page goes behind the black woo sidebar now, and not up to it. What am I doing wrong?

  • @Seanyy
    @Seanyy 2 года назад

    You are a scholar my good sir thank you!!!!

  • @MuhammadAnasA
    @MuhammadAnasA Год назад

    Hello nice info, I want knw how to enable short description too.

  • @dinukakularathna2824
    @dinukakularathna2824 2 года назад

    Great video. Thank you!

  • @claudett97
    @claudett97 3 года назад +3

    Hey! great video!! I was wondering if there is a way to make this custom product page for all products with the click of a botton instead of editing each product one by one

  • @malaga16
    @malaga16 2 года назад

    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. :-(

  • @SimonWYHuang
    @SimonWYHuang 3 года назад +1

    How's the loading speed compare to using Elementor page builder to edit?

  • @EdgarasBendikas
    @EdgarasBendikas 6 месяцев назад

    Tried to activate the php code and getting this Error message: syntax error, unexpected DESCRIPTION (T_STRING)

  • @HaifengZhu-pn3uq
    @HaifengZhu-pn3uq Год назад

    I used your method, however, the product title doesn't display when I edit that product page on the front end, other things are okay

  • @bettegarui9335
    @bettegarui9335 Год назад

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

  • @danielrindraniaivo1553
    @danielrindraniaivo1553 Год назад

    Hi Paul! I have a question that may be out of date anyway!! nowadays doing this with elementor isn't still possible? thks

  • @DarronThevarajah
    @DarronThevarajah 3 года назад

    this is a great step to customising the woocommerce e-shops. Do you know if you can (with another snippet) add Guttenberg capabilities to category and subcategory pages

  • @bassman601
    @bassman601 3 года назад

    What if you want that block to be above the product data?

  • @seoathlet2199
    @seoathlet2199 2 года назад

    heay......... thank you! :DI was looking for this......
    I wanted to edit the area without elemetor.... because of pagespeed optinmierung........
    Thank you so much

  • @danh102
    @danh102 3 года назад

    Comments tab not showing when doing like you ?
    How Fix it ?

  • @dazman88
    @dazman88 2 года назад

    Is there a way to do this with other woocommerce templates, like checkout or Pay order page?

  • @matthewhellier5898
    @matthewhellier5898 3 года назад

    Works great except the short description jumps to side bar (in editor) and cannot use in visual mode - any work around?

  • @jeffreyhuen
    @jeffreyhuen 3 года назад +1

    Seems this code snippet no longer works in Wordpress 5.8…

  • @unimkeabana7703
    @unimkeabana7703 3 года назад +1

    Thank you so much for this

  • @marknasri3490
    @marknasri3490 3 года назад +1

    thanks for giving us so much

  • @JanKratochvilcom
    @JanKratochvilcom 3 года назад

    Great, thank you so much!!!

  • @matlacky
    @matlacky Год назад

    Thank you Paul. This worked great (Exerpt from Coding for Dummies: Do not left the empty line on the ending :))
    But when I want to change the main Product image - I don't know how. There's a Gallery product available, but I'm not able to replace the main image. Can anybody help?

  • @vwtourandtransportbali6555
    @vwtourandtransportbali6555 3 года назад +1

    thq for the video bro ...

  • @alinaseri7951
    @alinaseri7951 3 года назад

    very handy. Thank you.

  • @petermason7743
    @petermason7743 3 года назад +1

    Excellent.
    Do you need you use a child theme when adding the code?

    • @WPTuts
      @WPTuts  3 года назад

      If you intend to directly add the code to the functions.php file, I would generally recommend a child theme.

    • @petermason7743
      @petermason7743 3 года назад +1

      Thank you for your reply. So by using the plugin and code you have shown in your tutorial it is not necessary to use a child theme. I am not confident about adding code to the php file.

    • @WPTuts
      @WPTuts  3 года назад

      @@petermason7743 no problem at all. Yes, that's right. If you use the Code Snippets plugin it means you don't need to touch any of the WordPress or theme files and don't need to use a child theme. 👍

  • @allanguimaraes
    @allanguimaraes 3 года назад

    I appreciate to know how to make the same, activate Gutenberg Editor, for some taxonomies, like Product Categories, Brands, etc.

  • @portuguesepedia
    @portuguesepedia 3 года назад +1

    Hi, awesome content and very useful. Thank you for taking the time to create these videos ✨

  • @piratebasscaptain
    @piratebasscaptain 3 года назад

    Hey hi there, nice tutorial as always and very hot topic as well. I like very much Gutenberg and I avoid PB for the classic bloat they add.
    Quick question, do you know why WooCommerce have not implemented yet Gutenberg on product pages ? Is any reason , maybe a bug or so ?

    • @WPTuts
      @WPTuts  3 года назад

      No idea, but you can enable it. I've created a tutorial on it.

    • @rickonvb
      @rickonvb 2 года назад

      Yeah... I also am concerned about compatibility .... why. didn't WooCommerce implemented it yet?

  • @allanknudsen2616
    @allanknudsen2616 3 года назад +1

    Sure, you can build a nice description area, but you really would want to customize the layout of the product page with Gutenberg. That, would be awesome. I guess we will come there someday. Nice video though 👍

    • @jamiewp
      @jamiewp 3 года назад

      Hi, the WooBuilder Blocks plugin lets you do this already

    • @allanknudsen2616
      @allanknudsen2616 3 года назад +1

      @@jamiewp Thanks soo much, I have totally missed that one. Seems like a great plugin. Appreciate the tip🙏

    • @jamiewp
      @jamiewp 3 года назад

      @@allanknudsen2616 my pleasure :)

  • @medbkl1746
    @medbkl1746 Год назад

    it doesn't work anymore, any update

  • @gavinwehlburg8084
    @gavinwehlburg8084 3 года назад

    Hi Paul, is this possible to do for Elementor as the Editor?

    • @WPTuts
      @WPTuts  3 года назад

      I believe so, yes. You'd need to enable it in the Elementor settings. 👍

    • @xristoschrisp
      @xristoschrisp 3 года назад

      @@WPTuts that is a good idea .... how can i use elementor in the product page?

  • @f2fcoil
    @f2fcoil 3 года назад

    Thanks!
    Two questions:
    1. Why not place the code on the child theme function.php?
    2. Is working with Gutenberg on the product page any different than using Elementor?

    • @WPTuts
      @WPTuts  3 года назад +1

      1. You absolutely can, but this was aimed at those a little less confident editing WordPress files and want an easy way to enable the feature.
      2. I would generally say speed is the key! We all know that Elementor adds additional weight to a website and not everyone wants to use a PB just to make design changes to a single page (e.g. the product page).

    • @f2fcoil
      @f2fcoil 3 года назад

      @@WPTuts Thanks 🙏

  • @MiegoAmbasadorius
    @MiegoAmbasadorius 3 года назад

    Amazing, thanks!

  • @BlaMaPio
    @BlaMaPio 2 года назад

    Your solutions removes "Catalog visibility" options :(

  • @brunogarnierklein6404
    @brunogarnierklein6404 2 года назад

    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?😁

  • @michaelfoerster3364
    @michaelfoerster3364 3 года назад

    Awesome, thanks for the great video. Please show us also a way to use this for the product category pages.... :)

  • @openedto
    @openedto 3 года назад

    Can I ask why you're using code to enable Gutenberg, when it's already a part of Wordpress?
    I'm just wondering I don't get it. Just starting out. :)

    • @WPTuts
      @WPTuts  3 года назад

      By default, Gutenberg isn't enabled in WooCommerce, so this code enables it.

  • @brussardo
    @brussardo 2 года назад

    Thank you

  • @TomRobakCom
    @TomRobakCom 2 года назад

    Doesn't work with WordPress 6.x

  • @mdrdemode4480
    @mdrdemode4480 3 года назад

    Paul, great video as always. I learned so much but still learning. Thank you.
    Any thoughts how long before we see some real Gutenberg theme builder? Something similar to Elementor theme builder where you can take control over every aspect of webpage. I'm really looking forward to that momoent.

    • @WPTuts
      @WPTuts  3 года назад

      My understanding is that full site editing is in the latest beta releases and I can't imagine it will be too much longer before that starts to roll out. I'd say that by the end of the year, we'll have control over those aspects of the design in Gurenberg.

  • @victorrenevaldiviasoto9728
    @victorrenevaldiviasoto9728 3 года назад +1

    This sounds tasty to combine with Crocoblock's repeaters and some Custom CSS

    • @WPTuts
      @WPTuts  3 года назад +1

      Hmmm now I hadn't considered that aspect. 🤔

    • @victorrenevaldiviasoto9728
      @victorrenevaldiviasoto9728 3 года назад

      @@WPTuts I was doing it with Elementor to add Chips with tags, campaigns and custom attributes.
      Now, I think that Crocoblock + Gutenberg & Editorskit you can achieve almost the same, with a ton less of bloat.

    • @WPTuts
      @WPTuts  3 года назад +1

      @@victorrenevaldiviasoto9728 it certainly sounds like something to look into in a little more detail for sure.

  • @ilyasahmad5319
    @ilyasahmad5319 3 года назад

    please upload custom product page using flatsome theme

  • @Rob-ib8xw
    @Rob-ib8xw 6 месяцев назад

    !!!! This code does not save variations when saving the product (post) !!!!!

  • @xyzzzzzzdkdk
    @xyzzzzzzdkdk 2 года назад

    Thanks

  • @davidalexander9895
    @davidalexander9895 3 года назад

    Hey there, great video this is a really cool way to make product pages more interesting. I think I ran into one issue though. When using Gutenberg on a product page, I can't turn on reviews. If I go to enable reviews it checks and then I update the product and come back and it's unchecked again. Can anyone else replicate that?

  • @rabeezley
    @rabeezley 3 года назад

    Great Video... I was able to get the description section designed. Can you modify the default things above the description; excerpt, featured image, add to cart button without something like Elementor? Can this be done with Gutenberg?

    • @jamiewp
      @jamiewp 3 года назад

      check out woobuilder blocks - this lets you design the entire product page using gutenberg

    • @rabeezley
      @rabeezley 3 года назад

      @@jamiewp I tried a few weeks ago, but you want a card credit even though I just want to use my PayPal balance...

  • @MarcelHeiniger
    @MarcelHeiniger 2 года назад

    look like no more working ;-(

  • @johnfairest
    @johnfairest 3 года назад +2

    There is a need to make woocommerce products more attractive to the users

    • @WPTuts
      @WPTuts  3 года назад +1

      Absolutely, and this is a good starting point for sure 👊🏼

  • @rahulrrun7730
    @rahulrrun7730 3 года назад

    Hi try bootstrap studio and build a website

    • @WPTuts
      @WPTuts  3 года назад

      Why?

    • @rahulrrun7730
      @rahulrrun7730 3 года назад

      Try it once you will become fan of it and I think there are not more content on bootstrap studio than wordpress so u can develop your channel too

  • @silentphil77
    @silentphil77 3 года назад +1

    first woo

  • @catmay5723
    @catmay5723 Год назад +1

    No longer works.

  • @jjgtz99
    @jjgtz99 3 года назад

    I named it the Wootenberg Editor

  • @doodarkduck4576
    @doodarkduck4576 3 года назад

    No Sub ?

    • @WPTuts
      @WPTuts  3 года назад

      Sorry, what?

    • @doodarkduck4576
      @doodarkduck4576 3 года назад

      @@WPTuts Sorry , I mean subtitles .Every clip of you will have a subtitle

  • @laseruser_com
    @laseruser_com 2 года назад

    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.

  • @the_indrid_cold
    @the_indrid_cold 3 года назад

    But ratings in backend doesn't work :)