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

Okay
  Public Ticket #3331998
Adjusting Layout Formatting on Composite Products
Closed

Comments

  •  1
    Kyle started the conversation
    March 24, 2023 at 3:44pm

    I am interested in altering the layout on your composite product plugin. Currently all composite product descriptions are on top of the drop down boxes, and I'd like for them to be added to the left of the box to minimize the footprint on the product page when selecting multiple products. 

    Attached files:  What I want.jpg
      What you offer.jpg

  •  767
    Janilyn replied
    March 27, 2023 at 4:27am

    Hi Kyle,

    Thanks for contacting WPClever Support Forum. We're not available at the weekends so today (Monday) I am able to process your ticket.

    We’ve received your question. However, we need more information in order to help you with the custom codes. 

    Please provide us with a link to your published product for checking? 

    We need to check the frontend in order to provide the proper CSS code for your needs.

    After receiving your information, I'll proceed to the next step. 

    Best regards. 

    Janilyn T. - WPClever Support Agent

  •  1
    Kyle replied
    April 7, 2023 at 5:09pm

    Janilyn,  

    Here is the link to our product, and images showing what we have Vs. what we want. 
    What We Have Through Your Plugin
    How We Want It To Look
    We want the drop down boxes to have a much smaller footprint on the page so customers do not have to scroll so far down to make selections, as well as prevent the huge white empty space below the product image. Thanks

  •  767
    Janilyn replied
    April 10, 2023 at 10:07am

    Hi Kyle,

    Thanks for the feedback. Your response came when we were out of our business hours already last week so I will continue our session today (Monday).

    I have 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
    April 11, 2023 at 4:07am

    Hi Kyle,

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

    .wooco_components .wooco_component {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wooco_components .wooco_component .wooco_component_product {
    flex-grow: 1;
    margin-left: 10px;
    margin-top: 0;
}

    And the result https://www.screencast.com/t/nKvqGaRn

    However, I think you should remove the sidebar here https://www.screencast.com/t/o8qIFhLzxICh to have more space.

    Best regards,
    Dustin

  •  1
    Kyle replied
    April 11, 2023 at 1:29pm

    Any way to keep each line item on a single line, with the same width, so we have symmetry across the lineup.

  •  1,226
    Dustin replied
    April 12, 2023 at 2:51am

    Please replace the previous CSS code with a new one:

    .wooco_components .wooco_component {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.wooco_components .wooco_component .wooco_component_product {
    flex-grow: 1;
    margin-left: 10px;
    margin-top: 0;
    width: calc(100% - 130px);
    flex: 0 0 calc(100% - 130px);
}
.wooco_components .wooco_component .wooco_component_name {
    width: 120px;
    flex: 0 0 120px;
    text-align: left;
}
.wooco_components .wooco_component .wooco_component_product .select2-container .select2-selection--single .select2-selection__rendered {
    white-space: break-spaces;
    height: 40px;
    overflow: hidden;
}

    And the result https://www.screencast.com/t/P43lG5YRq

    Best regards,
    Dustin