Landing Page with Variable Product Inserted

[Elemental]

Hello everyone.

I am trying to create a landing page that has a variable product as part of the page.
I need the options for the product to display without the visitor having to click through to the product page itself.

I used the woocommerce shortcode:

[product_page id = ’ xxxx’]

That inserts the product page onto my landing page, but it also shows the product image, title, short description and meta information. The only things I need displayed are the product options (variables), quantity selector, and Add to Cart button.

Here is what I am trying to achieve:

Solutions I have tried:

1. Created a separate product template for that individual product, edit the elements in that template, then insert that as my product page inside of the lander.

Problem - When the product page is inserted, it does not have any Bricks formatting whatsoever, its the default woocommerce product page (that contains the elements mentioned above).

2. Adding custom php just to that page that would remove the elements for the product being inserted on that page:

<?php

function remove_woocommerce_elements() {
    // Only proceed if we're on the specific product page
    if (!is_single(xxxx)) {
        return;
    }
    
    // Remove elements from single product summary
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
    
    // Remove elements from before single product summary
    remove_action('woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20);
}

add_action('wp', 'remove_woocommerce_elements');

Problem - This actually worked watch video here!.. Until I did some editing on the page, which included executing more code, then the layout broke.

I was able to get this done in Elementor via third party plugin: watch the video here.

I really need a solution for this with Bricks either natively or third party plug.

Any assistance appreciated. Thanks in advance.

[Elemental]

Solved.

The php code concept was correct, just improperly formatted and placed in the wrong place. Should be in Page Settings code area and not a Code element.

Here is the result

Here is the code to be placed in Settings > Page Settings > Custom Code > Header Scripts

<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

add_action( 'wp_head', function() {
    if ( is_single( 2365 ) ) {
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
        remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
    }
}, 9999 );

Hope this helps someone