Add Page Builder in Product

The developer documentation assumes you have knowledge and coding skills. While we created these docs to help you achieve things not available in the original features, we do not provide support if something doesn’t work when referencing the developer documentation. If the example code doesn’t work for you, please debug it yourself or hire a freelancer to help with debugging.

All customizations will be lost when you update our theme/plugin to a new version in the future. To avoid this, you must use filters and actions: 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;
    }
}