Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #2941108
Columns of Bundled Products
Closed

Comments

  • Mr Mark Bache started the conversation

    Hi

    I have to sat you plugin is brilliant. In bundled items,  we 80-100  options as we sell sweets (candy) so it displays in one big list. Is there a way  to have more than one column  so the list is shorter?

    I will need to keep the plus and minus buttons too,

  •  767
    Janilyn replied

    Hi Mr Mark,

    Thank you for contacting WPClever Support Forum. 

    We’ve received your ticket and assigned one of our developers to help you with that. 

    He’ll be looking into your question and responding with specific instructions as soon as possible. 

    Please stay patient as we're having very heavy workloads, it might take some time for our developers to reach back.

    Best regards.

    Janilyn T. - WPClever Support Agent

  •  1,226
    Dustin replied

    Hi Mark,

    I'm so sorry for the late reply!

    Yes, you can do that by using CSS code. The result will be like this https://www.screencast.com/t/dUkX0d3b

    Please try to add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

    .woosb-wrap .woosb-products {
        display: flex;
        flex-wrap: wrap;
    }
    .woosb-products .woosb-product {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px;
    }
    .woosb-products .woosb-product .woosb-thumb {
        width: 100%;
    }
    .woosb-products .woosb-product .woosb-thumb img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .woosb-products .woosb-product .woosb-title {
        text-align: center;
    }
    .woosb-products .woosb-product .woosb-price, .woosb-products .woosb-product .woosb-qty {
        width: auto !important;
        flex: 0 0 auto !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .woosb-products .woosb-product .woosb-qty .quantity {
        margin: 0 !important;
    }
    @media only screen and (max-width: 767px) {
        .woosb-products .woosb-product {
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 10px;
        }
    }

    If it doesn't work correctly for your site, please send me a bundle product link then I can provide the exact CSS code.

    Best regards,
    Dustin

  • Mr Mark Bache replied

    Hi Dustin

    Thanks for looking at this for me. It's really close but not quite right as the + are missing. Also is there a way to remove the bundled item price as these come as free?

    Your help is really appreciated.

    Here is a link to what I have https://www.sweetiemix.com/product/brand-new-product-123/

    Thanks
    Mark

  •  1,226
    Dustin replied

    I've checked your bundle and seen it works fine https://www.screencast.com/t/ixPSRiffyn7

    If you want to change anything, please explain more about it with a screenshot.

    Best regards,
    Dustin

  •  2
    Umut replied

    Thank you very much for this code. how i can fix this problem?

  •  1,226
    Dustin replied

    Please give me a product link that has this issue then I can check and provide the CSS code to fix itsmile.png

    Best regards,
    Dustin

  •  2
    Umut replied

    Hi Dustin, we solved the problem allready. thank you