Home Forums WoodMart – Premium Template Add to cart issue with bundle products

This topic contains 9 replies, has 2 voices, and was last updated by Aizaz Imtiaz Awan Aizaz Imtiaz Awan 1 week, 1 day ago.

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

    hpb
    Customer

    Hi, i got some help the other day here: https://xtemos.com/forums/topic/add-to-cart-button-placing-on-mobile-single-product-page/

    We just found one issue with the code, where add to cart for bundle products looks weird and is moved to a new column: http://prntscr.com/1rhk8mx

    This code was inserted:

    form.cart,
    .woocommerce-variation-add-to-cart {
      display: flex;
    }
     form.cart > button,
    .woocommerce-variation-add-to-cart > button {
      flex-grow: 1;
    }
    • This topic was modified 1 month, 2 weeks ago by  hpb.
    #317126

    Hello,

    Sorry, my mistake, please try adding the following Custom CSS in the Mobile Custom CSS area under Theme Settings >> Custom CSS and remove the CSS from the Global Custom CSS section.

    Best Regards.

    #317131

    hpb
    Customer

    This fixed the issue on the desktop, but the button looks very similar on the mobile view of bundles. Basically the issue is only on the mobile site now-

    #317165

    Hello,

    The button is showing fine on both desktop and mobile devices. Please see the screenshot: https://ibb.co/s3YynmR

    Best Regards

    #325057

    hpb
    Customer

    Sorry for the late reply. Been quite busy with other things.

    Yeah, it does work on the mobile single product page, but not for bundle products on mobile:
    https://prnt.sc/1w2q4hg

    #325093

    Hello,

    Please provide the URL of a bundled product to check it myself and help you out accordingly.

    Best Regards.

    #325108

    hpb
    Customer

    Inserted a direct link in private content. Please look at the mobile version of the link.

    Private Content Hidden
    #325153

    Hello,

    Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    .product-type-yith_bundle form.cart,
    .woocommerce-variation-add-to-cart {
    display: block;
    }
    .product-type-yith_bundle form.cart > button,
    .woocommerce-variation-add-to-cart > button {
      display: inline-block;
      position: absolute;
    }

    Best Regards.

    #325229

    hpb
    Customer

    Worked great, I appreciate it. 🙂

    A minor issue is that the button goes over the right edge of the screen on my phone. The picture is in private content

    Private Content Hidden
    #325341

    Hello,

    Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    .product-type-yith_bundle .product-image-summary .single_add_to_cart_button {
        width: 68%;
    }

    Best Regards.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.