[Resolved] WooCommerce Product Image Block in a content template won't display correctly

[Author]

Posts

[markM-4]

Hi there, I'm sure there is a simple fix for this but I can't find any combination of settings to change to solve.

I am using the Kadence theme with Toolset to create an Ecommerce site, I am following the Creating Custom Templates for WooCommerce Products guide, but I can't get the product image block to display correctly, either by using the Toolset Custom Output (the gallery images are cut off and any style, border etc isn't applied) or by using the Woocommerce native Output (Block takes up third of the column, still not styling applied, clicking on the gallery images moves the content below).

Unticking the "Add a container DIV around the post body for WooCommerce styling" box in the Toolset settings still doesn't resolve the issue (however it does resolve the native output size issue)

You can see the issue here:
hidden link

All I am trying to do is create a simple 2 column layout with the product image gallery in the left column, and the details in the right.

Any assistance for how to go about solving this conflict would be greatly appreciated

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To troubleshoot which styles are not applying, I'll need to see how this template is set up in the admin area.

Can you please share temporary admin login details, along with the details of the style changes that you expected?

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing these details.

I noticed that some of the styles added by the blocks content template are being overridden by the active theme's styles.

To overcome this, you can include the following CSS code in the template's "CSS editor":
( screenshot: hidden link )

.content-area .wp-block-woocommerce-views-product-image .woocommerce-product-gallery {
    width: 100% !important;
}

.content-area .wp-block-woocommerce-views-product-image .woocommerce-product-gallery .flex-viewport {
    border: 2px solid rgb(0, 0, 0);
}

.content-area .wp-block-woocommerce-views-product-image .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs > li {
    border: 1px solid rgb(0, 0, 0);
    margin: 0 4px 0;
}

[markM-4]

My issue is resolved now. Thank you!