WooCommerce with Gutenberg

By default the WooCommerce product page comes with a classic layout and doesn’t have much flexibility, the product page usually looks boring and non-responsive. For example look at this page,

which has a boring frontend and a lot of text in the description, this also doesn’t look very appealing. Now pages like this will make your site visitors run away. To solve this we will add Gutenberg capabilities to our blog page so our page should look great.

Now to add the Gutenberg feature to your woocommerce, we will need a free plugin called code snippet.

Once the plugin is activated go to the plugin in your right-hand sidebar, add a new snippet

Give a cool name to your snippet and add the below code

// 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' );

Once you have added your code make sure you select “Run snippet everywhere”

Give a nice little description to your snippet.

Save and activate your snippet.

With Gutenberg blocks enabled in our product, we can do some amazing things for making our product look awesome, this is how the page looks now.

Few plugins to help you with Gutenberg Layouts

Hope this article help you in putting up a great page for your e-commerce site

%d bloggers like this: