I am experiencing a layout issue on the single product page when using Elementor Pro together with the WPC Product Bundles plugin.
When a product has an active bundle assigned, the product page layout breaks: columns become misaligned, and the entire right-side content shifts outside of the intended Elementor structure.
Here are the key details:
The single product template is built entirely with Elementor Theme Builder, using the standard WooCommerce widgets (Product Title, Price, Add to Cart, etc.). Without a bundle, everything displays correctly.
As soon as the product includes a bundle, the plugin injects its bundled items list outside of the Elementor column/container structure, causing the layout to break on the frontend.
I attempted to manually insert the bundle using the shortcode [wpc_bundle], but:
the shortcode either appears as plain text,
or does not render the bundle at all inside Elementor containers.
The problem occurs only on the live frontend. In Elementor’s editing mode, the layout looks correct. The issue appears only when the page is viewed normally.
In the plugin settings (Settings → Bundled products → Position), every available position option breaks the layout, whereas selecting None (hide it) removes the bundle but also prevents me from placing it manually where I want.
It seems that the plugin:
renders the bundle HTML strictly through WooCommerce hooks,
does not respect Elementor’s container/column structure,
does not offer a functional shortcode that allows manual placement inside Elementor templates.
❓ Information Requested
I would like to know:
How can I manually place the bundled products list inside a chosen Elementor container, so that the layout does not break?
Is there a fully functional shortcode (e.g., [wpc_bundle id="123"]) that renders the bundle exactly as the automatic hook does?
Is there a way to disable the automatic hook injection, so I can position the bundle output manually within Elementor?
Are there any plans for improved Elementor Theme Builder integration?
First of all, thank you for your previous solution — the code you provided worked perfectly and fixed the layout issue.
I now have another question regarding the setup of bundled products with variable products.
We run a translation agency and sell translation packages for different sets of documents.
One of the packages is meant for customers importing a car from the USA to the European Union.
In this case, the customer typically has:
a Certificate of Title,
a Purchase Invoice,
and a Customs Clearance Document.
Because cars often arrive through ports in different countries, the customs document may be issued either in German (DE) or Dutch (NL), depending on whether the clearance was done in Germany or in the Netherlands.
What we want to achieve is:
Inside one bundle (or one grouped set of documents), the customer should always receive:
Certificate of Title (simple product)
Purchase Invoice (simple product)
Customs Clearance Document — but here the customer must be able to choose whether the document they need translated is:
the German version or
the Dutch version
Both of these exist in WooCommerce as variations of a single variable product.
However, when we add this variable product to the bundle, the user cannot select the variation on the product page — the variation selector does not appear.
Is there a correct way to configure WPC Product Bundles so that:
a variable product included in the bundle displays its variation dropdown, and
the customer can choose between the German or Dutch version of the customs document?
At the moment this does not work as expected.
How should this be set up?
You need to find and add the variable product to the bundle:
Then, you can select the variant on the bundle product details page:
If it doesn't work correctly on your website, please provide your website credentials (wp-admin link, username, and password) or create a development or staging site with identical configurations so that I can check for any issues.
I am experiencing a layout issue on the single product page when using Elementor Pro together with the WPC Product Bundles plugin.
When a product has an active bundle assigned, the product page layout breaks: columns become misaligned, and the entire right-side content shifts outside of the intended Elementor structure.
Here are the key details:
The single product template is built entirely with Elementor Theme Builder, using the standard WooCommerce widgets (Product Title, Price, Add to Cart, etc.). Without a bundle, everything displays correctly.
As soon as the product includes a bundle, the plugin injects its bundled items list outside of the Elementor column/container structure, causing the layout to break on the frontend.
I attempted to manually insert the bundle using the shortcode [wpc_bundle], but:
the shortcode either appears as plain text,
or does not render the bundle at all inside Elementor containers.
The problem occurs only on the live frontend. In Elementor’s editing mode, the layout looks correct. The issue appears only when the page is viewed normally.
In the plugin settings (Settings → Bundled products → Position), every available position option breaks the layout, whereas selecting None (hide it) removes the bundle but also prevents me from placing it manually where I want.
It seems that the plugin:
-
-
-
❓ Information Requestedrenders the bundle HTML strictly through WooCommerce hooks,
does not respect Elementor’s container/column structure,
does not offer a functional shortcode that allows manual placement inside Elementor templates.
I would like to know:
How can I manually place the bundled products list inside a chosen Elementor container, so that the layout does not break?
Is there a fully functional shortcode (e.g., [wpc_bundle id="123"]) that renders the bundle exactly as the automatic hook does?
Is there a way to disable the automatic hook injection, so I can position the bundle output manually within Elementor?
Are there any plans for improved Elementor Theme Builder integration?
Hi Dominik,
Please add the custom code below to fix that issue. (How to add custom code? ↗):
add_action( 'woocommerce_before_add_to_cart_quantity', function () { global $product; if ( $product->is_type( 'woosb' ) ) { echo '<div class="e-atc-qty-button-holder">'; } } );Let me know if it works as expected.
Best regards,
Dustin
Hi Dustin,
First of all, thank you for your previous solution — the code you provided worked perfectly and fixed the layout issue.
I now have another question regarding the setup of bundled products with variable products.
We run a translation agency and sell translation packages for different sets of documents.
One of the packages is meant for customers importing a car from the USA to the European Union.
In this case, the customer typically has:
a Certificate of Title,
a Purchase Invoice,
and a Customs Clearance Document.
Because cars often arrive through ports in different countries, the customs document may be issued either in German (DE) or Dutch (NL), depending on whether the clearance was done in Germany or in the Netherlands.
What we want to achieve is:
Inside one bundle (or one grouped set of documents), the customer should always receive:
Certificate of Title (simple product)
Purchase Invoice (simple product)
Customs Clearance Document — but here the customer must be able to choose whether the document they need translated is:
the German version or
the Dutch version
Both of these exist in WooCommerce as variations of a single variable product.
However, when we add this variable product to the bundle, the user cannot select the variation on the product page — the variation selector does not appear.
Is there a correct way to configure WPC Product Bundles so that:
a variable product included in the bundle displays its variation dropdown, and
the customer can choose between the German or Dutch version of the customs document?
At the moment this does not work as expected.
How should this be set up?
Thank you very much!
You need to find and add the variable product to the bundle:
Then, you can select the variant on the bundle product details page:
If it doesn't work correctly on your website, please provide your website credentials (wp-admin link, username, and password) or create a development or staging site with identical configurations so that I can check for any issues.
Best regards,
Dustin