Hi, I'm using storefront as my woocommerce theme. As you can see on the screenshot attached, I have a long of components on the composite product, and on Computer screens it takes a lot of scroll to view all components wit a lot of screen real estate unused.... is there anyway to show the components as a grid on big screens?
We’ve received your ticket and assigned one of our developers to help you with that. He’ll be looking into your issue and responding about the possibility of your request in a while. Please stay in touch as he might need you to provide further information.
Please send me your website info (wp-admin link, username, password) then I can change the layout for you. You also can create a dev/staging site with the same issue then I'll work on it.
Remember to mark private for your reply with these information.
This work needs to do based on your idea/requirement.
I can help you change the layout for the composite products only. E.g https://prnt.sc/qib2gl (remove the image if it's not needed, split the components into two or three columns).
Hi. Exactly. I need to keep the main image of the composite product and make the components into a, let say 3 columns(of course only on large screens, mobile should still be a listing,not a grid)..
Hi, I'm using storefront as my woocommerce theme. As you can see on the screenshot attached, I have a long of components on the composite product, and on Computer screens it takes a lot of scroll to view all components wit a lot of screen real estate unused.... is there anyway to show the components as a grid on big screens?
Hi,
We’ve received your ticket and assigned one of our developers to help you with that. He’ll be looking into your issue and responding about the possibility of your request in a while. Please stay in touch as he might need you to provide further information.
Best regards.
Janilyn T. - WPClever Support Agent
Hi Fernando.
Yes! I can help you to do that.
Please send me your website info (wp-admin link, username, password) then I can change the layout for you. You also can create a dev/staging site with the same issue then I'll work on it.
Remember to mark private for your reply with these information.
Best regards,
Dustin
This work needs to do based on your idea/requirement.
I can help you change the layout for the composite products only. E.g https://prnt.sc/qib2gl (remove the image if it's not needed, split the components into two or three columns).
Best regards,
Dustin
Hi. Exactly. I need to keep the main image of the composite product and make the components into a, let say 3 columns(of course only on large screens, mobile should still be a listing,not a grid)..
Please try adding below CSS code to WP-Admin → Appearance → Customizer → Additional CSS:
@media only screen and (min-width: 769px) {
.product-type-composite .woocommerce-product-gallery, .product-type-composite .summary {
width: 100% !important;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.wooco_components {
display: flex !important;
width: calc(100% + 30px) !important;
margin-left: -15px !important;
margin-right: -15px !important;
}
.wooco_components .wooco_component {
width: 33.33%;
flex: 0 0 33.33%;
padding: 0 15px;
border-bottom: none;
}
}
And the result https://prnt.sc/qidzxq
You can change 33.33% to 50% to show 2 columns.
Best regards,
Dustin
Hi,I've tried. But only the first 3 components are visible. The other 30something are not there.
Abd if I set it to 50% only the first two appears.
Sorry, please try again:
@media only screen and (min-width: 769px) {
.product-type-composite .woocommerce-product-gallery, .product-type-composite .summary {
width: 100% !important;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.wooco_components {
display: flex !important;
flex-flow: wrap !important;
width: calc(100% + 30px) !important;
margin-left: -15px !important;
margin-right: -15px !important;
}
.wooco_components .wooco_component {
width: 50%;
flex: 0 0 50%;
padding: 0 15px;
border-bottom: none;
}
}
Best regards,
Dustin
Working Perfectly!!! Thanks
You're welcome!
If you are satisfied, please reward it a full five-star ★★★★★ rating. https://wordpress.org/support/plugin/wpc-composite-products/reviews/?filter=5
Thank you in advance! <3
Best regards,
Dustin