Grouped Product with Music Player Plugin

Hi sir/ma’am,

I’m working on a website to sell music files online (Mp3s) and I’m using the plugin “Music Player for Woocommerce” to integrate the play buttons in the grouped product table setup. With a little bit of custom css for the plugin (given by the author of the plugin) the grouped product table looks ok. But the checkbox to select the product and the price are not aligned properly. I tried the plugin with a couple of other themes I had purchased from Themeforest and it looked fine in those themes but I really like your theme and I was hoping it would work with this.

I’ve attached a screenshot of the grouped product table along with this post. Will you be able to help with the CSS so that the checkbox and the price can be aligned properly (either in the center or far right)? I tried to locate the css that manages it, but couldn’t find it. I’ve also uploaded the site on a demo server so that you can take a look at the backend and the plugin css. The grouped product page is at the following link:

http://demo.odp.co.in/product/sample-grouped-product/

Thanks a lot,

Bles

Hi sir/ma’am,

The screenshot was not uploaded because of size being bigger. I’ve attached the screenshot along with this post.

Thanks a lot,

Bles

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and for contacting us.

It is not clear how do you want it to look like. I have checked on the Storefront it does not look nice either. http://prntscr.com/nfua1n

If you like the result like this http://prntscr.com/nfue1f add this code to the Theme Settings > Custom CSS > Global:

@media screen and (min-width:375px){
body .wcmp-player-list table td .product-name {
    min-width:250px;
}
}
@media screen and (max-width:375px){
body .wcmp-player-list table td .product-name {
    min-width:200px;
}
}

Best Regards

Hi,

Thanks a lot for your prompt response. And thanks a lot for that custom CSS. That’s exactly what I was looking for.

I just had one more question:

When there is no image for a single product, and if it is included in the grouped product, then the image space shows up as empty with the text and other content on the right side in the mobile view, and it doesn’t look very good. I’ve attached a screenshot of the same. It can also be seen at the demo link here:

http://demo.odp.co.in/product/default-grouped-product/

Is there any way to totally disable images in grouped products table list?

Thanks a lot and warm regards,

Bles

Attachments:

You must be logged in to view attached files.

Hello,

Now instead of an image there a blank PNG is added. Remove these demo PNGs and check. It does not help, I will try to hide image with custom CSS.

Best Regards

Hi,

Thanks again for the prompt response. In this link:

http://demo.odp.co.in/product/default-grouped-product/

I’ve removed all the product images from the grouped products. In the Desktop version it looks fine, as when all the images are removed from the grouped products, the product names align to the left and the table height is also automatically adjusted. But in the mobile view (I’ve attached the screenshot), there is a white empty space next to all the grouped products which looks slightly awkward.

Hope this helps. It would be great option if there was a theme setting to show/hide the grouped product images.

Thanks a lot and warm regards,

Bles

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

body .group_table tr, .wishlist_table tr, .woocommerce-cart-form__contents tr {
    padding-left: 0;
}

Best Regards

Hi,

Thanks a lot. That css code did it.

Once again, thanks a lot for your prompt help.

Warm regards,

Bles

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts