{"id":2097,"date":"2019-02-23T20:24:46","date_gmt":"2019-02-24T04:24:46","guid":{"rendered":"https:\/\/ginastricklind.com\/?p=2097"},"modified":"2019-03-28T11:07:50","modified_gmt":"2019-03-28T18:07:50","slug":"make-beaver-builder-work-on-woocommerce-product-pages","status":"publish","type":"post","link":"https:\/\/ginastricklind.com\/make-beaver-builder-work-on-woocommerce-product-pages\/","title":{"rendered":"Make Beaver Builder Work on WooCommerce Product Pages"},"content":{"rendered":"

In this particular use case, the Description Tab of the product wasn’t being used; only the “Short Description” which shows up at the top right. The long description shows under the product in the tabs panel. The content area will be placed at the bottom of the page (after the product tabs and before the footer) and able to be edited by Beaver Builder.<\/p>\n

Obviously, make sure you have Beaver Builder<\/a> installed and your post type settings should have “Products” ticked. This article will require you to create a couple template files in your theme directory and add a few lines of code to your functions.php file.<\/p>\n

*This does not work well with the\u00a0Custom Product Tabs for WooCommerce<\/a>. As of this post date, the plugin itself doesn’t seem to work well with Beaver Builder being activated and used in the main content area.
\n** See update at bottom for the solution on Custom Product Tabs<\/strong><\/p>\n

 <\/p>\n

Remove Description From The Tabs<\/h2>\n

What I did was remove the Description Tab from the tab panel so I could utilize the content of that for Beaver Builder. To do this you’ll need to add a filter that unsets the “Description” from that panel.<\/p>\n

add_filter( 'woocommerce_product_tabs', 'sd_remove_product_tabs', 98 );\r\nfunction sd_remove_product_tabs( $tabs ) {\r\n unset( $tabs['description'] );\r\n return $tabs;\r\n}<\/pre>\n
 <\/p>\n
Create The Template Files<\/h2>\n
Since WooCommerce is constantly updated, you may need to reference the default template files relative to your version number<\/a>. I’ve used v3.5.0 in this example to copy the template files to my theme and then I’ll add the modifications below. If your theme already has single-product.php and\/or content-product.php I’ll be highlighting the code necessary to make this work.<\/p>\n
 <\/p>\n
single-product.php<\/h3>\n
Beaver Builder needs to use the while loop in order to work properly. Without that you wont have any editable regions.<\/p>\n
Essentially, we’re just adding the while loop and asking for the contents of content-product.php file inside of that.<\/p>\n
<?php\r\n if ( have_posts() ) :\r\n while ( have_posts() ) :\r\n the_post();\r\n get_template_part( 'content', 'product' );\r\n endwhile;\r\n endif; ?>\r\n\r\n<\/pre>\n
You can see where I added that to my file below.<\/p>\n