Visual changes on Composite Product pages

Greetings XTemos team! I hope everyone is doing well.

I have recently installed WooCommerce’s official Composite Products plugin and I’ve begun working on a template page that I will then duplicate to many additional pages.

I have been corresponding with WooCommerce support about some visual changes that I’d like to make, and they replied that I would need to discuss this with the theme developer which is why I am reaching out today.

1. In the area that shows the image and description of the selected component, I would like the ratio between the two columns to be 50/50 or perhaps 60/40.

So instead of this: https://prnt.sc/lKcmvgpWBwnC
It would be this: https://prnt.sc/lKcmvgpWBwnC
Basically like a standard product page: https://prnt.sc/9sGBcHS4JAMJ

2. For mobile, at the moment it is two columns as well.. This needs to be changed to one column, and the color preview image needs to be moved so that it will be underneath the description, and above the color select dropdown menu

Screenshot #1: https://prnt.sc/ITsCb8zI4w-i
Screenshot #2: https://prnt.sc/l4SbM-VAylTH

3. The next/previous component buttons are nearly invisible at the moment and I would like to make them more prominent. https://prnt.sc/SylpFK42LEVg

4. In mobile view, if the component title is long and takes up two rows, the rows overlap and don’t have enough spacing between them: https://prnt.sc/_Q27NIDJtH2o

If you have any additional tips or opinions on how to make the composite product pages more visually appealing, I would appreciate it!

I have included the login information and product link in the private content.

Thanks in advance for your assistance.

Best regards,
Tom

Hello wildguitars,

Thanks for reaching to us.

First of all, I am appreciate your patience.

1, 2, 3. Please disable WooCommerce Composite products plugin and check again.

If you want to build the custom product layouts, I kindly recommend you to build Custom Product layouts, which is built with WoodMart WooCommerce builder, then and create new WooCommerce layouts and place your specific contents that suits your requirements.

Further, you can read more about the Layout Builder here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

4. Go to Theme Settings > Custom CSS and remove this code line https://prnt.sc/PqVdhEFlYbLB

Regards,

Hi Hung, thank you for your insightful reply.
I’m not sure if I didn’t understand you correctly or if perhaps you didn’t understand me.
Can you please take a look at the video I recorded for you (link in the private content) and let me know your additional thoughts?

Best regards,
Tom

[Author]

Posts