Visual changes on Composite Product pages

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,

Hello wildguitars,

1. Changing width of columns in the desktop

Please add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for Desktop:

.component:not(.selection_thumbnail_hidden) .composited_product_details_wrapper > div.details,
div.component .composited_product_images,
body.woocommerce-page div.product div.composited_product_images{
	width: 50%;
}

2. On the mobile

Please add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for Mobile section:

.component:not(.selection_thumbnail_hidden) .composited_product_details_wrapper > div.details,
div.component .composited_product_images,
body.woocommerce-page div.product div.composited_product_images{
	width: 100%;
}

.summary-add-to-cart-form-composite .component:not(.selection_thumbnail_hidden) .composited_product_details_wrapper> div.details{
	padding: 0;
}

.composited_product_details_wrapper{
	display: flex;
	flex-wrap: wrap;
}

.composited_product_images.images{
	order: 2;
}

Regards,

Hello wildguitars,

Basically, the product images are controlled by WooCommerce and the WoodMart theme doesn’t influence this. The size of the thumbnail you set should be larger than the size of the product thumbnail displayed on the shop page. If the thumbnail size is smaller than what the default size expects, it may appear blurry or not display correctly.

You can find the sizes used on the demo here:
https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

and Regenerate thumbnails using the appropriate plugin. https://wordpress.org/plugins/regenerate-thumbnails/

Here is the WooCommerce Manual:
https://woocommerce.com/document/fixing-blurry-product-images/

Best Regards

Hi wildguitars,

Keep us in mind for future questions and concerns, we’re always here to help!

Regards,