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

Okay
  Public Ticket #3813519
customizing the layout of bundle items on mobile devices
Open

Comments

  • Artur started the conversation
    February 3, 2025 at 9:07pm

    DearSupport Team,

    I am using the WP Clever Product Bundle plugin on my website and need assistance customizing the layout of bundle items on mobile devices.

    Currently, the elements are displayed horizontally (left to right) in the following order:

    1. Product image
    2. Description
    3. Price

    I would like to modify this layout to be displayed vertically (top to bottom) as follows:

    1. Product image
    2. Description
    3. Price

    Could you please advise:

    • Is it possible to achieve this layout change using the plugin settings?
    • If not, could you provide guidance or code examples for implementing this via custom CSS or template modifications?

    Thank you for your time and support. I look forward to your response

    Attached files:  Снимок экрана 2025-02-03 в 21.59.59.png

  •  1,355
    Dustin replied
    February 4, 2025 at 3:57am

    Hi Artur,

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

    @media only screen and (max-width: 767px) {
    .woosb-products .woosb-product {
        flex-direction: column;
        justify-content: center;
    }
    
    .woosb-products .woosb-product > div {
        width: 100%;
        flex-basis: 100%;
        flex: 0 0 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
   .woosb-products .woosb-product .woosb-thumb {
        width: 80px;
        flex: 0 0 80px;
   }
	
   .woosb-products .woosb-product .woosb-thumb img {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
        height: auto;
   }
	
    .woosb-products .woosb-product .woosb-title {
        text-align: center !important;
    }
    
    .woosb-products .woosb-product .woosb-qty, .woosb-products .woosb-product .woosb-price {
        width: auto !important;
        flex-basis: auto !important;
    }
    
    .woosb-products .woosb-product .variations {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 5px !important;
    }
    
    .woosb-products .woosb-product .variations .reset {
        display: none !important;
    }
}

    Best regards,
    Dustin