Home › Forums › WoodMart support forum › Help required on product page alignment

Help required on product page alignment

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 9, 2020 at 5:52 pm #232142

    hazesmokeshop
    Participant

    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.

    October 9, 2020 at 8:51 pm #232171

    Elise Noromit
    Member

    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

    October 10, 2020 at 3:11 am #232190

    hazesmokeshop
    Participant

    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.

    October 10, 2020 at 9:35 am #232235

    Elise Noromit
    Member

    Hello,

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

    body .single_add_to_cart_button {
width: 81%;
}

    Best Regards

    October 10, 2020 at 11:16 am #232255

    hazesmokeshop
    Participant

    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.

    October 12, 2020 at 8:23 am #232522

    Elise Noromit
    Member

    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

    October 12, 2020 at 4:26 pm #232690

    hazesmokeshop
    Participant

    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;
}
    October 12, 2020 at 6:22 pm #232714

    Elise Noromit
    Member

    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

    October 12, 2020 at 9:47 pm #232764

    hazesmokeshop
    Participant

    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.

    October 13, 2020 at 8:00 am #232847

    Elise Noromit
    Member

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

    Best Regards

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)