Add Page Builder in Product

The docs for developer mean you must have knowledge and coding skill. Although, we’re create the docs for developer to help you achieve something not available in original feature, but we don’t provide support for anything not work when you reference with docs for developer. If the example code not work for you, please debug it by your-self or hire a freelancer to debug it for you instead.

All the customize will lose when you update our theme/plugin to new version in future. To avoid it, you must use filter and action: https://developer.wordpress.org/plugins/hooks/.

Please add the function below in functions.php file in child theme

	// add page builder to products
	if( is_admin() ){ add_filter('gdlr_core_page_builder_post_type', 'gdlr_core_product_add_page_builder'); }
	if( !function_exists('gdlr_core_product_add_page_builder') ){
		function gdlr_core_product_add_page_builder( $post_type ){
			$post_type[] = 'product';
			return $post_type;
		}
	}

	// print page builder content in products
	add_action( 'woocommerce_after_single_product_summary', 'gdlr_core_page_builder_product_type', 5 );
	if( !function_exists('gdlr_core_page_builder_product_type') ){
	function gdlr_core_page_builder_product_type() {
			if( !post_password_required() ){
				do_action('gdlr_core_print_page_builder');
			}
		}
	}

Then add this custom style in style.css file in child theme and check the single product again.

/* SINGLE PRODUCT PAGE BUILDER STYLE */
.single-product .gdlr-core-page-builder-body {
    width: 100%;
    clear: both;
}

/* SINGLE PRODUCT OVERRIDE STYLE */
.single-product.woocommerce div.product form.cart.variations_form {
    width: 100%;
}
.woocommerce div.product form.cart .variations td.label {
    text-align: left;
}
.single-product.woocommerce div.product .product_meta {
    clear: both;
}
.woocommerce div.product form.cart .woocommerce-variation-description p {
    margin-bottom: 0.5em;
}
.woocommerce-variation-price {
    margin-bottom: 0.5em;
}
.woocommerce div.product div.images img {
    height: 600px;
}
.woocommerce div.product div.images .flex-control-thumbs img {
    height: auto;
}

@media screen and (max-width: 768px) {
    .woocommerce div.product div.images img {
        height: auto;
    }
}