Help required on product page alignment

Hi Support,

I am using Woocommerce product bundles plugin to add a functionality of frequently bought together to the product page. When I am using the plugin on the variable product, it looks good and add to cart button is perfectly aligned as shown below in /1/, however, when I am using the same plugin on simple product, the add to cart button is not aligned properly as shown in /2/. Will you please check and help?

Thanks.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .product-type-simple form.cart{
    display: block;
}
div.bundled_product_summary, .woocommerce div.product.bundled_product_summary {
display:inline-block;
}

Best Regards

Hi Elise,

Thanks for the support.

I applied the code and it corrected the layout, however, the add to cart button button size is now smaller as compared to the other product. Will you please share the code for fixing the Add to Cart button size as well? Just to add, before I was using the below code that was provided by xtemos.

Thanks.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .single_add_to_cart_button {
width: 81%;
}

Best Regards

Hi Elise,

Cannot we do the flex option here as well? I am saying it because then it will be same in all the platforms i.e. PC, tablet and phone.

Thanks.

Hello,

Please remove this code: https://prnt.sc/uxkz14

Please add this code to the Theme Settings > Custom CSS > Global:

.product-type-simple form.cart {
  display: flex;
  flex-wrap: wrap;
}
.product-type-simple form.cart > button {
  flex-grow: 1;
}

Best Regards

Hi Elise,

Thanks a lot. It worked like a charm. Right now, the given below code is the one that I have applied after your instructions. Will you please confirm if it looks good or I need to remove any un-necessary code? If we are good, then we can close the thread.

Thanks.

/1/

/*fix for correct layout of linked products on simple product page*/
.product-type-simple form.cart {
  display: flex;
  flex-wrap: wrap;
}
.product-type-simple form.cart > button {
  flex-grow: 1;
}
div.bundled_product_summary, .woocommerce div.product.bundled_product_summary {
display:inline-block;
}

Hello,

This part of the code relate to another issue:

div.bundled_product_summary, .woocommerce div.product.bundled_product_summary {
display:inline-block;
}

Have you solved the issue?

Best Regards

Yes, the problem is solved after I put the updated code from you. Thanks a lot for your help Elise. Appreciate it. You may close the thread.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts