Styling Product Bundles

Hi team Xtemos,

We use a product bundle plugin. On product pages with product bundles the images of the items of the bundle are shown below each other but are displayed very huge on mobile devices. We would like to smaller the thumbnail dimensions on mobile. Could you please help with this? See private area for more info.

Thank you.

Hello,

Add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS

.bundled_product_summary .bundled_product_images img {
   width: 50%;
   height: 90px;
     }

Best Regards.

Hi Aizaz,

Is it also possible to show it on mobile like image attached in private area?

Thank you.

Hello,

Add below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile

.bundle_form .bundled_product.product {
     display: flex;
   margin-left: -30px !important;
}
table.bundled_products .bundled_product_summary td.bundled_item_details_col .details {
     margin-right: -35px;
}

.bundled_product_summary .bundled_product_images img {
   width: 60%;
}

Best Regards.

Thank you. The images are shown in different sizes. See Private area.

Hello,

Sorry to say there are no options in theme settings to change the product bundle design. Actually, your mentioned concern is specifically related to a third-party Plugin for which you might need to contact the respective Plugin Support or configure the plugins settings.

Best Regards.

[Author]

Posts