1. Home
  2. Knowledge Base
  3. WooCommerce Product Add-Ons Ultimate
  4. Layout issue with Elementor
  1. Home
  2. Knowledge Base
  3. Troubleshooting
  4. Layout issue with Elementor

Layout issue with Elementor

If you’re using the Elementor page builder with Product Add-Ons Ultimate, you might find the layout on the product page goes awry, most probably with the Add-Ons and the Add to Cart button appearing next to each other in two columns.

This is because Elementor applies a flex layout to the cart form. You can fix this by adding this CSS to your Additional CSS field in the Customizer:

.woocommerce div.product.elementor form.cart.variations_form .woocommerce-variation-add-to-cart,
.woocommerce div.product.elementor form.cart:not(.grouped_form):not(.variations_form) {
display: block;
}
.elementor-element ul.pewc-product-extra-groups {
padding: 0;
}

Was this article helpful?

Related Articles